React应用部署至Heroku后报Error code=H10 status=503如何解决

按优先级从高到低排查以下常见问题：

• 首先核对Heroku环境变量配置
  这是和「首开正常、后续崩溃」现象匹配度最高的问题：首次打开时浏览器先拉取到静态资源，等执行到Firebase初始化、调用数据库的逻辑时才会读配置，配置缺失就会直接抛错崩溃。
  Create React App 读取的自定义环境变量必须带REACT_APP_前缀，且Heroku不会读取你本地的.env文件（这类文件本身也应该加入.gitignore不上传到仓库）。你需要进入Heroku控制台对应项目的 Settings -> Config Vars 页面，把本地开发用的所有Firebase配置项（包括REACT_APP_FIREBASE_API_KEY、REACT_APP_FIREBASE_AUTH_DOMAIN、REACT_APP_FIREBASE_PROJECT_ID等）逐一填入，变量名必须和本地代码里的写法完全一致。注意配完环境变量必须重新触发部署，Heroku会在部署阶段把环境变量注入到构建产物里，配完不重新build不会生效。
  如果你用到了Firebase Admin SDK，不要把本地的服务账号密钥文件传到仓库，把密钥内容转成字符串存到Config Vars，代码中从环境变量读取解析，避免Heroku环境读不到本地文件抛错。
• 检查依赖和启动脚本配置
  Heroku生产环境默认不会安装package.json里devDependencies节点下的依赖，确认firebase、react-scripts、静态服务依赖（如果用的话）都在dependencies节点下，不要错放到开发依赖里。
  如果你没有手动配置Create React App专属的Heroku buildpack，需要手动安装静态服务依赖：执行npm install serve --save，然后把package.json里的start脚本改成"start": "serve -s build"，保证Heroku能正确启动构建后的静态资源，同时自动适配Heroku动态分配的端口，避免端口写死导致服务崩溃。
• 核对Firebase侧的授权配置
  进入Firebase控制台对应项目的 Authentication -> Settings -> 授权域名 列表，把你的Heroku应用默认域名（格式为[你的应用名].herokuapp.com）添加进去，否则Firebase的身份验证、数据库请求会因为跨域/未授权被拦截，未捕获的接口错误会直接导致前端崩溃。
  同时检查Firestore/Realtime Database的安全规则，确认规则没有拦截你应用后续发起的读写请求：首次加载通常拉取的是公开无权限校验的资源，后续请求如果命中无权限规则会直接抛错。
• 定位具体错误栈
  打开部署后的Heroku站点，按F12调出浏览器开发者工具，查看Console面板的运行时报错、Network面板的请求异常：
  • 如果提示Firebase初始化失败、缺少API密钥，就是环境变量配置错误
  • 如果提示CORS跨域错误、权限不足，就是Firebase侧授权/安全规则配置错误
  • 如果提示模块/文件找不到，就是依赖配置、文件引用路径错误
    前端运行时错误很多时候不会完整打印到Heroku平台日志里，浏览器控制台的报错信息是定位问题最直接的依据。

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