Top

Wapto documentation

Frontend VPS Deployment (Next.js)

Welcome to WAPTO!

Get an AI summary of this page

2. Transfer Files to VPS

Upload the following files/folders to your VPS using SCP or FTP:

  • .next/
  • public/
  • package.json
  • package-lock.json
  • .env (production version)

3. Configure Nginx Reverse Proxy

Create an Nginx configuration file for your frontend domain:

  • sudo nano /etc/nginx/sites-available/Wapto-frontend

Paste the following configuration (adjust domain and port):

server {
    server_name your-frontend-domain.com;

    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;
    }
}
  • sudo ln -s /etc/nginx/sites-available/Wapto-frontend /etc/nginx/sites-enabled/
  • sudo nginx -t
  • sudo systemctl restart nginx

4. Run with PM2

On your VPS, install dependencies and start the application using PM2 to ensure it stays active:

  • npm install --production
  • pm2 start npm --name "Wapto-frontend" -- start
  • pm2 save
Important: Ensure your .env file in the VPS points to the Backend API URL (e.g., NEXT_PUBLIC_API_URL=https://api.yourdomain.com).