How to deploy a Next.js app on HTTPS (SSL connection) with Docker? – Ubuntu

The following steps explain how to set up a multi-container Docker Compose environment where NGINX is used as a reverse proxy in front of the Next.js application to handle the SSL connection (and offer an HTTPS URI).

Step 1 – Dockerize Next.js application

Luckily, this is part of the Next.js official docs themselves. The key step is to copy this Dockerfile to the Next.js repo you are working on.

Gotchas:

• It’s a good idea to copy .dockerignore as well
• Set output: 'standalone' in next.config.js (like this)
• We will place a reverse proxy in front of the Next.js app, so the port in the Dockerfile (3000 by default) is not what will be externally exposed; there’s no need to expose that port publicly
• Make sure that the image builds: docker build -t nextjs:latest -f Dockerfile .

Step 2 – Set up a Docker Compose environment

The Docker Compose environment will have two running containers: the Next.js app and NGINX.

The NGINX image can be created by adding a second Dockerfile:

# nginx/Dockerfile

FROM nginx:1.23.3-alpine

COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80
EXPOSE 443

Build the image from the project root dir with docker build -t nginx:latest -f nginx/Dockerfile nginx.

Then, we can create 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

Gotchas:

• An empty nginx.conf can be added for now, it’ll be configured in the next step
• Ports 80 (HTTP) and 443 (HTTPS) will be exposed pubicly, so they need to be open
• The SSL certificate and key are made available through a Docker volume. They are assumed to exist in the host machine under /etc/ssl. An alternative would be to pack them in the NGINX image (e.g. add COPY my_ssl_cert.crt /etc/nginx/ssl/my_ssl_cert.crt to the Dockerfile, idem for the key)

Step 3 – Configure NGINX as a reverse proxy

Example nginx.conf:

# nginx/nginx.conf

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";
        }
    }
}

Gotchas:

• We can refer to the Next.js app by its default hostname nextjs because by default Compose sets up a single network for your app (docs)

Step 4 – Deploy

1. Build both Docker images
2. Ship both Docker images, the SSL files, and docker-compose.yml to the server
3. In the server, run docker compose up
4. If required, use docker logs [container_name] to debug any issues; curl http://localhost:80 and curl --insecure https://localhost:443 can also help