Next.js VPS托管：React应用离岸部署指南

在Anubiz Host VPS上部署Next.js应用的标准流程：

apt update && apt install -y nodejs npm git

# 或使用NodeSource安装特定版本
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
apt install -y nodejs

# 克隆项目
cd /var/www
git clone https://github.com/youruser/nextjs-app.git
cd nextjs-app

# 安装依赖并构建
npm install
npm run build

配置.env.production文件：

NODE_ENV=production
NEXTAUTH_URL=https://yourdomain.com
NEXTAUTH_SECRET=your_secret_key_here
DATABASE_URL=postgresql://user:pass@localhost:5432/mydb
NEXT_PUBLIC_API_URL=https://yourdomain.com/api

测试生产构建：

npm start
# 应用默认在3000端口启动

使用PM2管理Next.js生产进程，实现崩溃自动重启和系统启动自动运行：

npm install -g pm2

# 在项目根目录创建ecosystem.config.js
cat > ecosystem.config.js << 'EOF'
module.exports = {
  apps: [{
    name: 'nextjs-app',
    script: 'node_modules/.bin/next',
    args: 'start',
    cwd: '/var/www/nextjs-app',
    env_production: {
      NODE_ENV: 'production',
      PORT: 3000,
    },
    max_memory_restart: '512M',
    instances: 1,
    exec_mode: 'fork',
  }]
}
EOF

pm2 start ecosystem.config.js --env production
pm2 startup
pm2 save

部署新版本时的零停机更新流程：

cd /var/www/nextjs-app
git pull origin main
npm install
npm run build
pm2 reload nextjs-app

为Next.js应用配置Nginx反向代理，支持WebSocket（用于热更新和实时功能）：

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

server {
    listen 80;
    server_name yourdomain.com;

    location /_next/static/ {
        alias /var/www/nextjs-app/.next/static/;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    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_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }
}

ln -s /etc/nginx/sites-available/nextjs-app /etc/nginx/sites-enabled/
certbot --nginx -d yourdomain.com
systemctl reload nginx

在Anubiz Host VPS上优化Next.js应用性能的关键配置。在next.config.js中启用压缩和图像优化：

/** @type {import('next').NextConfig} */
const nextConfig = {
  compress: true,
  poweredByHeader: false,
  images: {
    domains: ['yourdomain.com'],
    formats: ['image/avif', 'image/webp'],
  },
  experimental: {
    optimizeCss: true,
  },
}

module.exports = nextConfig

配置Nginx的Gzip压缩以减少传输体积：

# 在nginx.conf的http块中添加
gzip on;
gzip_vary on;
gzip_types text/plain text/css application/json     application/javascript text/xml application/xml     application/xml+rss text/javascript;

使用pm2 monit命令实时监控Next.js应用的CPU和内存使用，及时发现性能瓶颈。对于高流量场景，考虑在Anubiz Host上升级到更高配置的VPS方案或配置多实例负载均衡。