React应用程序在本地运行，但在Heroku上崩溃，错误代码为H10

Question

我正试图在heroku上托管我的react应用程序。它在本地运行，没有任何错误，但在heroku上应用程序崩溃。这是我的包.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.1npm版本：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

在package.json 中更改开始使用serve

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(无扩展名(文件。请确保用大写"P"将其命名为Procfile。Heroku会查找确切的文件名，如果找不到，则不会将其包含在构建中。在Procfile中添加：

web: node server.js

同样，请确保键入的内容与此完全相同。如果有任何额外的空间，它将使应用程序崩溃，并再次返回错误H10。这应该就是你所需要的。在heroku open之前，将更改提交给Heroku和heroku restart以进行良好的度量

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