Host a Full Stack Next.js App with PostgreSQL on VPS Server from Start to Finish🔥

 

Complete VPS Deployment Guide: From Domain Setup to Full Stack Deployment

Are you ready to take your web development skills to the next level by deploying your applications on a Virtual Private Server (VPS)? This comprehensive guide walks you through every step of the process, from setting up your domain to deploying full-stack applications.

Domain Configuration

Before anything else, you need a properly configured domain:

1. Purchase a domain from any registrar of your choice
2. Set up A records in your DNS settings:
   • For main domain: Set @ to point to your VPS IP address with TTL of 60
   • For www subdomain: Set www to point to your VPS IP address with TTL of 60

💡 Pro tip: Setting a low TTL (60) means if you change settings later, they'll update quickly across the internet

You can verify your DNS configuration with:

nslookup yourdomain.com

Try connecting to your VPS using the domain:

ssh username@yourdomain.com

Installing Essential Databases

MongoDB

MongoDB is perfect for NoSQL document-based applications:

1. Install MongoDB Community Edition:

   sudo apt update
   sudo apt install -y mongodb-server
   

2. Start and enable MongoDB:

   sudo systemctl enable mongodb
   sudo systemctl start mongodb
   

3. Connect locally using:

   mongodb://127.0.0.1/db_name
   

PostgreSQL

For relational database needs:

1. Install PostgreSQL:

   sudo apt update
   sudo apt install postgresql postgresql-contrib
   

2. Create a database user with your username:

   sudo -i -u postgres
   CREATE ROLE your_username WITH LOGIN PASSWORD 'your_password';
   ALTER ROLE your_username WITH SUPERUSER;
   CREATE DATABASE your_username;
   

3. Connect using:

   postgresql://username:password@localhost:5432/database_name
   

MySQL

Another popular relational database option:

1. Install MySQL Server:

   sudo apt update
   sudo apt install mysql-server
   

2. Secure your installation:

   sudo mysql_secure_installation
   

3. Create a user and grant privileges:

   sudo mysql
   CREATE USER 'username' IDENTIFIED BY 'password';
   GRANT ALL ON *.* TO username WITH GRANT OPTION;
   FLUSH PRIVILEGES;
   

Project Deployment

Cloning From GitHub

1. For public repositories:

   git clone https://github.com/username/repository-name
   

2. For private repositories, use SSH Deploy Keys:

   • Generate SSH key: ssh-keygen -t ed25519 -C "your_email@example.com"
   • Add the public key to GitHub repository's Deploy Keys
   • Clone using: git clone git@github.com:username/repository

Installing Node.js

Using Fast Node Manager (FNM) for easy version management:

curl -fsSL https://fnm.vercel.app/install | bash
source ~/.bashrc
fnm install --lts

Setting Up Your Project

1. Install dependencies:

   npm install
   # or if using Bun
   bun install
   

2. Configure environment variables:

   cp .example.env .env
   # Edit the .env file with your production values
   

3. Build your project:

   npm run build
   # or
   bun run build
   

Implementing Reverse Proxy with Caddy

Caddy makes HTTPS easy and automatic:

1. Install Caddy:

   sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https
   curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
   curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
   sudo apt update
   sudo apt install caddy
   

2. Enable and start Caddy:

   sudo systemctl enable caddy
   sudo systemctl start caddy
   

Hosting Static Websites

For simple HTML/CSS/JS sites:

1. Create a directory for your website:

   sudo mkdir -p /var/www/html/yourdomain.com
   sudo chmod -R 755 /var/www/html
   

2. Clone or copy your website files:

   git clone https://github.com/username/static-site /var/www/html/yourdomain.com
   

3. Configure Caddy:

   # /etc/caddy/Caddyfile
   yourdomain.com {
     root * /var/www/html/yourdomain.com
     file_server
   }
   
   www.yourdomain.com {
     redir https://yourdomain.com{uri}
   }
   

Deploying Node.js Applications with PM2

PM2 keeps your Node.js apps running:

1. Install PM2:

   npm install -g pm2
   

2. Start your application:

   pm2 start npm --name "your_app_name" -- run start
   

3. Configure Caddy for reverse proxy:

   # /etc/caddy/Caddyfile
   yourdomain.com {
     reverse_proxy localhost:3000
   }
   
   www.yourdomain.com {
     redir https://yourdomain.com{uri}
   }
   

Deploying Single Page Applications (React/Vue/Angular)

For SPAs that need client-side routing:

1. Build your app:

   npm run build
   

2. Configure Caddy:

   # /etc/caddy/Caddyfile
   yourdomain.com {
     root * /var/www/html/your-spa-app/dist
     file_server
     try_files {path} /index.html
   }
   

Deploying Full-Stack Applications (MERN)

For applications with separate frontend and backend:

1. Set up separate subdomains:

   • yourdomain.com for frontend
   • api.yourdomain.com for backend

2. Configure your Caddyfile:

   # Frontend
   yourdomain.com {
     root * /var/www/html/frontend/dist
     file_server
     try_files {path} /index.html
   }
   
   www.yourdomain.com {
     redir https://yourdomain.com{uri}
   }
   
   # Backend API
   api.yourdomain.com {
     reverse_proxy localhost:8080
   }
   
   www.api.yourdomain.com {
     redir https://api.yourdomain.com{uri}
   }
   

Conclusion

Congratulations! You've now learned how to:

• Configure domains properly
• Install and set up popular databases
• Clone and deploy projects from GitHub
• Configure reverse proxy with Caddy
• Deploy static sites, Node.js apps, and full-stack applications

This knowledge empowers you to take control of your own hosting and deployment process. As you get more comfortable, you can explore more advanced topics like load balancing, containerization with Docker, and automated CI/CD pipelines.

---

What are you planning to deploy on your VPS? Let me know in the comments below