首次部署React应用至Heroku遇H10应用崩溃错误求助

你遇到的Heroku H10错误（App crashed）是很常见的部署问题，结合你的配置和代码，我帮你梳理几个关键的排查点和解决步骤：

1. 生产环境启动脚本配置错误 #

你的package.json里的start脚本是react-scripts start，这是开发环境的热重载服务器，并不适合在Heroku的生产环境中运行。Heroku需要一个能持续运行的进程来托管你的静态React应用，正确的做法是先构建生产包，再用静态文件服务器来托管。

解决方法： #

• 安装serve包（专门用于托管静态文件的轻量服务器）：

  npm install serve --save
  

• 修改package.json中的scripts字段：

  "scripts": {
    "start": "serve -s build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  

  这个配置会让Heroku先执行build生成静态文件，再用serve托管build文件夹的内容。

2. 环境变量未配置 #

你的代码中使用了process.env.REACT_APP_API_KEY调用天气API，但如果Heroku上没有配置这个环境变量，可能会导致应用启动或运行时出错（虽然当前日志没直接显示，但这是常见的隐藏问题）。

解决方法： #

• 打开Heroku控制台，进入你的应用→Settings→Config Vars，添加REACT_APP_API_KEY作为键，填入你的实际API密钥作为值；
• 或者用Heroku命令行工具设置：

  heroku config:set REACT_APP_API_KEY=你的实际API密钥
  

3. 查看完整的应用启动日志 #

你目前看到的是路由层面的错误日志，没有包含应用启动时的详细报错信息。建议查看完整的启动日志，排查是否有依赖安装失败、构建错误或启动命令执行异常：

heroku logs --tail

重点关注build阶段和start命令执行后的输出，比如是否出现build文件夹不存在、依赖缺失等提示。

4. 确认Node.js和npm版本兼容性 #

你的package.json指定了Node.js 13.12.0和npm 6.14.4，这个版本相对较旧，可能和Heroku的运行环境存在兼容性问题。建议换成更稳定的LTS版本：

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

额外方案：用Express托管应用（可选） #

如果你不想用serve包，也可以用Express搭建一个简单的服务器来托管React静态文件，同时处理单页应用的路由问题：

1. 安装Express：

   npm install express --save
   

2. 在项目根目录创建server.js：

   const express = require('express');
   const path = require('path');
   const app = express();
   
   // 托管build文件夹的静态文件
   app.use(express.static(path.join(__dirname, 'build')));
   
   // 处理React路由，所有请求返回index.html
   app.get('*', (req, res) => {
     res.sendFile(path.join(__dirname, 'build', 'index.html'));
   });
   
   const port = process.env.PORT || 3000;
   app.listen(port, () => {
     console.log(`Server running on port ${port}`);
   });
   

3. 修改package.json的start脚本：

   "start": "node server.js"
   

完成上述配置后，重新部署应用：

git add .
git commit -m "Fix Heroku deployment config"
git push heroku main

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