React 应用程序在本地运行，但在 Heroku 上崩溃答案

【问题标题】：React app runs locally but crashes on HerokuReact 应用程序在本地运行，但在 Heroku 上崩溃
【发布时间】：2020-07-17 13:31:29
【问题描述】：

我花了 6 多个小时试图弄清楚为什么这不会在 Heroku 上成功运行。它在本地运行，但是当我部署到 Heroku 时，我得到以下日志，基本上只是说应用程序崩溃了。我安装了 Heroku 的 CLI 并试图在其中找到一个更有帮助的错误，但无济于事。还有其他人有什么想法或建议吗？

代码 => https://github.com/ghughes13/react-todo-list

https://ghughes-react-todo-list.herokuapp.com/

2020-04-05T14:46:31.351885+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: Project is running at http://172.18.176.170/
2020-04-05T14:46:31.355002+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: webpack output is served from 
2020-04-05T14:46:31.355159+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: Content not from webpack is served from /app/public
2020-04-05T14:46:31.355252+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: 404s will fallback to /
2020-04-05T14:46:31.355468+00:00 app[web.1]: Starting the development server...
2020-04-05T14:46:31.355470+00:00 app[web.1]: 
2020-04-05T14:46:31.498661+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-05T14:46:33.839876+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=ghughes-react-todo-list.herokuapp.com request_id=199836cb-d38a-4941-aee7-fc5e5deba5dc fwd="97.99.41.155" dyno= connect= service= status=503 bytes= protocol=https
2020-04-05T14:46:34.454912+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=ghughes-react-todo-list.herokuapp.com request_id=b905fff4-83bf-4319-801a-c2c4f1d7a4e1 fwd="97.99.41.155" dyno= connect= service= status=503 bytes= protocol=https

  "name": "todo-list",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reach/router": "^1.3.3",
    "axios": "^0.19.2",
    "mongodb": "^3.5.2",
    "mongodb-client-encryption": "^1.0.1",
    "mongoose": "^5.8.11",
    "reach": "^1.0.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

【问题讨论】：

devDependencies 在 Heroku 上被剥离。此外，开发服务器（顾名思义）用于 dev，而不是 prod。参见例如stackoverflow.com/q/41932041/3001761 进行最小修复。
我有什么作为开发依赖项？
您如何尝试托管您的 React 应用程序？将 webpack 构建文件夹部署为静态内容或在主机上使用节点服务器运行应用程序？另外，我建议您尝试使用firebase。与 heroku 不同，站点始终保持实时状态，而且部署很简单。
我使用 heroku/nodejs 作为构建包。亲爱的，我肯定会研究火力基地。谢谢。

标签： reactjs heroku

【解决方案1】：

加勒特给了我很好的信息，告诉我如何解决这个问题，但没有解释清楚他是如何解决这个问题的，我把链接发在这里，以防你们不想像我一样再挣扎 1 个小时：

如果你有 react-app 并且有同样的错误，将你的 buildpack 从基本的 heroku/node-js 更改为 create-react-app-buildpack 很可能会修复它：

https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack

在终端/cmd：

   heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git#v6.0.0

然后再次推送你的 react-app

【讨论】：

您首先需要使用 yarn build 构建项目

【解决方案2】：

运行

npm install --save serve

然后在你的 package.json 中改变

"start": "react-scripts start"

到

"start": "serve -s build"

其实在新版本中，出现了一个不知道为什么的问题。这是一种解决方法，以后可能会修复它

【讨论】：

这解决了我的问题。谢谢！

【解决方案3】：

所以看起来使用 heroku/nodejs 进行构建是导致问题的原因。不知道为什么，因为我已经慢慢地添加到这个项目 2-3 个月，它工作正常，直到我添加到达路由器（但是当我删除到达路由器时它仍然没有工作......）。

无论如何将构建包更改为此修复它： https://buildpack-registry.s3.amazonaws.com/buildpacks/mars/create-react-app.tgz

【讨论】：