🌐 Easy Hosting Guide on Vps (MEAN stack)

✅ Step 0: Set Up Domain First

Open your domain provider’s dashboard (e.g., Namecheap, GoDaddy, Cloudflare, Hostinger, Porkbun, etc.)
Go to Domain List → DNS Zone
Now observe: 🔍 If there are old A records named @, api or dashboard 👉 Delete them first.

⚠️ DNS will NOT work if there are multiple A records with the same name.

Now add three new A records as shown below (use your VPS IP):

✅ Step 1: Log in to VPS Using VS Code

Open VS Code
Go to Extensions (Ctrl + Shift + X)
Search Remote - SSH → Install

Press Ctrl + Shift + P → search:

When asked, enter:

Press Enter and you will be connected 🎉

✅ Step 2: Install Necessary Software in VPS

Copy and run:

apt update && apt upgrade -y
apt install -y nginx curl unzip git certbot python3-certbot-nginx

curl -fsSL https://deb.nodesource.com/setup_24.x | bash -
apt install -y nodejs
npm i -g pm2

systemctl enable nginx
systemctl start nginx

👉 This installs all required packages & starts NGINX.

✅ Step 3: Upload Your Projects (Drag & Drop)

In VS Code, open /var/www/ folder.

Drag your project folders here:

Project	Upload To
Frontend (React)	`/var/www/frontend`
Backend (Node.js)	`/var/www/backend`
Dashboard (React)	`/var/www/dashboard`

Then go inside each folder and run:

npm install

✅ Step 4: Run Projects Using PM2

cd /var/www/frontend
pm2 start npm --name frontend -- start

cd /var/www/backend
pm2 start npm --name backend -- start

cd /var/www/dashboard
pm2 start npm --name dashboard -- start

Save and enable autostart:

pm2 save
pm2 startup

✅ Step 5: Configure NGINX

📁 Go to `/etc/nginx/nginx.conf`

http {
   # in this block 
   client_max_body_size 0; # Unlimited or replace 0 to value

   # Also consider adjusting timeouts for large uploads
   client_body_timeout 60s;
   client_header_timeout 60s;
   keepalive_timeout 60s;
   send_timeout 60s;

}

📁 Go to `/etc/nginx/sites-available/`

⚠️ Important

🔥 Delete the file named default. 🛑 Do not delete any other file.

Why? If it stays, your subdomains will not work and you will see the default NGINX page.

🛠 Create 3 files:

root
api
dashboard

Put the following configuration (change subdomain + port):

