Nesta postagem do blog, vamos explorar o Docker e percorrer a criação de uma construção do Docker de vários estágios com um aplicativo Nginx simples. Se você está apenas começando com o Docker, não se preocupe, vou detalhar tudo passo a passo para que você possa acompanhar!

O Dockerfile

Aqui está o Dockerfile com o qual trabalharemos:

FROM node:18-alpine AS installer

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:latest AS deployer

COPY --from=installer /app/build /usr/share/nginx/html

Descompactando o Dockerfile

Agora, vamos descompactar o que está acontecendo neste Dockerfile, passo a passo:

1. DO Nó:18-alpine AS instalador

Esta linha extrai a imagem oficial do Node.js (versão 18 no Alpine Linux) do Docker Hub. Pense no Docker Hub como uma biblioteca de imagens. Ao usar esta linha, especificamos que queremos usar Node.js como nossa imagem base para o primeiro estágio de nossa construção.

2. WORKDIR /app

Este comando define o diretório de trabalho dentro do contêiner como /app. Você pode pensar nisso como a criação de uma pasta dedicada para seu aplicativo dentro do contêiner, semelhante à forma como você organiza arquivos em sua área de trabalho.

3. COPIAR pacote*.json ./

Aqui, copiamos os arquivos package.json e package-lock.json de nosso diretório local para o diretório de trabalho do contêiner. Esses arquivos contêm informações sobre as dependências que nosso aplicativo precisa.

4. EXECUTAR instalação npm

Este comando executa npm install, que instala todas as dependências especificadas no package.json.

5. COPIAR . .

Esta linha copia o restante dos arquivos do nosso aplicativo para o contêiner. Ele traz tudo do nosso diretório local para o diretório /app dentro do contêiner.

6. EXECUTAR npm executar compilação

Agora compilamos nosso aplicativo usando o comando npm run build. Esta etapa geralmente transforma nosso código (geralmente React, neste caso) em um pacote estático, pronto para ser servido aos usuários. A saída deste comando será colocada em um diretório de construção dentro de /app.

7. DE nginx:implantador AS mais recente

Nesta linha, mudamos para uma nova imagem base: Nginx. Nginx é um servidor web poderoso que pode servir arquivos estáticos, como os que acabamos de construir. Este é o início da nossa segunda etapa no processo de construção de vários estágios.

8. COPIAR --from=installer /app/build /usr/share/nginx/html

Aqui, copiamos os arquivos do aplicativo construído do estágio anterior (instalador) para o diretório de serviço do Nginx. O sinalizador --from=installer diz ao Docker para obter arquivos do estágio de instalação que acabamos de definir.

Executando seu contêiner Docker

Depois que seu Dockerfile estiver configurado, você poderá criar e executar seu contêiner Docker com os seguintes comandos:

docker build -t your-app-name .
docker run -dp 3000:80 your-app-name

Certifique-se de substituir o nome do seu aplicativo por um nome de sua escolha. O sinalizador -dp desanexará seu contêiner e mapeará a porta 3000 em sua máquina host para a porta 80 no contêiner, permitindo que você acesse seu aplicativo em http://localhost:3000.

Conclusão

E aí está! Você acabou de criar uma construção Docker de vários estágios que leva seu aplicativo do desenvolvimento à produção usando Nginx. Se você tiver alguma dúvida ou opinião sobre o processo, fique à vontade para deixar um comentário abaixo!

Pegadinhas: coisas a serem observadas

Um problema comum ao trabalhar com esta configuração é esquecer de mapear os números de porta corretos. O Nginx normalmente escuta na porta 80 dentro do contêiner, mas se você estiver tentando acessar o aplicativo em sua máquina local, precisará encaminhar a porta correta do contêiner para sua máquina. Por exemplo, se quiser acessar o aplicativo em localhost:3000, você precisará executar o contêiner com o sinalizador -p 3000:80 para mapear a porta 3000 em sua máquina para a porta 80 no contêiner.

Perca esta etapa e você se perguntará por que tudo foi construído perfeitamente, mas você não consegue acessar o aplicativo em seu navegador!

Tags e menções

@piyushsachdeva
Vídeo do dia 3