Passo a Passo para Configurar Docker com Angular: Dockerfile e Docker Compose

Para configurar o Dockerfile e o docker-compose.yml para um projeto Angular que será executado em um contêiner Docker, você pode seguir os passos explicados a seguir. Esse exemplo faz uso do Dockerfile para criar uma imagem com o Angular pré-compilado e um servidor Node.js simples para servir a aplicação, além do docker-compose.yml para configurar o serviço.

Explicação do Dockerfile para um Projeto Angular com Docker

Aqui está o Dockerfile detalhado com cada etapa explicada:

# Usando a imagem do Node.js 18 como base para a construção do projeto Angular
FROM node:18 AS build

# Definindo o diretório de trabalho dentro do contêiner
WORKDIR /usr/src/app

# Instalando o Angular CLI globalmente
RUN npm install -g @angular/cli

# Copiando o package.json e o package-lock.json para o diretório de trabalho
COPY package*.json ./

# Instalando as dependências do projeto
RUN npm install

# Copiando todo o código do projeto para o diretório de trabalho
COPY . .

# Compilando a aplicação Angular para produção
RUN ng build --configuration production

# Fase final: usando uma imagem leve do Node.js para servir o aplicativo
FROM node:18-alpine

# Definindo o diretório de trabalho
WORKDIR /usr/src/app

# Instalando dependências do servidor (caso necessário para o Node.js)
COPY package*.json ./
RUN npm install

# Copiando os arquivos compilados do Angular para o diretório de trabalho
COPY --from=build /usr/src/app/dist/hurr-ui ./dist/hurr-ui

# Copiando o servidor Node.js para servir o Angular (index.js)
COPY index.js .

# Expondo a porta 8080, que será usada pelo Node.js
EXPOSE 8080

# Iniciando o servidor Node.js
CMD ["node", "index.js"]

Explicação por Etapas

1. Construção da Aplicação Angular:
   • Base de Imagem: FROM node:18 AS build cria uma camada base usando o Node.js versão 18, o que é necessário para construir o Angular.
   • Definição do Diretório de Trabalho: WORKDIR /usr/src/app define onde os comandos serão executados dentro do contêiner.
   • Instalação do Angular CLI: RUN npm install -g @angular/cli instala o Angular CLI globalmente, necessário para rodar comandos Angular.
   • Instalação de Dependências: COPY package*.json ./ copia os arquivos de dependências (package.json e package-lock.json) para o contêiner e, em seguida, RUN npm install instala todas as dependências.
   • Cópia do Código do Projeto: COPY . . copia todos os arquivos do projeto para o contêiner.
   • Compilação da Aplicação: RUN ng build --configuration production compila o código Angular em modo de produção e armazena os arquivos compilados na pasta dist/.
2. Servindo a Aplicação com Node.js:
   • Nova Base de Imagem: FROM node:18-alpine utiliza uma imagem mais leve para a fase final.
   • Configuração do Diretório: WORKDIR /usr/src/app define o diretório de trabalho.
   • Instalação de Dependências do Servidor: RUN npm install instala as dependências necessárias para o servidor Node.js.
   • Cópia dos Arquivos Compilados: COPY --from=build /usr/src/app/dist/hurr-ui ./dist/hurr-ui copia a aplicação Angular compilada da primeira fase para a imagem final.
   • Configuração do Servidor: COPY index.js . copia o arquivo index.js, que contém o servidor Node.js simples, para servir a aplicação.
   • Exposição da Porta e Inicialização: EXPOSE 8080 define a porta 8080 e CMD ["node", "index.js"] inicia o servidor.

Configuração do docker-compose.yml

Este arquivo define o serviço e facilita o gerenciamento dos contêineres:

version: '3'
services:
  hurr-ui:
    build: .
    ports:
      - "4200:4200"
    volumes:
      - .:/usr/src/app
      - /usr/src/app/node_modules

Explicação

• Build: build: . indica que o Docker deve construir a imagem a partir do Dockerfile na pasta atual.
• Ports: ports mapeia a porta do contêiner para a porta do host. No exemplo, a porta 4200 está exposta para desenvolvimento local, enquanto a imagem final usará 8080.
• Volumes: O uso de volumes (.:/usr/src/app e /usr/src/app/node_modules) permite a sincronização dos arquivos locais com o contêiner durante o desenvolvimento, facilitando atualizações em tempo real sem precisar reconstruir a imagem.

index.js para Servir o Angular

Crie um arquivo index.js para servir a aplicação Angular compilada:

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist/hurr-ui')));

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'dist/hurr-ui', 'index.html'));
});

app.listen(8080, () => {
  console.log('Servidor Angular rodando na porta 8080');
});

Esse arquivo usa Express.js para servir os arquivos estáticos gerados pela build Angular, e redireciona todas as rotas para index.html para compatibilidade com o roteamento do Angular.

Passos Finais

1. Construa e inicie o contêiner:bashCopiar códigodocker-compose up --build
2. Acesse o projeto no navegador pelo endereço http://localhost:4200.

Agora você tem uma aplicação Angular rodando em um contêiner Docker configurado com um servidor Node.js para produção.