部署Express和React至Heroku遇构建循环问题求助

嘿，我之前也踩过Heroku部署React+Express时无限构建循环的坑，结合你给出的客户端package.json片段，咱们一步步排查解决：

1. 先确认项目结构与根目录脚本配置 #

如果你的项目是Express服务端在根目录，React客户端在client子文件夹（这是最常见的结构），那问题大概率出在根目录的package.json脚本配置上：

• Heroku默认会执行根目录的start脚本，如果你的根目录package.json没正确配置，或者不小心让start触发了客户端的build，就会陷入循环。
• 正确的根目录package.json脚本应该这样写：

  "scripts": {
    "start": "node server.js", // 启动Express服务
    "heroku-postbuild": "cd client && npm install && npm run build" // 仅在Heroku构建阶段执行一次客户端构建
  }
  

  用heroku-postbuild专门处理客户端的依赖安装和构建，避免和start脚本互相触发。

2. 检查客户端的scripts与环境配置 #

你给出的客户端package.json片段里没看到scripts部分，但要注意：

• 客户端的start脚本（通常是react-scripts start）是给开发模式用的，Heroku生产环境不需要跑这个，只要构建出静态文件就行。
• 你配置的"proxy": "http://localhost:5000/"只在开发模式生效，生产环境下需要让Express直接serve客户端的build文件夹，所以在服务端代码里要加：

  const path = require('path');
  if (process.env.NODE_ENV === 'production') {
    // 加载React静态文件
    app.use(express.static(path.join(__dirname, 'client/build')));
    // 所有非API请求都返回React的index.html
    app.get('*', (req, res) => {
      res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
    });
  }
  

3. 更新Node.js版本 #

你客户端package.json里指定的"node": "8.11.1"版本太老旧了，Heroku现在对这种旧版本的支持有限，还可能导致依赖安装失败，进而触发Heroku反复重试构建。建议把根目录和客户端的engines都改成较新的LTS版本，比如：

"engines": {
  "node": "18.x",
  "npm": "9.x"
}

4. 排查是否有重复的构建触发逻辑 #

检查根目录和客户端的package.json里，有没有让build脚本互相调用的情况，比如根目录的build脚本不小心执行了cd client && npm run build，同时客户端的build又触发了根目录的某个脚本，这种情况也会导致循环。

按照上面的步骤调整后，重新部署应该就能跳出构建循环了！

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