How to Point Domain and host a Next.js app in Production on an Ubuntu VPS

In this guide, we'll walk through the process of hosting a Next.js app in production using NGINX and PM2. Follow these steps to get your Next.js app up and running smoothly.

Step 0: Get Access to Remote Server

Syntax:

ssh -p PORT USERNAME@HOSTIP

Example:

ssh -p 22 abhi@203.32.44.92
ssh root@194.87.34.23

Step 1: Installing Necessary Packages

First, let's ensure our server has the required packages installed. Open a terminal and run the following commands:

sudo apt update && sudo apt upgrade
sudo apt install nginx
sudo apt install git
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install --lts
npm install -g pm2@latest

Verify that all required softwares are installed:

nginx -v
node -v
npm -v
git --version
pm2 --version

Add PM2 Process on Startup:

sudo pm2 startup

Verify Nginx is Active and Running:

sudo service nginx status

Verify Web Server Ports are Open and Allowed through Firewall:

sudo ufw status verbose

If UFW Firewall is not enable you can enable it:

sudo ufw enable
sudo ufw allow http
sudo ufw allow https
sudo ufw allow ssh

Exit from Remote Server:

exit

Step 2: Pointing Domain to Remote Server

Login to Your Domain Provider Website, Navigate to Manage DNS & Add Following Records:

Type	Host/Name	Value
A	@	Your Remote Server IP
A	www	Your Remote Server IP
AAAA	@	Your Remote Server IPv6
AAAA	www	Your Remote Server IPv6

Step 3: Copy Project from Local Machine to Remote Server or VPS

There are two ways to do it:

I. Using Command Prompt

• On Local Windows Machine Make Your Project Folder a Zip File using any of the software e.g. winzip
• Open Command Prompt
• Copy Zip File from Local Windows Machine to Linux Remote Server

Syntax:

scp -P Remote_Server_Port Source_File_Path Destination_Path

Example:

scp -P 1034 codebhaiya.zip abhi@203.32.44.92

• Copied Successfully
• Get Access to Remote Server via SSH

Syntax:

ssh -p PORT USERNAME@HOSTIP

Example:

ssh -p 1034 abhi@203.32.44.92
ssh root@194.87.34.23

• Unzip the Copied Project Zip File

Syntax:

unzip zip_file_name

Example:

unzip codebhaiya.zip

II. Using Github

• Open Project on VS Code then add .gitignore file (If needed)
• Push your Poject to Your Github Account as Private Repo
• Make Connection between Remote Server and Github Repo via SSH Key
• Generate SSH Keys

Syntax:

ssh-keygen -t ed25519 -C "your_email@example.com"

If Permission Denied then Own .ssh then try again to Generate SSH Keys

Syntax:

sudo chown -R user_name .ssh

Example:

sudo chown -R abhi .ssh

Open Public SSH Keys then copy the key

cat ~/.ssh/id_ed25519.pub

• Go to Your Github Repo
• Click on Settings Tab
• Click on Deploy Keys option from sidebar
• Click on Add Deploy Key Button and Paste Remote Server's Copied SSH Public Key then Click on Add Key
• Clone Project from your github Repo using SSH Path It requires to setup SSH Key on Github

Syntax:

git clone ssh_repo_path

Example:

git clone git@github.com:abhinayjangde/codebhaiya.git

Step 4: Configuring NGINX

Create Virtual Host File

Syntax:

sudo nano /etc/nginx/sites-available/your_domain

Example:

sudo nano /etc/nginx/sites-available/codebhaiya.com

Write following Code in Virtual Host File

server{
    listen 80;
    listen [::]:80;
    server_name your_domain www.your_domain;
    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;
    }
}

Enable Virtual Host or Create Symbolic Link of Virtual Host File

Syntax:

sudo ln -s /etc/nginx/sites-available/virtual_host_file /etc/nginx/sites-enabled/virtual_host_file

Example:

sudo ln -s /etc/nginx/sites-available/codebhaiya.com /etc/nginx/sites-enabled/codebhaiya.com

Check Configuration is Correct or Not

sudo nginx -t

Step 5: Setting Up Next.js App

Now, let's prepare our Next.js app. Navigate to your project directory and execute the following commands:

cd ~/project_folder_name

Install Dependencies

npm install
npm run build

Step 6: Configuring PM2

Create pm2 config File inside project folder

nano ecosystem.config.js

Write below code in ecosystem.config.js file

module.exports = {
    apps : [
        {
            name: "myapp",
            script: "npm start",
            port: 3000
        }
    ]
}

Step 7: Finally

Restart Nginx

sudo service nginx restart

Start NextJS Application using pm2

pm2 start ecosystem.config.js

Save PM2 Process

pm2 save

Check PM2 Status

pm2 status

Now you can make some changes in your project local development VS Code and Pull it on Remote Server (Only if you have used Github)

Pull the changes from github repo

git pull
npm run build
pm2 reload app_name/id

Using Certbot for HTTPS

Securing your Next.js application with HTTPS is crucial for protecting sensitive data and ensuring user trust. Certbot is a widely used tool for obtaining and managing SSL/TLS certificates from the Let's Encrypt Certificate Authority. Follow these steps to set up HTTPS for your Next.js app using Certbot:

Step 1: Install Certbot

sudo apt update
sudo apt install python3-certbot-nginx

Step 2: Obtain SSL Certificate

Follow the prompts to provide an email address for renewal reminders and agree to the terms of service. Certbot will handle the certificate issuance and configuration for NGINX.

sudo certbot --nginx -d codebhaiya.com

Step 3: Verify HTTPS Configuration

sudo nginx -t

If the test is successful, reload NGINX to apply the changes:

sudo systemctl reload nginx

Step 4: Automate Certificate Renewal

This command ensures that Certbot will renew your certificates automatically when they are about to expire.

sudo systemctl enable certbot.timer

Step 5: Verify Renewal

If the dry run completes without errors, you're all set. Certbot will handle certificate renewal automatically when necessary.

sudo certbot renew --dry-run

Step 6: Test HTTPS Connection

Finally, test your Next.js application over HTTPS to ensure that everything is working correctly. You can do this by navigating to your domain in a web browser and verifying that the connection is secure. By following these steps, you can secure your Next.js application with HTTPS using Certbot, enhancing security and trust for your users.

Conclusion

Your Next.js app is now ready and running in production! NGINX is serving as a reverse proxy, forwarding requests to your Next.js server, and PM2 is ensuring your app stays up and running.

By following these steps and configurations, you can successfully deploy and host your Next.js application in a production environment. Happy coding!