DEV Community

Md Tariqul Islam
Md Tariqul Islam

Posted on • Edited on

Deployment Guide for Next.js Application on Hostinger VPS

Overview

This documentation provides step-by-step instructions for deploying a Next.js application on a Hostinger VPS for the domain domain-name.com. It uses Nginx as a reverse proxy and PM2 as a process manager. The setup includes automated deployment via GitHub Actions and HTTPS configuration with Let’s Encrypt.

Prerequisites

  • Hostinger VPS: Ubuntu 22.04 or higher, with SSH access.
  • Domain: domain-name.com, linked to the VPS IP via DNS.
  • GitHub Repository: Hosting the Next.js project.
  • Environment Variables: your environment variables.
  • Tools: SSH client (PuTTY/Terminal), Git, text editor (nano/vim).
  • Pre-installed Software: Node.js (v18.17+), Nginx, PM2, Certbot (Let’s Encrypt).

Step 0: Get Access to Remote Server:

  • Log in to VPS: 
ssh root@your-vps-ip
Enter fullscreen mode Exit fullscreen mode
  • Update System: 
sudo apt update && sudo apt upgrade -y
Enter fullscreen mode Exit fullscreen mode

Step 1: Install Required Software:

  • Node.js: 
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs
Enter fullscreen mode Exit fullscreen mode
  • Nginx: 
sudo apt install nginx -y
sudo systemctl enable nginx
sudo service nginx status
Enter fullscreen mode Exit fullscreen mode
  • PM2: 
sudo npm install -g pm2
sudo pm2 startup
Enter fullscreen mode Exit fullscreen mode
  • Git: 
sudo apt install git -y
Enter fullscreen mode Exit fullscreen mode
  • Verify that all required softwares are installed: 
nginx -v
node -v
npm -v
git --version
pm2 --version
Enter fullscreen mode Exit fullscreen mode
  • Verify Web Server Ports are Open and Allowed through Firewall: 
sudo ufw status verbose
Enter fullscreen mode Exit fullscreen mode
  • Firewall Setup: 
sudo ufw enable
sudo ufw allow 80
sudo ufw allow 443
sudo ufw allow 22
sudo ufw allow http
sudo ufw allow https
sudo ufw allow ssh
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

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

ssh-keygen -t ed25519 -C "your_email@example.com"
Enter fullscreen mode Exit fullscreen mode
  • Copy Private Key: 
cat ~/.ssh/id_ed25519
Enter fullscreen mode Exit fullscreen mode
  • Add SSH_PRIVATE_KEY to GitHub Settings > Secrets > Actions.

Deploy Next.js Project

  • 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

Clone github repo

mkdir -p ~/apps
cd ~/apps
git clone git@github.com:tariqul420/portfolio-next.git
Enter fullscreen mode Exit fullscreen mode

Step 4: Configuring NGINX

Delete default config

sudo rm -f /etc/nginx/sites-enabled/default
Enter fullscreen mode Exit fullscreen mode

Create Virtual Host File

sudo nano /etc/nginx/sites-available/your_domain
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

Enable Virtual Host or Create Symbolic Link of Virtual Host File

sudo ln -s /etc/nginx/sites-available/domain-name.com /etc/nginx/sites-enabled/domain-name.com
Enter fullscreen mode Exit fullscreen mode

Check Configuration is Correct or Not

sudo nginx -t
Enter fullscreen mode Exit fullscreen mode

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 ~/apps/project_folder_name
Enter fullscreen mode Exit fullscreen mode

Add environment variables

nano .env
Enter fullscreen mode Exit fullscreen mode

Install Dependencies

npm install
npm run build
Enter fullscreen mode Exit fullscreen mode

Step 6: Configuring PM2

Create pm2 config File inside project folder

nano ecosystem.config.js
Enter fullscreen mode Exit fullscreen mode

Write below code in ecosystem.config.js file

module.exports = {
  apps: [
    {
      name: 'myapp',
      script: 'npm start',
      port: 3000,
    },
  ],
};
Enter fullscreen mode Exit fullscreen mode

Step 7: Finally

Restart Nginx

sudo service nginx restart
Enter fullscreen mode Exit fullscreen mode

Start NextJS Application using pm2

pm2 start ecosystem.config.js
Enter fullscreen mode Exit fullscreen mode

Save PM2 Process

pm2 save
Enter fullscreen mode Exit fullscreen mode

Check PM2 Status

pm2 status
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Step 8: 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
Enter fullscreen mode Exit fullscreen mode

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 domain-name.com
Enter fullscreen mode Exit fullscreen mode

Step 3: Verify HTTPS Configuration 

sudo nginx -t
Enter fullscreen mode Exit fullscreen mode

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

sudo systemctl reload nginx
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)