如何通过PM2预/后置脚本部署分离式React+Express项目？

嘿，我来帮你搞定这个PM2部署的问题！完全可以用PM2的部署脚本来实现你想要的所有流程，不用单独写bash脚本，咱们一步一步来调整：

核心问题拆解 #

你当前的ecosystem.config.js只做了React构建，缺了客户端/服务端的依赖安装，而且Express还没配置好访问外部静态资源——这俩是关键遗漏点。

第一步：修复PM2部署脚本 #

把post-deploy改成链式命令，一次性完成依赖安装、React构建和服务重启。这里是修改后的完整配置：

module.exports = {
  apps: [{
    name: 'API',
    cwd: 'server',
    script: 'server.js',
    instances: 1,
    autorestart: true,
    watch: false,
    max_memory_restart: '1G',
    env_production: {
      NODE_ENV: 'production'
    }
  }],
  deploy: {
    production: {
      user: 'node',
      host: '212.83.163.1', // 替换成你的服务器地址
      ref: 'origin/master',
      repo: 'git@github.com:your-repo.git', // 替换成你的仓库地址
      path: '/var/www/production', // 服务器上的部署目录
      // 链式执行所有部署操作：先处理客户端，再处理服务端，最后重启服务
      'post-deploy': `
        cd client && npm install && npm run build &&
        cd ../server && npm install &&
        pm2 reload ecosystem.config.js --env production
      `
    }
  }
};

脚本说明：

• 用&&连接命令，确保前一步执行成功才会走下一步
• 如果想加快依赖安装速度，生产环境可以用npm install --production（只装生产依赖），但如果React构建需要开发依赖（比如babel、webpack相关），就去掉--production
• 最后用pm2 reload重启服务，确保新的构建产物立即生效

第二步：配置Express访问React构建产物 #

Express完全可以访问父目录的静态资源（Node.js没有默认限制，只要文件系统权限允许），你只需要在server/server.js里添加静态文件托管的代码：

const express = require('express');
const path = require('path');
const app = express();

// 托管React构建好的静态文件
app.use(express.static(path.join(__dirname, '../client/build')));

// 处理SPA路由：所有非API的请求都返回React的index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/build', 'index.html'));
});

// 你的API路由（放在静态托管后面，避免被覆盖）
app.use('/api', require('./your-api-routes'));

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

关键说明：

• path.join(__dirname, '../client/build')会生成正确的绝对路径，不管你的服务端运行在哪里
• SPA路由的处理很重要，否则React的前端路由（比如/about）会返回404

第三步：部署前的准备 #

1. 确保服务器上已经安装了Node.js、PM2和Git
2. 第一次部署前，先在本地执行pm2 deploy production setup，初始化服务器上的部署目录结构
3. 确保服务器的node用户对部署目录（比如/var/www/production）有读写权限，对client/build目录有读取权限

测试部署 #

一切配置好后，在本地执行pm2 deploy production，PM2会自动完成：

1. 拉取最新代码到服务器
2. 安装客户端依赖并构建React
3. 安装服务端依赖
4. 重启Express服务

这样你的Express就会同时托管React静态文件和提供API服务啦！

内容的提问来源于stack exchange，提问作者Indrajeet Latthe