server {
    listen 80;
    server_name (subdomain.)yourdomain.com;

    location / {
        proxy_pass http://localhost:(port);
        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 them:

sudo ln -s /etc/nginx/sites-available/root /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/api /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/dashboard /etc/nginx/sites-enabled/

🔁 Reload NGINX

nginx -t
systemctl reload nginx

✅ Step 6: Install SSL (HTTPS Free Certificate)

certbot --nginx -d yourdomain.com -d www.yourdomain.com -d api.yourdomain.com -d dashboard.yourdomain.com

Choose Redirect HTTP to HTTPS when asked.

🎉 Done!

URL	Shows
`https://yourdomain.com`, `https://www.yourdomain.com`	Main App
`https://api.yourdomain.com`	Backend API
`https://dashboard.yourdomain.com`	Dashboard

⚙️ Useful Commands

🟢 PM2

pm2 ls
pm2 restart name/all
pm2 stop name
pm2 delete name
pm2 save
pm2 startup
pm2 logs (name)

🌐 NGINX

nginx -t
systemctl reload nginx

🔐 SSL Renew Test

certbot renew --dry-run

🚀 VPS Deployment Guide

MEAN / MERN Stack · NGINX · PM2 · SSL

Complete Step-by-Step Production Deployment

📋 Overview

This guide walks you through deploying a full-stack web application — React/Next.js frontend, Node.js/Express backend, and an admin dashboard — on a fresh Linux VPS, from DNS setup all the way to live HTTPS URLs.

Prerequisites:

A fresh Ubuntu VPS (20.04 / 22.04 / 24.04)
A registered domain name
Your project folders ready locally
VS Code installed on your local machine

✅ Step 0 — Configure DNS Records

Do this before touching the VPS.

1. Open your domain provider's DNS Zone

(Namecheap, GoDaddy, Cloudflare, Hostinger, Porkbun, etc.)

2. Delete old conflicting records

⚠️ If there are existing A records named @, api, or dashboard — delete them first. Duplicate A records with the same name will break DNS resolution entirely.

3. Add these new A records

Name	Type	Value
`@`	A	`YOUR_VPS_IP`
`www`	A	`YOUR_VPS_IP`
`api`	A	`YOUR_VPS_IP`
`dashboard`	A	`YOUR_VPS_IP`

💡 DNS propagation can take a few minutes up to 48 hours. You can continue setting up the VPS while waiting.

✅ Step 1 — Connect to VPS via VS Code (Remote SSH)

Using VS Code's Remote SSH extension is the most comfortable way to manage your VPS — you get a full file explorer and integrated terminal.

Open VS Code → Extensions (Ctrl + Shift + X)
Search Remote - SSH → click Install
Press Ctrl + Shift + P, then type and select:
```
Remote-SSH: Connect to Host...
```
When prompted, enter your connection string:
```
ssh root@YOUR_VPS_IP
```
Press Enter, authenticate with your password or SSH key
You are now inside your VPS 🎉 — open the integrated terminal to run commands

✅ Step 2 — Install Required Software

Run this single block in your VPS terminal to install everything at once:

apt update && apt upgrade -y
apt install -y nginx curl unzip git certbot python3-certbot-nginx

# Install Node.js v24 LTS
curl -fsSL https://deb.nodesource.com/setup_24.x | bash -
apt install -y nodejs

# Install PM2 globally (process manager)
npm i -g pm2

# Start and enable NGINX
systemctl enable nginx
systemctl start nginx

✅ This installs: NGINX (reverse proxy), Node.js, PM2 (process manager), Certbot (free SSL), and Git.

✅ Step 3 — Upload Your Projects

In VS Code's remote file explorer, navigate to /var/www/ and drag your project folders from your local machine directly into it.

Project	Upload To
Frontend (React / Next.js)	`/var/www/frontend`
Backend (Node.js / Express)	`/var/www/backend`
Dashboard (React)	`/var/www/dashboard`

After uploading, install dependencies in each folder:

cd /var/www/frontend  && npm install
cd /var/www/backend   && npm install
cd /var/www/dashboard && npm install

⚠️ Make sure your .env files are present in each folder with production environment variables set correctly.

✅ Step 4 — Run Projects with PM2

PM2 is a production-grade process manager. It keeps your apps alive, auto-restarts on crash, and survives server reboots — always prefer PM2 over tmux for production.

cd /var/www/frontend
pm2 start npm --name frontend -- start

cd /var/www/backend
pm2 start npm --name backend -- start

cd /var/www/dashboard
pm2 start npm --name dashboard -- start

# Save the process list & enable autostart on reboot
pm2 save
pm2 startup

⚠️ After running pm2 startup, it will print a command — copy and run that command to register PM2 as a system service.

✅ Step 5 — Configure NGINX

5a — Global Settings

Open /etc/nginx/nginx.conf and add these lines inside the http { } block:

http {

    # Allow large file uploads (replace 0 with e.g. 100m for a specific limit)
    client_max_body_size 0;

    # Prevent timeouts on slow connections
    client_body_timeout   60s;
    client_header_timeout 60s;
    keepalive_timeout     65s;
    send_timeout          60s;

}

5b — Delete the Default Site

Navigate to /etc/nginx/sites-available/ and delete the default file. If left in place, NGINX will serve its own placeholder page instead of your apps.

rm /etc/nginx/sites-available/default
rm -f /etc/nginx/sites-enabled/default

5c — Create Virtual Host Config Files

Create 3 files in /etc/nginx/sites-available/:

root
api
dashboard

Use this template for each — replace server_name and proxy_pass port:

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;  # change per file

    location / {
        proxy_pass         http://localhost:3000;    # change port per app
        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;
    }
}

Port assignments (typical):

File	`server_name`	`proxy_pass` Port
`root`	`yourdomain.com www.yourdomain.com`	`:3000` (Frontend)
`api`	`api.yourdomain.com`	`:5000` (Backend)
`dashboard`	`dashboard.yourdomain.com`	`:3001` (Dashboard)

5d — Enable the Sites

sudo ln -s /etc/nginx/sites-available/root      /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/api       /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/dashboard /etc/nginx/sites-enabled/

5e — Test & Reload NGINX

nginx -t              # Always test before reloading
systemctl reload nginx

⚠️ If nginx -t reports an error, fix it before reloading — a broken config will take down all your sites.

✅ Step 6 — Install Free SSL (HTTPS via Let's Encrypt)

Certbot automatically obtains and configures SSL certificates, and sets up HTTPS redirects in NGINX.

certbot --nginx \
  -d yourdomain.com \
  -d www.yourdomain.com \
  -d api.yourdomain.com \
  -d dashboard.yourdomain.com

💡 When asked, select Redirect HTTP to HTTPS so all traffic is automatically secured.

✅ Certbot auto-renews every 90 days. Test it with:
certbot renew --dry-run

🎉 Your Live URLs

URL	Serves
`https://yourdomain.com`	Frontend / Main App
`https://www.yourdomain.com`	Frontend / Main App
`https://api.yourdomain.com`	Backend API
`https://dashboard.yourdomain.com`	Admin Dashboard

⚙️ Quick Reference Commands

🟢 PM2 — Process Manager

Command	Description
`pm2 ls`	List all running processes
`pm2 restart frontend`	Restart a specific app
`pm2 restart all`	Restart all apps
`pm2 stop backend`	Stop a specific app
`pm2 delete dashboard`	Remove an app from PM2
`pm2 logs frontend`	View live logs for an app
`pm2 logs`	View logs for all apps
`pm2 save`	Save current process list
`pm2 startup`	Enable autostart on reboot

🌐 NGINX

Command	Description
`nginx -t`	Test config for syntax errors
`systemctl reload nginx`	Reload NGINX (zero downtime)
`systemctl restart nginx`	Full restart of NGINX
`systemctl status nginx`	Check NGINX running status

🔐 SSL / Certbot

Command	Description
`certbot renew --dry-run`	Test auto-renewal (no changes)
`certbot renew`	Force certificate renewal
`certbot certificates`	List all installed certificates

🛠️ Troubleshooting

Symptom	Likely Cause & Fix
502 Bad Gateway	Your Node.js app is not running. Check `pm2 ls` and restart the app.
NGINX default page shows	You did not delete the `default` config. Remove it and reload NGINX.
SSL certificate fails	DNS has not propagated yet. Wait and retry with `certbot --nginx -d ...`
App not starting	Run `pm2 logs <name>` to see the exact error.
Port conflict	Each app must listen on a unique port. Check `.env` and NGINX `proxy_pass`.
Changes not reflected	Restart the app with `pm2 restart <name>` and reload NGINX.

💡 Rule of thumb: nginx -t and pm2 logs are your first stops for any issue.

— End of Guide —

nrbnayon/VPS-Deployment-Guide.md

🌐 Easy Hosting Guide on Vps (MEAN stack)

✅ Step 0: Set Up Domain First

✅ Step 1: Log in to VPS Using VS Code

✅ Step 2: Install Necessary Software in VPS

✅ Step 3: Upload Your Projects (Drag & Drop)

✅ Step 4: Run Projects Using PM2

✅ Step 5: Configure NGINX

📁 Go to /etc/nginx/nginx.conf

📁 Go to /etc/nginx/sites-available/

⚠️ Important

🛠 Create 3 files:

🔁 Reload NGINX

✅ Step 6: Install SSL (HTTPS Free Certificate)

🎉 Done!

⚙️ Useful Commands

🟢 PM2

🌐 NGINX

🔐 SSL Renew Test

🚀 VPS Deployment Guide

MEAN / MERN Stack · NGINX · PM2 · SSL

📋 Overview

✅ Step 0 — Configure DNS Records

1. Open your domain provider's DNS Zone

2. Delete old conflicting records

3. Add these new A records

✅ Step 1 — Connect to VPS via VS Code (Remote SSH)

✅ Step 2 — Install Required Software

✅ Step 3 — Upload Your Projects

✅ Step 4 — Run Projects with PM2

✅ Step 5 — Configure NGINX

5a — Global Settings

5b — Delete the Default Site

5c — Create Virtual Host Config Files

5d — Enable the Sites

5e — Test & Reload NGINX

✅ Step 6 — Install Free SSL (HTTPS via Let's Encrypt)

🎉 Your Live URLs

⚙️ Quick Reference Commands

🟢 PM2 — Process Manager

🌐 NGINX

🔐 SSL / Certbot

🛠️ Troubleshooting

📁 Go to `/etc/nginx/nginx.conf`

📁 Go to `/etc/nginx/sites-available/`