kocisov/next_nginx.md

Last active August 2, 2024 13:02

Star () You must be signed in to star a gist
Fork () You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/kocisov/2a9567eb51b83dfef48efce02ef3ab06.js"></script>
Save kocisov/2a9567eb51b83dfef48efce02ef3ab06 to your computer and use it in GitHub Desktop.

Download ZIP

How to setup next.js app on nginx with letsencrypt

Raw

next_nginx.md

How to setup Next.js app on Nginx with letsencrypt

Next.js, Nginx with Reverse proxy, SSL certificate

UPDATE (07/20/2021):
- This process got simplified over the years of this gist being out
- Older version of this gist (without certbot): https://gist.github.com/kocisov/2a9567eb51b83dfef48efce02ef3ab06/33fdd88872a0801bdde58fccce430fa48737ae10
- I would also now recommend deploying to Vercel if you don't need custom server support

1. Install Nginx, Node and certbot

In your server console/terminal

cd ~ # go to the current user's home directory
curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh

sudo apt update
sudo apt install nginx nodejs certbot python3-certbot-nginx

Also enable Nginx in ufw

sudo ufw allow 'OpenSSH' # needed for SSH connections
sudo ufw allow 'Nginx Full' # after installing Nginx!
sudo ufw enable

2. Setup letsencrypt with certbot

You will need to point your domain to your server's IP with DNS Record (with A record, ...)

Edit our default Nginx site file

sudo vim /etc/nginx/sites-available/default

Content

You can keep everything other than server_name (domain) unchanged now

example.com should be changed to the domain you are setting up the app on

server {
  # ...

  server_name example.com www.example.com;

  # ...
}

Restart nginx

sudo nginx -t # check syntax errors
sudo systemctl restart nginx

Run `certbot` command

sudo certbot --nginx -d example.com -d www.example.com
# certbot will guide you through setting up the certificate and different options of redirecting, ...

4. Setup Reverse proxy

Edit our Nginx file again

# ...

server {
  # ...

  server_name example.com www.example.com;

  # ...

  location / {
    # Reverse proxy for Next server
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Port $server_port;

    # we need to remove this 404 handling
    # because of Next's error handling and _next folder
    # try_files $uri $uri/ =404;
  }

  # ...
}

Restart Nginx again

sudo nginx -t # check syntax errors
sudo systemctl restart nginx

4. Setup Next.js app

# assuming you have a GitHub repository for the app
git pull https://github.com/user/repo.git
cd repo
npm install # install app dependencies (or yarn install)
npm run build # build our app for production (or yarn build)

npm install -g pm2 # install pm2 for running our app detached

# run start/stop
pm2 start npm --name "next" -- start # start next app
pm2 stop next # for stopping app

We are done

Congratulations!

Now you have the Next.js app up and running on Nginx Reverse proxy with SSL on your https://domain.

Author

kocisov commented Jan 28, 2021

No problem, glad you got it resolved.

chas13 commented Feb 8, 2021 •

edited

Loading

Hi there, could anyone help with renewing the let's encrypt certificate, please?

sudo letsencrypt certonly -a webroot --webroot-path=/var/www/html -d mydomain.com -d www.mydomain.com

IMPORTANT NOTES:
 - The following errors were reported by the server:

   Domain: mydomain.com 
   Type:   unauthorized
   Detail: Invalid response from
   https://mydomain.com/.well-known/acme-challenge/kJKsq-0rKw_v9nf3oVLlg7l4xOiRy7nZcBkQyouVxt0
   [51.89.192.19]: "<html>\r\n<head><title>404 Not
   Found</title></head>\r\n<body bgcolor=\"white\">\r\n<center><h1>404
   Not Found</h1></center>\r\n<hr><center>"

gigapoc commented May 19, 2021

Thank you for this ! Really helpful and clear, A+ grade SSL certs !

Xoffio commented Jun 2, 2021

By doing this do you lose the performance optimizations of Next.js?
I got this from the official doc:

Before deciding to use a custom server please keep in mind that it should only be used when the integrated router of Next.js can't meet your app requirements. A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization.

Author

kocisov commented Jun 3, 2021

By doing this do you lose the performance optimizations of Next.js?
I got this from the official doc:

Before deciding to use a custom server please keep in mind that it should only be used when the integrated router of Next.js can't meet your app requirements. A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization.

Hello, no that is not the case, we are not using custom server in this guide.

dryleaf commented Jun 18, 2021

@kocisov, Could you please explain why we need to do 2. Edit our default nginx site file step? Seems like a duplicate from step 3 nginx file, as same configuration is present there.

Author

kocisov commented Jun 18, 2021

@kocisov, Could you please explain why we need to do 2. Edit our default nginx site file step? Seems like a duplicate from step 3 nginx file, as same configuration is present there.

Hello, we do the second step because we need to tell Nginx that we want to serve on our domain before running letsencrypt.
This configuration file is also quite different in 3rd step because it's after generating certificates and we also set up proxy pass there.