React App 在本地运行但在 Heroku 上崩溃并显示错误代码 = H10

Question

我正在尝试在 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

Answer 1

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

npm install --save serve

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

start: "serve -s build"

Answer 2

通过执行以下步骤，我能够在使用 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 的更改并heroku restart在此之前进行良好的度量heroku open

希望能帮助其他人仍然有这个问题。