Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed on your VPS:
  1. Node.js: Make sure you have Node.js version 18 or higher installed. It is recommended to use Node.js version 21 for stability.
  2. Nginx: Install Nginx to use as a reverse proxy server.
  3. PM2: Install PM2 to manage your Next.js application process and keep it running 24/7.
  4. Next.js: The application is built with Next.js, so you’ll need it installed.

​
Install Required Packages

Run the following commands to install everything: 
# Update system
sudo apt update && sudo apt upgrade -y

# Install Node.js (LTS or latest stable version)
curl -fsSL https://deb.nodesource.com/setup_21.x | sudo -E bash -
sudo apt install -y nodejs

# Install Nginx
sudo apt install -y nginx

# Install PM2
yarn global add pm2 # or use: sudo npm install -g pm2

# Install Next.js globally
npm install -g next

​
Step 1: Download and Set Up the Application

  1. Download the Application:
    • Go to the Donate Me download page.
    • Choose the version you want to download and click the download button. It is recommended to always download the latest version for stability.
  2. Upload the Application:
    • Log in to your VPS using an SCP client like WinSCP or any other provider.
    • Navigate to the folder where you want to place the application, for example, /var/www.
    • Upload the downloaded zip file to this folder and unzip it.
  3. Navigate to the Application Directory:
    • Open your terminal and navigate to the directory where the application is uploaded: 
      cd /yourpath
  4. Install Dependencies and Build the Application:
    • Run the following commands: 
      npm install
npm run build

​
Step 2: Configure Nginx as a Reverse Proxy

​
Without SSL

  1. Edit the Nginx Configuration File:
    • Open the config file using Nano: 
      sudo nano /etc/nginx/sites-available/donateme.conf
    • Add the following configuration: 
      server {
    listen 80;
    server_name your-domain.com; # Replace with your actual domain name

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

    location /_next/static/ {
        alias /yourpath/out/_next/static/;
        expires 1y;
        access_log off;
    }

    location /static/ {
        alias /yourpath/out/static/;
        expires 1y;
        access_log off;
    }
}
  2. Enable the Configuration: 
    sudo ln -s /etc/nginx/sites-available/donateme.conf /etc/nginx/sites-enabled/
  3. Restart Nginx: 
    sudo systemctl restart nginx

​
With SSL

  1. Install Certbot: 
    sudo apt install certbot python3-certbot-nginx
  2. Obtain an SSL Certificate: 
    sudo certbot --nginx -d your-domain.com
  3. Verify and Adjust Nginx Config (if needed): Certbot modifies your config. Ensure it looks like this: 
    server {
    listen 80;
    server_name your-domain.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name your-domain.com;

    ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

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

    location /_next/static/ {
        alias /yourpath/out/_next/static/;
        expires 1y;
        access_log off;
    }

    location /static/ {
        alias /yourpath/out/static/;
        expires 1y;
        access_log off;
    }
}
  4. Restart Nginx: 
    sudo systemctl restart nginx

​
Step 3: Manage the Application with PM2

  1. Start the Application: 
    pm2 start npm --name 'donateme' -- run start
  2. Autostart on Reboot: 
    pm2 save
pm2 startup

​
Step 4: Verify the Installation

  1. Check Application Status: 
    pm2 status
  2. Access the Application:
    • Visit http://your-domain.com or https://your-domain.com depending on your setup.

​
Additional Resources

  • For more information on deploying Next.js apps with Nginx and PM2, check out this guide.
⌘I