React应用部署Heroku构建成功但返回503错误、H10崩溃日志问题求助

Heroku返回H10错误代表应用进程启动后异常崩溃，构建成功仅代表编译环节无问题，和你提到的favicon、Tailwind无直接关联，favicon请求报错是根路径访问失败后的附带现象。你可以按以下优先级排查：

• 核对启动脚本配置
  生产环境不能使用react-scripts start作为启动命令，该命令是开发服务，资源占用高且Heroku会判定启动超时。需要先编译静态资源，再用静态服务启动，正确的package.json scripts配置示例如下：

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

  同时确认静态服务工具serve已被添加到生产依赖中，执行npm install serve后再提交代码部署。
• 检查端口监听配置
  若你自定义了Node服务入口，不能写死固定端口号，需要读取Heroku自动分配的环境变量PORT，监听代码示例：

  const port = process.env.PORT || 3000;
  app.listen(port, () => console.log(`服务启动在端口${port}`));
  

• 核对依赖安装范围
  Heroku部署默认仅安装dependencies下的依赖，所有生产运行需要的包不能放在devDependencies中。你可以本地执行npm run build后，再执行生产环境的启动命令测试，本地运行正常再重新部署。
• 检查环境变量配置
  确认所有生产环境需要用到的环境变量，都已经在Heroku应用后台的配置变量页完整填写，缺失环境变量会直接导致应用启动崩溃。
• 查看完整运行日志
  本地安装Heroku CLI后执行heroku logs --app 你的应用名称 --tail，可以查看实时的完整运行日志，日志中会输出具体的JS报错栈，可直接定位崩溃原因。

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