Next.js VPS Hosting: Deploy React App Offshore

Cấu hình next.config.js để tạo standalone build (bundle tất cả dependencies):

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
}

module.exports = nextConfig

Build và test locally trước khi deploy:

npm run build

Sau khi build, thư mục .next/standalone chứa toàn bộ server code. Sao chép lên VPS:

rsync -avz .next/standalone/ user@VPS_IP:/var/www/myapp/
rsync -avz .next/static/ user@VPS_IP:/var/www/myapp/.next/static/
rsync -avz public/ user@VPS_IP:/var/www/myapp/public/

Tạo PM2 ecosystem file trên VPS:

nano /var/www/myapp/ecosystem.config.js

module.exports = {
  apps: [{
    name: 'nextjs-app',
    script: 'server.js',
    cwd: '/var/www/myapp',
    instances: 'max',
    exec_mode: 'cluster',
    env: {
      NODE_ENV: 'production',
      PORT: 3000,
      HOSTNAME: '127.0.0.1',
    },
    env_production: {
      NODE_ENV: 'production',
    },
  }],
}

cd /var/www/myapp
pm2 start ecosystem.config.js --env production
pm2 save
pm2 startup

Cluster mode tận dụng tất cả CPU cores của VPS cho hiệu suất tối đa.

nano /etc/nginx/sites-available/nextjs-app

upstream nextjs {
    server 127.0.0.1:3000;
    keepalive 64;
}

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    # Serve Next.js static files directly
    location /_next/static/ {
        alias /var/www/myapp/.next/static/;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    location /public/ {
        alias /var/www/myapp/public/;
        expires 1d;
    }

    location / {
        proxy_pass http://nextjs;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_cache_bypass $http_upgrade;
    }
}

ln -s /etc/nginx/sites-available/nextjs-app /etc/nginx/sites-enabled/
nginx -t && systemctl reload nginx

Tạo workflow tự động deploy khi push lên main branch:

# .github/workflows/deploy.yml
name: Deploy to VPS

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      - name: Deploy to VPS
        uses: appleboy/ssh-action@v1
        with:
          host: ${{ secrets.VPS_HOST }}
          username: root
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            cd /var/www/myapp
            pm2 reload nextjs-app

Thêm VPS_HOST và SSH_PRIVATE_KEY vào GitHub Secrets. Mỗi lần push lên main sẽ tự động deploy lên VPS offshore AnubizHost.