Deploying a Next.js App on HTTPS with Docker Using NGINX as a Reverse Proxy

In this tutorial, we’ll walk through setting up a Docker Compose environment where NGINX serves as a reverse proxy for a Next.js application. This setup will handle SSL connections, providing a secure HTTPS endpoint for your application. Additionally, we’ll make the code sections on this page copyable for your convenience.

Step 1: Dockerizing Your Next.js Application

The first step is to Dockerize your Next.js application. This is how you can set up your `Dockerfile`:

FROM node:latest
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]
    

kindly refer to the official Next.js documentation
here

`Take Note`:
– Use a `.dockerignore` file to avoid unnecessary files being copied into the Docker image.
– Set `output: 'standalone'` in `next.config.js` to optimize the build for Docker deployment.
– The Next.js application will run behind an NGINX reverse proxy, so the default port (3000) won’t be exposed publicly.

Step 2: Setting Up the Docker Compose Environment

Next, let’s set up a Docker Compose environment that includes both the Next.js application and NGINX.

NGINX Dockerfile:

FROM nginx:1.23.3-alpine
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
EXPOSE 443
    

Build the NGINX image:

docker build -t nginx:latest -f nginx/Dockerfile nginx
    

Now, let’s configure Docker Compose with a `docker-compose.yml` file:

version: "3.9"
services:
  nextjs:
    image: nextjs:latest
    container_name: nextjs
    ports:
      - "3000:3000"
    restart: always

  nginx:
    image: nginx:latest
    container_name: nginx
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - /etc/ssl:/etc/nginx/ssl:ro
    restart: always
    

`Take Note`:
– You can start with an empty `nginx.conf` file and configure it in the next step.
– Ensure that ports 80 and 443 are open on your server.
– SSL certificates and keys should be placed in `/etc/ssl` on the host machine and made available to the NGINX container via a Docker volume.

Step 3: Configuring NGINX as a Reverse Proxy

This is an example `nginx.conf` file that sets up NGINX as a reverse proxy:

events {
}

http {
    upstream nextjs {
        server nextjs:3000;
    }

    server {
        # Redirect HTTP requests to HTTPS.
        listen 80;
        server_name localhost;
        root /srv/public;
        return 301 https://$host$request_uri;
    }

    server {
        listen 443 ssl;

        server_name localhost;
        root /srv/public;
        server_tokens off;

        ssl_certificate /etc/nginx/ssl/my_ssl_cert.crt;
        ssl_certificate_key /etc/nginx/ssl/my_ssl_key.key;

        location / {
            try_files $uri $uri/ @nextjs;
        }

        location @nextjs {
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto https;
            proxy_set_header X-Forwarded-Ssl on;
            proxy_set_header Host $http_host;
            proxy_redirect off;
            proxy_pass http://nextjs;
            proxy_cookie_path / "/; HTTPOnly; Secure";
        }
    }
}
    

`Take Note`:
– NGINX can refer to the Next.js app by its service name (`nextjs`) because Docker Compose sets up a network where services can communicate by their names.

Step 4: Deploying the Application

Once everything is set up, deploy your application by building and running the Docker containers.

Build the Docker images:

docker build -t nextjs:latest -f Dockerfile .
docker build -t nginx:latest -f nginx/Dockerfile nginx
    

Deploy using Docker Compose:

docker-compose up
    

Debugging:

If you encounter any issues, use Docker logs to troubleshoot:

docker logs [container_name]
    

You can also test the server using:

curl http://localhost:80
curl --insecure https://localhost:443
    

By following these steps, you should have a secure, scalable Dockerized Next.js application running behind an NGINX reverse proxy.