Step-by-Step Guide: Deploying a Next.js App on Ubuntu VPS with Nginx, PM2, and HTTPS

Deploying a Next.js application on a Virtual Private Server (VPS) can be challenging, especially when integrating technologies like Nginx, PM2, and HTTPS. This comprehensive guide will walk you through each step of the process, using an Ubuntu 24.04.1 LTS VPS to deploy a Next.js app from a GitHub repository.

By the end of this tutorial, you'll have a fully functional, secure Next.js application running on your own VPS.

Why Deploy on a VPS?

Before we dive into the deployment process, let's discuss why you might choose to deploy on a VPS:

Cost-effective: VPS hosting can be more affordable than managed services for high-traffic sites.
Customization: Full control over your server environment and configurations.
Scalability: Easily upgrade resources as your application grows.
Learning opportunity: Gain valuable experience in server management and deployment processes.

Prerequisites

Before you begin, ensure you have:

A VPS running Ubuntu 24.04.1 LTS
A registered domain name (we'll use example.com in this guide)
A Next.js application hosted on GitHub
Basic familiarity with command-line operations

Step-by-Step Deployment Process

1. Prepare Your VPS

Start by updating your system and installing necessary packages:

sudo apt update && sudo apt upgrade -y
sudo apt install git curl nginx -y

2. Install Node.js and Yarn

Install the latest LTS version of Node.js and Yarn:

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt install -y nodejs
sudo npm install -g yarn

3. Clone Your GitHub Repository

For a public repository:

git clone https://github.com/your-username/your-nextjs-repo.git
cd your-nextjs-repo

For a private repository:

Generate an SSH key:

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

Add the SSH key to your GitHub account:
- Copy the public key: cat ~/.ssh/id_rsa.pub
- Add it to GitHub: Settings > SSH and GPG keys > New SSH key

Clone the private repository:

git clone git@github.com:your-username/your-private-repo.git
cd your-private-repo

4. Install Dependencies and Build the App

yarn install
yarn build

5. Set Up PM2 for Process Management

Install and configure PM2:

sudo npm install -g pm2
pm2 start 'yarn start' --name your-app-name
pm2 save
pm2 startup

6. Configure Nginx as a Reverse Proxy

Create and edit the Nginx configuration file:

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

Add the following configuration:

server {
    listen 80;
    server_name example.com www.example.com;
    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 the configuration:

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

7. Configure Your Domain

At your domain registrar, create an A record pointing to your VPS's public IP address:

Name: @
Type: A
Value: Your VPS IP (e.g., 123.45.67.89)

8. Secure Your Site with HTTPS

Install Certbot and obtain an SSL certificate:

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d example.com -d www.example.com

9. Set Up Automatic SSL Certificate Renewal

Ensure your certificates renew automatically:

sudo certbot renew --dry-run

Troubleshooting Common Issues

To make this guide more useful, let's address some common issues you might encounter:

Application not starting: Check PM2 logs using pm2 logs your-app-name for error messages.
Nginx configuration errors: Use sudo nginx -t to test your configuration and identify syntax errors.
SSL certificate issues: Ensure your domain's DNS is properly configured and that ports 80 and 443 are open on your VPS firewall.
Performance problems: Consider optimizing your Next.js app for production and adjusting Nginx worker processes and PM2 instances.

Best Practices for Maintaining Your Deployed App

Regular updates: Keep your server, Node.js, and dependencies up to date.
Monitoring: Use tools like PM2 Monitoring or external services to track your app's performance.
Backups: Regularly backup your application code and database.
Security: Implement a firewall, keep your system updated, and use strong SSH keys.

Conclusion

By following this comprehensive guide, you've successfully:

Deployed a Next.js application on an Ubuntu VPS
Configured Nginx as a reverse proxy
Used PM2 for process management
Secured your site with HTTPS

Your Next.js app should now be accessible at https://example.com. Remember to regularly update your server and monitor its performance for optimal operation.

We hope this guide has been helpful in your deployment journey. If you have any questions or need further clarification, feel free to leave a comment below!

Happy coding, and enjoy your newly deployed Next.js application!