React App 在本地运行，但在 Heroku 上因错误代码=H10 而崩溃

Posted 2023-02-22

【中文标题】React App 在本地运行，但在 Heroku 上因错误代码=H10 而崩溃

【英文标题】：React App runs locally but crashes with error code=H10 on Heroku

【发布时间】：2020-07-05 21:14:39

【问题描述】：

我正在尝试在 heroku 上托管我的 react 应用程序。它在本地运行没有任何错误，但在 heroku 上应用程序崩溃。 这是我的 package.json ：

  "name": "steptracker-admin",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@wojtekmaj/react-daterange-picker": "^2.5.0",
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "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"
    ]
  

节点版本：12.16.1 npm 版本：6.13.4

查看heroku日志时出现以下错误：

2020-03-25T10:12:12.437479+00:00 app[web.1]: > steptracker-admin@0.1.0 start /app
2020-03-25T10:12:12.437480+00:00 app[web.1]: > react-scripts start
2020-03-25T10:12:12.437480+00:00 app[web.1]:
2020-03-25T10:12:15.473839+00:00 heroku[web.1]: State changed from starting to up
2020-03-25T10:12:15.444327+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.18.165.2/
2020-03-25T10:12:15.444903+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-03-25T10:12:15.445032+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-03-25T10:12:15.445120+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-03-25T10:12:15.445390+00:00 app[web.1]: Starting the development server...
2020-03-25T10:12:15.445391+00:00 app[web.1]:
2020-03-25T10:12:15.642416+00:00 heroku[web.1]: State changed from up to crashed
2020-03-25T10:12:15.626641+00:00 heroku[web.1]: Process exited with status 0
2020-03-25T10:15:28.913535+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=steptrack-admin.herokuapp.com request_id=9ca7fdff-2d75-48fc-bb91-edd54ca49c1b fwd="223.233.97.23" dyno= connect= service= status=503 bytes= protocol=https
2020-03-25T10:15:29.456687+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=steptrack-admin.herokuapp.com request_id=906e140e-dd4f-4caa-a9bd-c732cc64d4bd fwd="223.233.97.23" dyno= connect= service= status=503 bytes= protocol=https

【参考方案1】：

通过执行以下步骤，我能够在使用 Windows 10 的 react 应用上解决此问题。首先确保在项目中包含 Express。从您的项目根目录：

npm install express --save

然后在项目的根文件夹中创建一个 server.js 文件，并在其中添加以下内容：

const express = require('express');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 5000;

app.use(express.static(path.join(__dirname, 'build')));

app.get('*', function (req, res) 
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
);

app.listen(PORT);

接下来在项目的根文件夹中创建一个 Procfile（无扩展名）文件。确保将其命名为 Procfile，并使用大写字母“P”。 Heroku 会查找确切的文件名，如果找不到，则不会将其包含在构建中。在 Procfile 中添加：

web: node server.js

再一次，确保它的输入完全像这样。如果有任何多余的空格，它将使应用程序崩溃并再次返回错误 H10。这应该就是你所需要的。在 heroku open 之前提交对 Heroku 和 heroku restart 的更改以取得良好效果

希望能帮助其他仍然遇到此问题的人。

【参考方案2】：

新的 CRA 启动脚本有问题。改用服务：

npm install --save serve

在 package.json 中更改 start 以使用 serve

start: "serve -s build"

【讨论】：

这拯救了我的一天！只是一个小更新：--save 现在是默认值，这使它变得多余；）

这解决了我的问题。在 package.json 我设置为serve: "serve -s build"。然后用web: npm run serve 内容创建文件"Procfile"。它将使用新添加的命令为您的应用提供服务

这个方案是正确的，解决了我的问题