Steps to Deploy Project on VPS
Deploying a Next.js app to an Ubuntu VPS comes down to eight steps: clone the repository, install dependencies, build, start it on a port, keep it alive with PM2, put NGINX in front as a reverse proxy with gzip and long-lived static caching, add HTTPS with Certbot, then check that NGINX and PM2 are both running.
Clone the Repository
Navigate to the home/ubuntu directory and clone your project repository:
cd /home/ubuntu
git clone https://github.com/sabbirsami/sales-sync-up.gitInstall Dependencies
Move into the project directory and install dependencies using npm:
cd sales-sync-up
npm iBuild the Project
Run the build command to generate the production-ready files:
npm run buildStart the Application
Start the application on port 3005:
npm start -p 3005Set Up PM2 for Process Management
Use PM2 to manage your application process:
pm2 start npm --name sales -- startSave the PM2 process list to ensure it persists after reboots:
pm2 saveSet up PM2 to start on system boot:
pm2 startupConfigure NGINX
1. Install NGINX (if not already installed):
sudo apt install nginx -y2. Create an NGINX Configuration File:
- Create a new file in
/etc/nginx/sites-available/sales:
sudo nano /etc/nginx/sites-available/sales- Add the following configuration (replace
krishijaat.comwith your domain):
server {
server_name sales.baitsbd.com;
gzip on;
gzip_proxied any;
gzip_types application/javascript application/x-javascript text/css text/javascript;
gzip_comp_level 5;
gzip_buffers 16 8k;
gzip_min_length 256;
location /_next/static/ {
alias /home/ubuntu/sales-sync-up/.next/static/;
expires 365d;
access_log off;
}
location / {
proxy_pass http://127.0.0.1:3005;
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;
}
}3. Enable the Configuration: Create a symbolic link to the sites-enabled directory:
sudo ln -s /etc/nginx/sites-available/sales /etc/nginx/sites-enabled/4. Test and Restart NGINX: Test the NGINX configuration:
sudo nginx -tRestart NGINX to apply changes:
sudo systemctl restart nginxSet Up SSL with Certbot
1. Install Certbot:
sudo apt install certbot python3-certbot-nginx -y2. Obtain an SSL Certificate: Run Certbot to enable HTTPS for your domain:
sudo certbot --nginx -d sales.baitsbd.com3. Test Certificate Renewal: Perform a dry run to ensure automatic renewal works:
sudo certbot renew --dry-runVerify Deployment
1. Check NGINX Status: Ensure NGINX is running:
sudo systemctl status nginx2. Restart PM2 Process: Restart your application using PM2:
pm2 restart salesAdditional Notes
- Ensure your domain (
sales.baitsbd.com) points to the server's IP address (62.72.30.40). - Replace
sales.baitsbd.comwith your actual domain in the NGINX configuration. - If you encounter permission issues with Git, ensure your SSH keys are correctly configured.
NGINX Configuration Template
Here's the NGINX configuration template for reference:
server {
server_name yourdomain.com www.yourdomain.com;
gzip on;
gzip_proxied any;
gzip_types application/javascript application/x-javascript text/css text/javascript;
gzip_comp_level 5;
gzip_buffers 16 8k;
gzip_min_length 256;
location /_next/static/ {
alias /home/ubuntu/sales-sync-up/.next/static/;
expires 365d;
access_log off;
}
location / {
proxy_pass http://127.0.0.1:3005;
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;
}
}Troubleshooting
- Permission Denied (Public Key): Ensure your SSH key is added to your GitHub account.
- NGINX Syntax Errors: Use
sudo nginx -tto test the configuration. - PM2 Not Starting: Check logs using
pm2 logs sales.
Common Questions
- How do I deploy a Next.js app to a VPS?
- Clone the repository onto the server, run
npm installandnpm run build, then start the app under PM2. Put NGINX in front as a reverse proxy to the app’s port and add HTTPS with Certbot.pm2 saveandpm2 startupbring the app back after a reboot. - Why use PM2 to run a Node.js app?
- PM2 keeps the process alive: it restarts the app when it crashes, and after
pm2 startupandpm2 saveit starts it again when the server reboots. It also keeps the logs, whichpm2 logs <name>shows when something goes wrong. - What does NGINX do in front of Next.js?
- NGINX is the reverse proxy. It listens on ports 80 and 443, forwards each request to the app on its local port (3005 here), and holds the SSL certificate. One NGINX can serve several apps on the same server, one per domain.
- How do I add free SSL to a site on a VPS?
- Install Certbot with its NGINX plugin (
sudo apt install certbot python3-certbot-nginx -y), then runsudo certbot --nginx -d your-domain.com. Let’s Encrypt certificates renew automatically;sudo certbot renew --dry-runchecks that renewal works.