Deploy com Docker - Avanzato

O Problema

O Nginx no Docker nao vem configurado para SPA React. Ao acessar /avaliacao diretamente, da 404.

A Solucao

Opcao 1: Configurar Nginx dentro do container (RECOMENDADO)

1. Criar um novo Dockerfile:

FROM nginx:alpine

# Copiar o site
COPY dist/ /usr/share/nginx/html/

# Copiar a configuracao customizada
COPY nginx-docker.conf /etc/nginx/conf.d/default.conf

# Expor porta 80
EXPOSE 80

# Iniciar Nginx
CMD ["nginx", "-g", "daemon off;"]

2. Build e run:

# Build
npm run build
bash scripts/build-static-routes.sh dist
docker build -t avanzato-site .

# Run
docker run -d -p 80:80 --name avanzato avanzato-site

Opcao 2: Usar docker-compose

docker-compose.yml:

version: '3.8'
services:
  avanzato:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./dist:/usr/share/nginx/html:ro
      - ./nginx-docker.conf:/etc/nginx/conf.d/default.conf:ro
    container_name: avanzato-site

Comandos:

npm run build
bash scripts/build-static-routes.sh dist
docker-compose up -d

Opcao 3: Container ja rodando (hotfix)

Se o container ja esta rodando:

# Copiar config para dentro do container
docker cp nginx-docker.conf avanzato-site:/etc/nginx/conf.d/default.conf

# Recarregar Nginx
docker exec avanzato-site nginx -s reload

Verificar se funcionou

# Testar
curl -I http://localhost/avaliacao
# Deve retornar HTTP 200, nao 404

A regra magica

A unica coisa que importa e esta linha no Nginx:

location / {
    try_files $uri $uri/ /index.html;
}

Isso diz ao Nginx: "se nao encontrar o arquivo, manda para index.html" — onde o React pega a rota.

1.7 KiB Raw Permalink Blame History