React app dockerizada corretamente vira imagem de 20MB com Nginx. Multi-stage build, variáveis de ambiente e deploy simplificado.
Conceitos Principais
Static Build
npm run build gera HTML/CSS/JS estáticos. Não precisa Node em produção. Nginx serve arquivos. Imagem minúscula.
Multi-Stage Essencial
Stage 1: Node build (npm run build). Stage 2: Nginx Alpine, COPY apenas build/. Stage 1 descartado (500MB economizados).
Runtime Env Vars
React embute env vars no build. Para runtime, use env.js gerado na inicialização. Nginx serve /env.js dinamicamente.
Nginx Config
SPA requer fallback para index.html. try_files $uri /index.html. Gzip compression. Cache headers para assets.
Passo a Passo
- Multi-Stage Dockerfile: FROM node:18 AS build. npm ci, npm run build. FROM nginx:alpine. COPY --from=build /app/build /usr/share/nginx/html. EXPOSE 80.
- Nginx Config Custom: nginx.conf: location / { try_files $uri /index.html; }. Gzip on. Cache assets: location ~* \.(?:css|js)$ { expires 1y; }.
- Env Vars Runtime: Crie env.sh: echo "window.ENV = {API_URL: '$API_URL'}" > /usr/share/nginx/html/env.js. Exec no entrypoint. React lê window.ENV.
- Build e Deploy: docker build -t react-app:v1 .. docker run -p 80:80 -e API_URL=https://api.prod react-app:v1. Teste localhost.
- Otimize Build: Cache node_modules: --mount=type=cache,target=/app/node_modules. Build apenas código muda. 5min → 30s.
Boas Praticas
Recomendacoes
• Sempre multi-stage (Node build + Nginx serve)
• Versione builds (react-app:v1.2.3)
• Gzip e Brotli compression
• Cache headers para performance
• Health check endpoint /health.html
Erros Comuns
Evite estes erros
• Servir React com Node (desnecessário)
• Não configurar try_files (404 em rotas)
• Hardcodar API URLs no build
• Não otimizar cache de assets
Checklist
- Multi-stage Dockerfile criado
- Nginx config com SPA fallback
- Env vars runtime configuradas
- Imagem < 30MB
- Build otimizado com cache
- Gzip compression ativa
- Deploy testado localmente