react+pm2+next.js项目部署流程

以下是 Next.js 项目生产部署的完整步骤（SSR 模式 + PM2 进程管理）：

部署流程图

本地代码 → 服务器 → 安装依赖 → 构建 → 清理 → PM2 启动 → Nginx（可选）

具体步骤

1. 服务器基础环境准备

# 安装 Node.js（LTS 版本）
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

# 安装 PM2（全局）
sudo npm install -g pm2

2. 上传项目文件到服务器

确保包含以下文件：

├── src/              # 源代码
├── package.json
├── package-lock.json # 或 yarn.lock
├── next.config.js
├── .env.production   # 生产环境变量（如有）
└── public/           # 静态资源（如有）

3. 服务器端操作

# 进入项目目录
cd /path/to/your-project

# 安装所有依赖（严格按 lock 文件）
npm ci                # 或 yarn install --frozen-lockfile

# 构建项目（生成 .next 和 dist 目录）
npm run build

# 移除开发依赖（仅保留生产依赖）
npm prune --production

# 启动 PM2 守护进程
pm2 start ecosystem.config.js

# 设置开机自启
pm2 save
pm2 startup

PM2 配置文件 (ecosystem.config.js)

module.exports = {
  apps: [{
    name: "next-app",
    script: "npm",
    args: "start",
    cwd: "/path/to/your-project",
    instances: "max",          // 使用全部 CPU 核心
    autorestart: true,
    watch: false,              // 禁用监听文件变化
    max_memory_restart: "1G",  // 内存超限自动重启
    env: {
      NODE_ENV: "production",
      PORT: 3000              // 与 next.config.js 端口一致
    }
  }]
};

Nginx 反向代理配置（可选）

server {
  listen 80;
  server_name yourdomain.com;

  location / {
    proxy_pass http://localhost:3000;  # 与 PM2 端口一致
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
    # WebSocket 支持（如需要）
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}

关键验证命令

# 检查服务状态
curl -I http://localhost:3000

# 查看实时日志
pm2 logs next-app --lines 100

# 确认进程运行状态
pm2 list

注意事项

1. 环境变量
   生产环境敏感信息应通过 .env.production 或服务器环境变量设置，不要提交到代码库。

2. 构建与运行分离
   若使用 CI/CD：

   • 构建服务器：执行 npm ci → npm run build
   • 生产服务器：仅传输构建产物（.next, public, package.json）并执行 npm ci --production

3. 资源监控
   添加 PM2 监控：

   pm2 monit       # 实时仪表盘
   pm2 dashboard   # Web 界面（需额外安装）

4. 回滚方案
   保留历史构建版本：

   # 每次部署生成带时间戳的目录
   mv dist dist_$(date +%Y%m%d%H%M%S)

按照此流程部署，可确保 Next.js 项目的 SSR 功能稳定运行。如需静态站点部署（SSG），改用 next export 并托管到 CDN。