React 应用程序在 Heroku 上顺利部署，但应用程序没有运行

Question

我在 React 中创建的应用程序在本地运行没有错误，但是当我在 Heroku 上部署应用程序并尝试运行它时，它出现如下错误，我尝试修复错误并在 google 上找到了一些解决方案，例如将 package.json 中的 Start 脚本更改为“node index.js”或“server index.js”，另一个解决方案是确保我的本地 npm 和 node 版本与应用程序相同，我尝试了所有方法但仍然无法在 Heroku 上运行应用程序，请检查 Heroku 的错误日志

 2020-08-20T06:22:22.716838+00:00 heroku[web.1]: State changed from crashed to starting
2020-08-20T06:22:30.000000+00:00 app[api]: Build succeeded
2020-08-20T06:22:32.697272+00:00 heroku[web.1]: Starting process with command `npm start`
2020-08-20T06:22:35.362552+00:00 app[web.1]: 
2020-08-20T06:22:35.362575+00:00 app[web.1]: > covid-19@0.1.0 start /app
2020-08-20T06:22:35.362576+00:00 app[web.1]: > react-scripts start
2020-08-20T06:22:35.362576+00:00 app[web.1]: 
2020-08-20T06:22:37.859674+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: Project is running at http://172.16.212.234/
2020-08-20T06:22:37.860044+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: webpack output is served from 
2020-08-20T06:22:37.860151+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: Content not from webpack is served from /app/public
2020-08-20T06:22:37.860224+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: 404s will fallback to /
2020-08-20T06:22:37.860432+00:00 app[web.1]: Starting the development server...
2020-08-20T06:22:37.860434+00:00 app[web.1]: 
2020-08-20T06:22:37.946386+00:00 heroku[web.1]: Process exited with status 0
2020-08-20T06:22:37.985574+00:00 heroku[web.1]: State changed from starting to crashed
2020-08-20T06:31:36.225969+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=covid-19-picker.herokuapp.com request_id=224c59d7-298b-4fe9-8eef-bce69767b694 fwd="110.142.139.41" dyno= connect= service= status=503 bytes= protocol=https
2020-08-20T06:31:37.621408+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=covid-19-picker.herokuapp.com request_id=7b031e14-2a8c-4243-b69c-61cb46bd4b7e fwd="110.142.139.41" dyno= connect= service= status=503 bytes= protocol=https 

这是我的 package.json

  "name": "covid-19",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "npm": "6.14.5",
    "node": "14.5.0"
  },
  "dependencies": {
    "@material-ui/core": "^4.9.10",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "chart.js": "^2.9.3",
    "classnames": "^2.2.6",
    "react": "^16.13.1",
    "react-chartjs-2": "^2.9.0",
    "react-countup": "^4.3.3",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "dev": "react-scripts start",
    "start": "react-scripts start",
   
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    
    "heroku-postbuild": "npm run build"
  },
  "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"
    ]
  }
}  

Answer 1

当部署环境（此处为 Heroku）无法找到您的 App 模块的正确路径时，可能会出现此错误。

尝试关注代码的最后两行，并确保您在此处选择了正确的路径：

2020-08-20T06:31:36.225969+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=covid-19-picker.herokuapp.com request_id=224c59d7-298b-4fe9-8eef-bce69767b694 fwd="110.142.139.41" dyno= connect= service= status=503 bytes= protocol=https

2020-08-20T06:31:37.621408+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=covid-19-picker.herokuapp.com request_id=7b031e14-2a8c-4243-b69c-61cb46bd4b7e fwd="110.142.139.41" dyno= connect= service= status=503 bytes= protocol=https

Answer 2

我使用了这个解决方案，我的应用现在正在 heroku 上运行。

在部署到 Heroku 之前，您必须构建 React 应用程序。

有一个工具可以自动化这个过程

create-react-app-buildpack

需要的步骤如下

heroku create $APP_NAME --buildpack https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "Start with create-react-app"
git push heroku master
heroku open