Docker compose para desplegar React con Next.js en producción con Nginx + Next.js

Tiempo de lectura: < 1 minuto

Hoy os voy a compartir una configuración Docker Compose muy necesaria y que os permitirá en pocos minutos desplegar una web completamente funcional usando Nginx y React con Next.js

Lo primero que tenéis que hacer es crear el archivo docker-compose.yml

version: '3'

services:
  nextjs-app:
    build: 
      context: .
    ports:
      - "3000:3000"

  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./config/nginx/nginx.conf:/etc/nginx/nginx.conf:ro
    depends_on:
      - nextjs-app

Ahora vamos a crear un Dockerfile:

# Use a Node.js alpine image as base
FROM node:alpine as build-stage

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json to the working directory
COPY package.json package-lock.json ./

# Install dependencies
RUN npm ci --only=production

# Copy the rest of the application code to the working directory
COPY . .

# Build the Next.js application
RUN npm run build

# Expose port 3000
EXPOSE 3000

# Start the Next.js production server
CMD ["npm", "start"]

Ahora creamos las carpetas config/nginx y añadimos el fichero llamado nginx.conf

Finalmente tenemos que copiar estos archivos en la raíz de nuestro proyecto quedando así:

.next
config/nginx/nginx.conf
public/
src/
docker-compose.yml
Dockerfile

Esto nos permitirá ejecutar Docker. Para ello lanzamos el comando:

docker compose up -d

Y podremos acceder a la web desde http://localhost:80