How to deploy a Next.js project on Ubuntu with NGINX
How to deploy a Next.js project on Ubuntu with NGINX, explained in simple steps.
15 min read
— views
In this article, you will learn how to deploy your Next.js application on an Ubuntu VPS with NGINX. We will also cover how to install Node.js and how to set up a firewall.
Requirements
There are a few things you must have:
- A Next.js project
- VPS with Ubuntu 20.04
- Minimal experience in the terminal
- A domain (only required for NGINX proxy)
Prepare VPS for deployment
There are extra steps that we must perform, so we can properly deploy our Next.js project to our domain. This includes installing Node.js, installing NGINX and setting up the firewall.
Installing Node.js
We will install Node.js v18
using Nodesource. To install Node.js, we must first install and run the Nodesource setup script:
curl -sL https://deb.nodesource.com/setup_18.x | sudo bash
This will install the latest Node.js version to our VPS. We can now install Node.js from apt with the following command:
sudo apt install nodejs -y
To verify that Node.js is installed, we can run the following command:
node -v # 18.x.x
NGINX
NGINX is a web server that can also be used as a reverse proxy, load balancer, mail proxy and HTTP cache.
We will install NGINX using apt. To install NGINX, we can run the following command:
sudo apt install nginx -y
Firewall
We must set up a firewall to only allow certain ports on our VPS. We will only allow 22
for SSH, 80
for HTTP and 443
for HTTPS
sudo ufw allow ssh # 22
sudo ufw allow "Nignx Full" # 80 and 443
To verify this worked, you can run the following command
sudo ufw status
Firewall disabled?
If your firewall is disabled, you can run this simple command to enable it 👉
sudo ufw enable
Next.js project setup
To clone our Next.js project, make sure to log in to your VPS. We will be using git
to clone the project from GitHub onto our VPS.
# replace this URL with your repo
git clone https://github.com/Dev-CasperTheGhost/nextjs-ts-eslint-template.git
Don't have git installed?
If you don't have git
installed on the VPS, learn how to install it 👉
sudo apt install git -y
Once the project is cloned, we must change the directory to the project folder.
cd nextjs-ts-eslint-template
Now we can install the dependencies:
# Replace this with your package manager of choice
npm install
Once all the dependencies are installed, we can build the client so it is ready to be deployed.
npm run build
Now we can start the project in the background using pm2
. This will start the project on port 3000
in the background.
You can view any logs by running pm2 logs
.
# `run start` is the start command that will be executed.
pm2 start npm --name my-project -- run start
If you don't have pm2
installed yet, see the following command 👉
sudo npm install --global pm2
NGINX Configuration
Now that we have our Next.js project running, we can configure NGINX to serve our project.
NGINX proxy setup
Start by opening the following file with a text-editor: /etc/nginx/sites-available/default
. I will use nano for this.
nano /etc/nginx/sites-available/default
You might already see some configurations, you can safely remove this.
We can now start editing this file and add our own server
block.
server {
# the name of your domain, www is optional.
server_name my-domain.com www.my-domain.com;
location / {
# this must stay localhost. The port must be the same as your Next.js project
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_cache_bypass $http_upgrade;
}
# simple headers
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Frame-Options DENY always;
# this will serve the project on port 80
listen 80;
}
Once done editing, save and exit the editor and verify the config file with the following command:
nginx -t
You may have noticed that we are serving the project on port 80. This is fine for now, since we haven't installed our certificates yet. If you do not need a secure site, you can skip to #final-deployment-steps! Otherwise, continue reading on how to install certificates with Certbot.
Installing certificates with Certbot
Certbot can be installed in many ways and on many machines with different configurations, therefore please follow Certbot's installation guide.
After following Certbot's instructions, you should verify if it changed the NGINX config, open the config file and see changes made.
nano /etc/nginx/sites-available/default
Now you should see that the server
block will serve the project on port 443 (HTTPS)!
Final Deployment steps
As our last step, we must restart NGINX with this simple command:
sudo systemctl reload nginx
Now verify that all is running, head over to your domain and see the project in action 🎉!
The end
That's it! You've successfully set up NGINX on Ubuntu and deployed a Next.js project to it