Question

我正在尝试将我的react应用托管在heroku上。它在本地运行，没有任何错误，但是在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

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

start: "serve -s build"

Answer 2

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

projects

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

npm install express --save

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

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);

同样，请确保键入完全相同。如果有多余的空间，它将使应用程序崩溃并再次返回错误H10。那应该是您所需要的。在web: node server.js

之前将对Heroku和heroku restart的更改提交给我们

希望可以帮助仍然存在此问题的其他人。

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

2 个答案: