Skip to content
brainNotFound

Server Setups/Getting started

VPS Deployment & Management Guide

A consolidated guide to setting up a VPS with CloudPanel, securing it, and hosting your Next.js site.

intermediate
On this page
  1. 1. Initial VPS & CloudPanel Setup
  2. Connect & Update
  3. Install CloudPanel
  4. Troubleshooting: Hostname Resolution
  5. 2. Secure Code Deployment
  6. Set Up Site User
  7. Generate Deployment Key
  8. Clone the Repository
  9. 3. Production Hosting (Next.js)
  10. Build and Launch
  11. Configure Nginx Reverse Proxy
  12. Future Workflow (Updating Code)

Follow these steps to prepare your server and install the CloudPanel control panel.

1. Initial VPS & CloudPanel Setup

Connect & Update

Connect & Update

  1. Step 01

    SSH into your server as root

    bash
    ssh root@your_new_server_ip

  2. Step 02

    Update system packages

    bash
    apt update && apt -y upgrade && apt -y install curl wget sudo

Install CloudPanel

Install CloudPanel

  1. Step 01

    Run the automated installer

    bash
    curl -sS https://installer.cloudpanel.io/ce/v2/install.sh -o install.sh; \
sudo bash install.sh

Troubleshooting: Hostname Resolution

If the installer fails with "Hostname does not resolve":

bash
echo "127.0.1.1 $(hostname -f) $(hostname)" >> /etc/hosts

Then press the Up Arrow and hit Enter to re-run the installer.

2. Secure Code Deployment

Deploying your code securely from GitHub to your production environment.

Set Up Site User

Set Up Site User

  1. Step 01

    Switch to your site user

    bash
    su - your_site_user

Generate Deployment Key

Generate Deployment Key

  1. Step 01

    Create the SSH key

    bash
    ssh-keygen -t ed25519 -C "production-server"

  2. Step 02

    Copy the public key to add to GitHub

    Add this to Settings > Deploy Keys.

    bash
    cat ~/.ssh/id_ed25519.pub

Clone the Repository

Clone the Repository

  1. Step 01

    Navigate to your site directory and clean the folder

    bash
    cd ~/htdocs/brainnotfound.com
rm -rf *

  2. Step 02

    Clone the repository into the current directory

    Note the . at the end.

    bash
    git clone git@github.com:emmanuelonosode/branilizer.git .

3. Production Hosting (Next.js)

Preparing your application for 24/7 uptime.

Build and Launch

Build and Launch

  1. Step 01

    Build the production files

    bash
    npm run build

  2. Step 02

    Install PM2 globally

    bash
    npm install -g pm2

  3. Step 03

    Start the application

    bash
    pm2 start npm --name "brainnotfound" -- start

  4. Step 04

    Save the process list

    Auto-restart on reboot.

    bash
    pm2 save

Configure Nginx Reverse Proxy

To make your Next.js app accessible via the domain, update the Vhost configuration in the CloudPanel dashboard:

Configure Nginx

  1. Step 01

    Go to the Vhost configuration

    Navigate to Sites > brainnotfound.com > Vhost.

  2. Step 02

    Update the `location /` block

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

  3. Step 03

    Click Save

Future Workflow (Updating Code)

Every time you push new changes from your Mac to GitHub, log in to your server and run these commands to update the site:

bash
su - your_site_user
cd ~/htdocs/brainnotfound.com
git pull origin main
npm run build
pm2 restart brainnotfound