[TUTORIAL] Usando compressão Brotli no Nginx

Uma das formas de aumentar o desempenho de um website é comprimir os arquivos usados nele. Além do padrão GZip, o Brotli vem sendo uma alternativa para deixar os arquivos mais leves para o carregamento rápido.

Desenvolvido pelo Google, o Brotli é um algoritmo de compressão de dados compatível com a maioria dos navegadores modernos. Ele é gratuito, de código aberto, e possui uma melhor taxa de compressão. Ou seja, produz arquivos compactados menores.

O Nginx permite o uso desse método de compactação por meio de um módulo dinâmico, gerado a partir do código-fonte do servidor e do Brotli. Neste post você encontra o passo a passo de como implantar esse recurso.

Criando o módulo Brotli

Primeiro é necessário verificar qual versão do Nginx está instalada, para gerarmos os módulos correspondentes àquela versão.

nginx -v

Em seguida, instalaremos os pacotes necessários para fazer o build dos módulos do Brotli para o Nginx da versão correspondente.

sudo apt install git gcc cmake libpcre3 libpcre3-dev \
                 zlib1g zlib1g-dev openssl libssl-dev

Faça o clone do repositório oficial do Brotli para Nginx no GitHub. Recomendo fazer os downloads na pasta do usuário.

git clone https://github.com/google/ngx_brotli.git

Faça o download do Nginx, e em seguida, descompacte o arquivo. A versão do servidor deve ser a mesma da que receberá o módulo.

wget https://nginx.org/download/nginx-<VERSION>.tar.gz
tar zxvf nginx-<VERSION>.tar.gz

Entre na pasta dos arquivos descompactados do Nginx.

cd nginx-<VERSION>

Uma vez dentro da pasta do código-fonte do Nginx, crie os arquivos dos módulos com os comandos abaixo.

# Configure dynamic module
sudo ./configure --with-compat --add-dynamic-module=../ngx_brotli

# Make
sudo make modules

Finalmente, copie os arquivos de módulos gerados no comando anterior para a pasta de módulos da sua instalação do Nginx. No exemplo abaixo, o servidor está instalado no path /usr/share/nginx/.

sudo cp ./objs/*.so /usr/share/nginx/modules

Importante: repita estas etapas a cada atualização de versão do Nginx. Caso contrário, o módulo gerado deixará de ser incompatível com a versão e o servidor não funcionará.

Configurando o Nginx

Por fim, edite o arquivo nginx.conf para carregar, ativar e passar as opções de compressão do Brotli.

# Load module section
load_module "modules/ngx_http_brotli_filter_module.so";
load_module "modules/ngx_http_brotli_static_module.so";

http {
...

    # Brotli compressing
    brotli on;
    brotli_comp_level 4;
    brotli_static on;
    brotli_types application/atom+xml application/javascript application/json application/rss+xml
        application/vnd.ms-fontobject application/x-font-opentype application/x-font-truetype
        application/x-font-ttf application/x-javascript application/xhtml+xml application/xml
        font/eot font/opentype font/otf font/truetype image/svg+xml image/vnd.microsoft.icon
        image/x-icon image/x-win-bitmap text/css text/javascript text/plain text/xml;

...
}

Após a atualização do arquivo de configuração, reinicie o servidor (no Debian sudo systemctl restart nginx). Limpe o cache do seu navegador e, ao carregar o website novamente, a sigla "br" aparecerá no "Content-Encoding" nos tipos de arquivos compactados.

Queria muito aprender sobre NGINX, mas tenho dificuldades de achar conteúdos. Consegue me indicar?

Eu comecei lendo, além da [documentação](https://nginx.org/en/docs/), alguns tutoriais na [comunidade da DigitalOcean](https://www.digitalocean.com/community).

Outra dúvida, como você faz para colocar #.matheusmisumoto.dev, o # é um caminho talvez, queria entender como isso funciona, exemplo, não sei explicar.

https://projects.matheusmisumoto.dev/restaurant-finder/

O projects.

Neste caso, o **projects** é um subdomínio do domínio matheusmisumoto.dev. O que você precisa fazer é criar o registro do subdomínio nas configurações de DNS do seu domínio, com o tipo A, com dados do IP do seu servidor. Exemplo: | Nome do Host | Tipo | Dados | | --- | --- | --- | | example.com | A | 222.22.222.22 | | subdominio.example.com | A | 222.22.222.22 | Depois, você cria um novo bloco de servidor no arquivo de configurações do Nginx, geralmente `conf.d/default.conf`. ``` server { listen 80; server_name example.com; # Restante da configuração do domínio example.com } server { listen 80; server_name subdominio.example.com; # Restante da configuração do subdomínio subdominio.example.com } ```
que legal , interessante isso 😮 muito obrigado, fica de aprendizado pra mim, vou procurar mais sobre.