部署NodeJS应用至Heroku遇端口占用及H10崩溃错误求助

核心问题 #

应用崩溃的根源是生产环境下错误启动了React开发服务器，与Express后端争抢Heroku分配的端口，同时package.json的启动脚本存在语法错误：

1. start:prod和start:dev中使用了无效路径cd client/*，正确路径应为cd client
2. 生产环境无需启动React开发服务器（npm run client），因为heroku-postbuild已生成静态构建文件，Express会直接托管这些文件
3. 用&并行启动服务的方式不可靠，开发环境应使用concurrently管理多进程

修复步骤 #

1. 修改package.json的启动脚本 #

将scripts部分替换为以下内容：

"scripts": {
  "start": "npx if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
  "start:prod": "node server.js",
  "start:dev": "concurrently \"node server.js\" \"npm run client\"",
  "client": "cd client && npm start",
  "install": "cd client && npm install",
  "build": "cd client && npm run build",
  "heroku-postbuild": "npm run build"
}

关键修改说明：

• 生产环境（start:prod）：仅启动Express后端服务器，不再启动React开发服务器，彻底避免端口冲突
• 开发环境（start:dev）：用concurrently同时启动后端和前端开发服务，进程管理更稳定，本地开发时前端默认用3000端口、后端用5000端口，不会冲突
• 移除无效的cd client/*路径，修正为cd client

2. 确认Express静态文件托管配置 #

确保server.js中添加了静态文件托管中间件（放在路由配置之前）：

const path = require('path');
// ...其他初始化代码
// 托管React构建后的静态文件
app.use(express.static(path.join(__dirname, 'client/build')));

// 你的API路由配置...

// 所有非API请求返回React入口文件
app.get("*", function(req, res) {
  res.sendFile(path.join(__dirname, "./client/build/index.html"));
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, function() {
  console.log(`🌎 ==> API server now on port ${PORT}!`);
});

这一步保证Express能正确返回生产环境的静态页面。

3. 重新部署到Heroku #

git add .
git commit -m "fix: resolve port conflict in production"
git push heroku main

4. 验证修复 #

查看实时日志确认应用正常启动：

heroku logs --tail

正常情况下会看到API server now on port xxx!的日志，且不会再出现端口占用错误。

额外说明 #

• Heroku会自动分配PORT环境变量，你server.js中const PORT = process.env.PORT || 5000;的写法是正确的，无需手动定义PORT变量
• 开发环境使用concurrently是因为它能更好地管理多进程，避免端口冲突或进程异常退出问题

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