¿Por qué Docker para Frontend?
Docker asegura que todos los desarrolladores de tu equipo tengan exactamente el mismo entorno de desarrollo, elimina los problemas de "funciona en mi máquina" y hace el despliegue consistente.
Aplicación React
Dockerfile de Producción (Multi-Etapa)
# Etapa 1: Construcción
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
# Etapa 2: Servir con Nginx
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]Docker Compose para Desarrollo Frontend
# docker-compose.yml
services:
app:
build:
context: .
dockerfile: Dockerfile.dev
ports:
- "3000:3000"
volumes:
- .:/app
- /app/node_modules
environment:
- NEXT_PUBLIC_API_URL=http://api:4000
depends_on:
- api
api:
build: ./api
ports:
- "4000:4000"
depends_on:
- db
db:
image: postgres:16-alpine
environment:
POSTGRES_USER: admin
POSTGRES_PASSWORD: secreto
POSTGRES_DB: miapp
volumes:
- pgdata:/var/lib/postgresql/data
volumes:
pgdata:Errores Comunes
- Hot Reload: Usa montajes bind y
--host 0.0.0.0para habilitar hot reload en contenedores - node_modules: Usa un volumen anónimo para prevenir que los node_modules del host sobreescriban los del contenedor
- Build Args: Las variables con prefijo
NEXT_PUBLIC_deben establecerse en tiempo de build, no en runtime