如何在Heroku上同时部署运行Express服务端与React前端应用

核心错误修正 #

将node server.js从postbuild等构建相关脚本中移除，构建阶段仅负责生成React静态产物，常驻服务启动需放到运行阶段执行。

具体部署配置步骤 #

1. 调整package.json脚本 #

修改根目录package.json的scripts字段如下：

{
  "scripts": {
    "start": "node server.js",
    "build": "react-scripts build",
    "heroku-postbuild": "npm run build"
  }
}

Heroku会自动执行heroku-postbuild脚本完成React打包，部署完成后自动调用start脚本启动Express服务。

2. 完善server.js静态托管逻辑 #

在server.js中添加React构建产物托管配置，确保非API请求返回React入口文件：

const path = require('path');
// 你的所有API接口路由需写在静态托管配置之前

// 托管React打包后的静态资源
app.use(express.static(path.join(__dirname, 'build')));

// 兼容前端路由，所有非API请求统一返回React的index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

// 端口必须优先读取Heroku分配的环境变量，不可写死
const PORT = process.env.PORT || 5000;
app.listen(PORT);

3. 额外注意项 #

• 所有项目依赖必须放在dependencies字段下，Heroku默认不会安装devDependencies中的包
• 可在根目录新增无后缀的Procfile文件，内容为web: npm start，明确告知Heroku启动命令
• .gitignore可正常忽略build文件夹，静态产物会在Heroku构建阶段自动生成，无需提交到仓库

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