Docker Compose to Deploy React with Next.js in Production with Nginx + Next.js

by
Tiempo de lectura: < 1 minuto

Today I’m going to share with you a much-needed Docker Compose setup that will allow you to deploy a fully functional website using Nginx and React with Next.js in just a few minutes.

The first thing you need to do is create the docker-compose.yml file:

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

Now let’s create a 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"]

Now we create the config/nginx folder and add the file named nginx.conf

Finally, we need to copy these files to the root of our project, resulting in the following structure:

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

This will allow us to run Docker. To do this, we launch the command:

docker compose up -d

And we can access the website from http://localhost:80

Post Views: 9

Leave a Comment