部署Node.js React应用至Heroku时构建无限期停滞求助

问题根源 #

从构建日志可以明确看到，你的build脚本配置错误：

"build": "concurrently \"npm run start-fe\" \"npm run start-be\""

其中start-fe对应的react-scripts start是启动React开发服务器的命令，该命令会持续运行（用于本地开发热重载），不会自动退出。而Heroku的构建阶段要求任务执行完成后进程必须终止，因此这个命令导致构建过程无限期停滞，最终触发超时。

解决方案 #

1. 修改package.json脚本配置 #

将build脚本改为仅构建React生产静态文件，把后端服务启动逻辑放到start脚本（Heroku部署完成后会自动执行npm start启动应用）：

"scripts": {
  "start": "node ./backend/server.js",
  "build": "react-scripts build",
  "dev": "concurrently \"npm run start-fe\" \"npm run start-be\"", // 保留本地开发用的并发启动命令
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "start-fe": "react-scripts start",
  "start-be": "node ./backend/server.js"
}

2. 配置后端托管前端静态文件 #

React构建完成后会生成build目录，需要让Node.js后端服务能访问并托管这些静态资源。如果使用Express框架，在server.js中添加以下代码：

const path = require('path');
// 托管前端静态文件
app.use(express.static(path.join(__dirname, '../build')));

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

3. 修正生产环境配置 #

• 在Heroku控制台设置生产环境密钥：

  heroku config:set SECRET_KEY=你的生产环境密钥
  

• 确保后端数据库连接使用Heroku提供的DATABASE_URL环境变量，而非硬编码的开发地址。

重新部署 #

修改完成后提交代码并重新部署：

git add .
git commit -m "修复Heroku构建脚本"
git push heroku main

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