Deploying a Next.js Application on ubuntu Using Nginx Nodejs Pm2
Next.js is a popular React framework for building server-rendered React applications with ease. In this tutorial, we’ll walk through deploying a Next.js application on a DigitalOcean droplet using Nginx as a reverse proxy. This step-by-step guide assumes you have a Next.js application ready to deploy and a DigitalOcean account.
Prerequisites
- A Next.js application
- A DigitalOcean account if not Create One
- A registered domain name (optional but recommended)
Step 1: Creating a DigitalOcean Droplet
We’ll be hosting our Next.js app on a DigitalOcean Droplet that we configure ourselves. Let’s create the Droplet now.
- Log in to your DigitalOcean account and navigate to the Droplets section.
- Click “Create Droplet.”
- Choose the Ubuntu image (preferably the latest LTS version).
- Select the desired droplet size according to your needs and budget.
- Choose a datacenter region closest to your target audience for better performance.
- Add your SSH keys for secure access to your droplet.
- Choose a hostname for your droplet, which can be your domain name or any preferred name.
- Click “Create Droplet.”
- Create Droplet
Once the Droplet is created, note down the IP address assigned to it.
Step 2: Setting Up the Droplet
Now that we’ve created the droplet, we need to prepare it so that it can accept incoming connections and route those connections to our Next.js application.
SSH into your droplet using the IP address and the SSH key you provided during the droplet creation:
ssh root@<DROPLET_IP>
Update and upgrade the packages on the droplet:
sudo apt update && sudo apt upgrade -y
Install nginx for the server
sudo apt install nginx
Step 2 — Adjusting the Firewall
Before testing Nginx, the firewall software needs to be adjusted to allow access to the service. Nginx registers itself as a service with ufw
upon installation, making it straightforward to allow Nginx access.
List the application configurations that ufw
knows how to work with by typing:
sudo ufw app list
You should get a listing of the application profiles:
Output
Available applications:
Nginx Full
Nginx HTTP
Nginx HTTPS
OpenSSH
As demonstrated by the output, there are three profiles available for Nginx:
- Nginx Full: This profile opens both port 80 (normal, unencrypted web traffic) and port 443 (TLS/SSL encrypted traffic)
- Nginx HTTP: This profile opens only port 80 (normal, unencrypted web traffic)
- Nginx HTTPS: This profile opens only port 443 (TLS/SSL encrypted traffic)
It is recommended that you enable the most restrictive profile that will still allow the traffic you’ve configured. Right now, we will only need to allow traffic on port 80.
You can enable this by typing:
sudo ufw allow 'Nginx HTTP'
You can verify the change by typing:
sudo ufw status
The output will indicated which HTTP traffic is allowed:
Output
Status: active
To Action From
-- ------ ----
OpenSSH ALLOW Anywhere
Nginx HTTP ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
Nginx HTTP (v6) ALLOW Anywhere (v6)
Checking your Web Server
At the end of the installation process, Ubuntu 20.04 starts Nginx. The web server should already be up and running.
We can check with the systemd
init system to make sure the service is running by typing:
systemctl status nginx
Output
● nginx.service - A high performance web server and a reverse proxy server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
Active: active (running) since Fri 2020-04-20 16:08:19 UTC; 3 days ago
Docs: man:nginx(8)
Main PID: 2369 (nginx)
Tasks: 2 (limit: 1153)
Memory: 3.5M
CGroup: /system.slice/nginx.service
├─2369 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
└─2380 nginx: worker process
As confirmed by this out, the service has started successfully. However, the best way to test this is to actually request a page from Nginx.
You can access the default Nginx landing page to confirm that the software is running properly by navigating to your server’s IP address. If you do not know your server’s IP address, you can find it by using the icanhazip.com tool, which will give you your public IP address as received from another location on the internet:
curl -4 icanhazip.com
You should receive the default Nginx landing page:
If you are on this page, your server is running correctly and is ready to be managed.
Managing the Nginx Process
Now that you have your web server up and running, let’s review some basic management commands.
To stop your web server, type:
sudo systemctl stop nginx
To start the web server when it is stopped, type:
sudo systemctl start nginx
To stop and then start the service again, type:
sudo systemctl restart nginx
If you are only making configuration changes, Nginx can often reload without dropping connections. To do this, type:
sudo systemctl reload nginx
By default, Nginx is configured to start automatically when the server boots. If this is not what you want, you can disable this behavior by typing:
sudo systemctl disable nginx
To re-enable the service to start up at boot, you can type:
sudo systemctl enable nginx
You have now learned basic management commands and should be ready to configure the site to host more than one domain.
Configuring Nginx For Nextjs
Nginx is the tool that will handle all the routing to our Next.js application. Create a new Nginx configuration file for your Next.js application:
sudo nano /etc/nginx/sites-available/nextjs
Paste the following configuration, replacing server_name with your domain name or droplet IP address:
server {
listen 80;
server_name YOUR_IP_ADDRESS;
location / {
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;
}
}
Save and close the file. Create a symbolic link to enable the configuration:
sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/
Test the Nginx configuration for any syntax errors:
sudo nginx -t
If the configuration test is successful, restart Nginx
sudo service nginx restart
Deploying the Next.js Application To Droplet
Next up, we’ll get a Next.js application onto the Droplet. There are many options to do this. most recommend is use any git
- Create an SSH key on the server, connect it to your GitHub account, and clone your repo
SSH back into your droplet:
ssh root@<DROPLET_IP>
Clone Next.js application
Clone over SSH
cd /var/www
git clone git@bitbucket.org:teamsinspace/documentation-tests.git name_if_you_want
Clone over HTTPS
cd /var/www
git clone https://username@bitbucket.org/teamsinspace/documentation-tests.git name_if_you_want
use any of as you can access
Navigate to the Next.js application directory:
cd nextjs
Need to Install Nodejs on Server you can install any way you want .
i will show Installing Node Using the Node Version Manager
This way of installing Node.js that is particularly flexible is to use nvm, the Node Version Manager. This piece of software allows you to install and maintain many different independent versions of Node.js, and their associated Node packages, at the same time.
To install NVM on your Ubuntu 20.04 machine, visit the project’s GitHub page. Copy the curl
command from the README file that displays on the main page. This will get you the most recent version of the installation script.
Before piping the command through to bash
, it is always a good idea to audit the script to make sure it isn’t doing anything you don’t agree with. You can do that by removing the | bash
segment at the end of the curl
command:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh
Review the script and make sure you are comfortable with the changes it is making. When you are satisfied, run the command again with | bash
appended at the end. The URL you use will change depending on the latest version of nvm, but as of right now, the script can be downloaded and executed with the following:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
This will install the nvm
script to your user account. To use it, you must first source your .bashrc
file:
source ~/.bashrc
Now, you can ask NVM which versions of Node are available:
nvm list-remote
Output
. . .
v18.0.0
v18.1.0
v18.2.0
v18.3.0
v18.4.0
v18.5.0
v18.6.0
v18.7.0
v18.8.0
v18.9.0
v18.9.1
v18.10.0
v18.11.0
v18.12.0 (LTS: Hydrogen)
v18.12.1 (LTS: Hydrogen)
v18.13.0 (Latest LTS: Hydrogen)
v19.0.0
v19.0.1
v19.1.0
v19.2.0
v19.3.0
v19.4.0
It’s a very long list. You can install a version of Node by writing in any of the release versions listed. For instance, to get version v14.10.0, you can run:
nvm install v14.10.0
You can view the different versions you have installed by listing them:
nvm list
Output
-> v14.10.0
v14.21.2
default -> v14.10.0
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v14.21.2) (default)
stable -> 14.21 (-> v14.21.2) (default)
. . .
This shows the currently active version on the first line (-> v14.10.0
), followed by some named aliases and the versions that those aliases point to.
Note: if you also have a version of Node.js installed through apt
, you may receive a system
entry here. You can always activate the system-installed version of Node using nvm use system
.
Additionally, there are aliases for the various long-term support (or LTS) releases of Node:
utput
lts/* -> lts/hydrogen (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.21.2
lts/gallium -> v16.19.0 (-> N/A)
lts/hydrogen -> v18.13.0 (-> N/A)
You can install a release based on these aliases as well. For instance, to install the latest long-term support version, hydrogen
, run the following:
nvm install lts/hydrogen
Output
Downloading and installing node v18.13.0...
. . .
Now using node v18.13.0 (npm v8.19.3)
You can switch between installed versions with nvm use
:
nvm use v14.10.0
Output
Now using node v14.10.0 (npm v6.14.8)
You can verify that the install was successful using the same technique from the other sections:
node -v
Output
v14.10.0
The correct version of Node is installed on your machine as expected. A compatible version of npm
is also available.
Setup Application For Deployment
Go to project directory:
cd /var/www/nextjs
Install the application dependencies:
npm install
Deploying a Next.js Application on a DigitalOcean Droplet
By Chris Sevilleja on 3 Apr 2023
Next.js is a popular React framework for building server-rendered React applications with ease. In this tutorial, we’ll walk through deploying a Next.js application on a DigitalOcean droplet using Nginx as a reverse proxy. This step-by-step guide assumes you have a Next.js application ready to deploy and a DigitalOcean account.
Here’s an overview of the key resources you may need:
- Next.js - The official website of the Next.js framework.
- React - The official website of the React JavaScript library.
- DigitalOcean - Create a DigitalOcean account if you don’t have one already
Prerequisites
- A Next.js application
- A DigitalOcean account
- A registered domain name (optional but recommended)
- A local installation of Node.js and npm or yarn
Step 1: Creating a DigitalOcean Droplet
We’ll be hosting our Next.js app on a DigitalOcean Droplet that we configure ourselves. Let’s create the Droplet now.
- Log in to your DigitalOcean account and navigate to the Droplets section.
- Click “Create Droplet.”
- Choose the Ubuntu image (preferably the latest LTS version).
- Select the desired droplet size according to your needs and budget.
- Choose a datacenter region closest to your target audience for better performance.
- Add your SSH keys for secure access to your droplet.
- Choose a hostname for your droplet, which can be your domain name or any preferred name.
- Click “Create Droplet.”
- Create Droplet
Once the Droplet is created, note down the IP address assigned to it.
Step 2: Setting Up the Droplet
Now that we’ve created the droplet, we need to prepare it so that it can accept incoming connections and route those connections to our Next.js application.
SSH into your droplet using the IP address and the SSH key you provided during the droplet creation:
ssh root@<DROPLET_IP>
Copy
Update and upgrade the packages on the droplet:
sudo apt update && sudo apt upgrade -y
Copy
Install the required packages:
sudo apt install -y nodejs npm nginx
Copy
Step 3: Configuring Nginx
Nginx is the tool that will handle all the routing to our Next.js application. Create a new Nginx configuration file for your Next.js application:
sudo nano /etc/nginx/sites-available/nextjs
Copy
Paste the following configuration, replacing server_name with your domain name or droplet IP address:
server {
listen 80;
server_name YOUR_IP_ADDRESS;
location / {
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;
}
}
Copy
Save and close the file. Create a symbolic link to enable the configuration:
sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/
Copy
Test the Nginx configuration for any syntax errors:
sudo nginx -t
Copy
If the configuration test is successful, restart Nginx:
sudo service nginx restart
Copy
Step 4: Deploying the Next.js Application
Next up, we’ll get a Next.js application onto the Droplet. There are many options to do this.
- Create an SSH key on the server, connect it to your GitHub account, and clone your repo
- Create a Next.js application on the Droplet
For this tutorial, we will be creating a brand new Next.js application in our Droplet.
SSH back into your droplet:
ssh root@<DROPLET_IP>
Copy
Create a new Next.js application and follow the prompts:
cd /var/www
npx create-next-app nextjs
Copy
Navigate to the Next.js application directory:
cd nextjs
Copy
Install the application dependencies:
npm install
If you have any environment File copy on server. example
cp .env.example .env
Build the Next.js application:
npm run build
Finally, start the Next.js application:
npm start
Your Next.js application is now deployed and accessible at your domain name or droplet IP address. To keep your application running in the background and automatically restart on crashes or server reboots, you should use a process manager like PM2.
Setting Up PM2 Process Manager
We ran npm start
from within our Droplet. Sometimes this command may stop running for reasons like the server restarted or it needed to install updates. We will use a tool called PM2 to make sure that our Next.js application is always running. PM2 will even restart the Next.js application if it goes down.
To install PM2 globally on your droplet:
npm install -g pm2
Navigate to the Next.js application directory (if not already there):
cd /var/www/nextjs
Start the Next.js application using PM2:
pm2 start npm --name "nextjs" -- start
You can run on different port if you
pm2 start npm --name "nextjs" -- start -- --port 4000
This command will start the Next.js application with the name “nextjs” using the npm start command. PM2 will automatically restart the application if it crashes or if the server reboots.
To ensure PM2 starts on boot, run:
pm2 startup
This command will generate a script that you can copy and paste into your terminal to enable PM2 to start on boot.
Save the current PM2 processes:
pm2 save
You have now successfully deployed a Next.js application on a DigitalOcean droplet using Nginx as a reverse proxy and PM2 as a process manager. Your application should be accessible at your domain name or droplet IP address.
Remember to configure your DNS settings if you are using a domain name. Point your domain’s A record to your droplet’s IP address to access the application using the domain name.
For improved security and SEO, consider setting up SSL certificates using Let’s Encrypt and enforcing HTTPS connections. Additionally, you can explore optimizing your Next.js application with caching and other performance improvements.
That’s it! You have successfully deployed your Next.js application on a DigitalOcean Droplet. Happy coding!