Construindo imagem Docker em projetos Angular utilizando o Nginx como servidor

Last change in quinta-feira, 03 de dezembro de 2020

Primeiramente vamos criar um arquivo contendo a configuração do Nginx.

O arquivo deve ser criado na raiz do projeto angular e deve-se chamar nginx-custom.conf.

Nosso servidor deve responder as requisições feitas na porta 80, habilitar a compressão de arquivos utilizando o gzip, deixar recursos estáticos em cache por 30 dias e responder as requisições a partir do path raiz.

server {
  # responde as requisições feitas na porta 80
  listen 80;

  # habilita a compressão de arquivos utilizando o gzip
  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript application/octet-stream image/svg+xml image/png image/x-icon;
  gzip_comp_level   9;

  # responde as requisições no path raiz
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }

  # Intercepta as requisições para recursos estáticos, informando na resposta da requisição que os arquivos devem ser mantidos em cache por 30 dias
  location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2|ttf)$ {
      expires 30d;
      add_header Vary Accept-Encoding;
      access_log off;
  }
}

Próximo passo é criamos um arquivo chamado Dockerfile, esse arquivo vai ser responsável por criar uma nova imagem Docker da nossa aplicação.

O arquivo de configuração tem dois estágios.

No primeiro estágio utilizamos a imagem do Node como base, depois copiaremos todo o código da nossa aplicação Angular para dentro da nova imagem, efetuamos o download de todas as dependências declaradas no package.json, na sequência definimos que o ambiente é de produção, e por fim, geramos o build da nossa aplicação.

Já no segundo estagio criamos nossa imagem Docker com base na imagem do Nginx, copiaremos todo código fonte gerado no build do estagio anterior para o diretório padrão do Nginx, e por fim, copiaremos o arquivo de configuração do Nginx criado na etapa anterior para o diretório de configuração do Nginx.

# Estagio 1 - Responsável por gerar o build da nossa aplicação
FROM node as node
WORKDIR /app
COPY package.json /app/
RUN npm i npm@latest -g
RUN npm install
COPY ./ /app/
ARG env=prod
RUN npm run build

# Estagio 2 - Responsável por expor nossa aplicação
FROM nginx
COPY --from=node /app/dist /usr/share/nginx/html
COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf

Com tudo configurado, vamos abrir um terminal na pasta raiz do projeto Angular, e executar o comando para construir nossa imagem, no comando a seguir definimos qual o grupo, nome e versão da nossa imagem. Como exemplo vamos definir o grupo como gasparbarancelli, o nome sendo blog, e a versão como 1.0.

docker build -t gasparbarancelli/blog:1.0 .

Depois que imagem for gerada com sucesso, podemos executar o seguinte comando no terminal para verificarmos que a imagem foi gerada com sucesso.

docker images | grep gasparbarancelli