Skip to main content

🌐 How to Host Multiple React Projects on One VPS Using Subdomains (Nginx + PM2)

🌐 How to Host Multiple React Projects on One VPS Using Subdomains (Nginx + PM2)

Already running one app on your VPS and want to host another under a different subdomain like admin-abhinav.rohatech.site? Whether it's a second React or Node.js app, this guide walks you through the full setup using Nginx and PM2.

🔧 Step 1: Add DNS Record in GoDaddy

  1. Log in to your GoDaddy account.
  2. Go to the DNS settings for your domain rohatech.site.
  3. Click Add Record and add the following:
TypeNameValueTTL
Aadmin-abhinavYour VPS IP address1 Hour

This connects admin-abhinav.rohatech.site to your VPS.

📁 Step 2: Upload or Clone Your Second App


ssh root@your-vps-ip
cd /var/www
git clone https://github.com/your-second-app.git admin-app
cd admin-app
npm install
npm run build

Alternatively, upload it from your local machine using SCP:


scp -r /path/to/your-app root@your-vps-ip:/var/www/admin-app

⚙️ Step 3: Run the Second App on a Different Port

Use PM2 and a different port (e.g., 3002):


npm install -g serve
pm2 start serve --name "admin-app" -- -s build -l 3002
pm2 save

🌐 Step 4: Configure Nginx for the New Subdomain


nano /etc/nginx/conf.d/admin-abhinav.rohatech.site.conf

Paste the following configuration:


server {
    listen 80;
    server_name admin-abhinav.rohatech.site;

    location / {
        proxy_pass http://localhost:3002;
        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;
    }
}

Then restart Nginx:


nginx -t
systemctl reload nginx

🔒 Step 5: Add SSL with Certbot


certbot --nginx -d admin-abhinav.rohatech.site

To force HTTPS redirection:


server {
    listen 80;
    server_name admin-abhinav.rohatech.site;
    return 301 https://$host$request_uri;
}

✅ Your Second App is Now Live!

You can now access it via:

https://admin-abhinav.rohatech.site

💡 Bonus Tips

  • List all apps: pm2 list
  • View logs: pm2 logs admin-app
  • Delete app: pm2 delete admin-app
  • Auto-start on boot:

pm2 startup
pm2 save

This setup lets you host multiple clean, secure apps under different subdomains on a single VPS. 🚀

Comments

Post a Comment

Popular posts from this blog

DevOps Best Practices

 # DevOps Best Practices: Your Ultimate Guide to Modern Software Development In today's fast-paced tech world, DevOps isn't just a buzzword – it's a game-changer. Let's dive into the essential practices that can transform your software development process. ![DevOps Lifecycle](https://blogger.googleusercontent.com/img/placeholder.png) ## 🔄 1. Continuous Integration (CI) - The Foundation Think of CI as your code's quality guardian. Every time developers push code, automated tests run to catch issues early. Here's what makes great CI: - Automated builds triggered with every commit - Comprehensive test suites running automatically - Code quality checks integrated into the pipeline - Quick feedback loops to developers **Pro Tip:** Start with simple automated tests and gradually build up your test suite. Remember, it's better to have a few reliable tests than many unreliable ones. ## 🚀 2. Continuous Delivery (CD) - From Code to Customer CD ensures your software ...
Post a Comment
Read more

Introduction to Cloud Computing: Revolutionizing the Digital Landscape

In today's rapidly evolving digital world, cloud computing stands as a cornerstone of modern technology, transforming how businesses operate and individuals interact with data. Let's dive deep into this fascinating technology that powers our digital future. ## What is Cloud Computing? Imagine having a virtual supercomputer at your fingertips, accessible from anywhere in the world. That's the essence of cloud computing – a technology that delivers computing services such as storage, databases, software, and processing power over the internet, eliminating the need for physical hardware investments. ## The Three Pillars of Cloud Service Models ### Infrastructure as a Service (IaaS) Think of IaaS as renting the digital building blocks of computing. Companies like Amazon Web Services (AWS) and Microsoft Azure provide virtual machines, storage, and networking resources on-demand. This model offers unprecedented flexibility, allowing businesses to scale their infrastructure up or ...
Post a Comment
Read more

How to Fix "ERESOLVE Unable to Resolve Dependency Tree" Error While Creating a React App

How to Fix Dependency Errors While Creating a React App If you're trying to set up a React app using npx create-react-app and encounter the following error: npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error Found: react@19.0.0 npm error Could not resolve dependency: npm error peer react@"^18.0.0" from @testing-library/react@13.4.0 Don't worry! This issue occurs due to dependency conflicts between react , react-dom , and other packages like @testing-library/react . Below are two simple ways to fix this issue. Step 1: Try Fixing It With npm Before switching to Yarn, you can resolve the issue by installing the missing or incompatible dependencies manually. Here's how: After running npx create-react-app my-app , if the error appears, navigate to your project folder: cd my-app Install the missing web-vitals dependency: npm install web-vitals Check for other dependency ...
Post a Comment
Read more