React 应用程序在本地工作但部署到 heroku 时出现应用程序错误

React app working locally but application error when deployed to heroku

我已经使用 Heroku 很长时间了,它运行良好。现在没有任何环境变化,heroku 不再为我工作了。我的应用程序在本地运行良好,但是当我将它部署在 heroku 上时,它会出现应用程序错误。然后我创建了一个新应用程序,没有做任何更改,我在 heroku 上部署了这个新应用程序。它给出了完全相同的错误,这意味着问题不在我的应用程序中,而是在 heroku 中或我部署应用程序的方式。

我使用 create react app 并在下面添加 package.json 文件和日志文件。请帮我。我试图从过去两天弄清楚:(

在此先感谢您的帮助!

package.json

{
  "name": "react-pustepause",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^4.0.4",
    "axios": "^0.19.2",
    "react-responsive": "^8.0.3",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

heroku 日志

2020-04-04T20:49:10.777143+00:00 app[web.1]: Starting the development server...
2020-04-04T20:49:10.777144+00:00 app[web.1]:
2020-04-04T20:49:10.847784+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-04T20:49:11.613758+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-pustepause.herokuapp.com request_id=7f19caf3-ade4-4360-a31a-32b8d90cc110 fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-04T20:49:12.382387+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-pustepause.herokuapp.com request_id=6a97a9e4-7aa1-479e-82d1-e268800693af fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-04T20:49:15.020120+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-pustepause.herokuapp.com request_id=c1b63c14-c058-4020-8e50-7e4db85a0616 fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-04T20:49:15.349808+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-pustepause.herokuapp.com request_id=70152859-a3b8-48fb-af05-a6c7c77293b4 fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-04T20:49:16.521253+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-pustepause.herokuapp.com request_id=fb1c9753-5225-476a-a168-42ec7e9f34cf fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-04T20:49:16.835390+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-pustepause.herokuapp.com request_id=abc45209-4f20-4171-ac93-71734680e95f fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-04T20:49:17.120246+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-pustepause.herokuapp.com request_id=4f4b7fd9-642a-4424-905e-d79af7a7fb38 fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-04T20:49:17.460808+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-pustepause.herokuapp.com request_id=3a66e08a-3530-418c-a019-385506016dfc fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-04T20:49:17.737342+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-pustepause.herokuapp.com request_id=70d194a1-42a2-4842-ae86-1c72418629f3 fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-04T20:49:18.045515+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-pustepause.herokuapp.com request_id=07689863-02d0-4b7f-b58a-3f04b8bb60f5 fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-04T20:49:18.472033+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-pustepause.herokuapp.com request_id=a9ae0dfc-deb4-48e5-a4ea-ccbb25e89467 fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-04T20:49:18.785185+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-pustepause.herokuapp.com request_id=c826cda1-cf1f-4d54-b434-215db33b4127 fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-04T21:10:13.785015+00:00 heroku[web.1]: State changed from crashed to starting
2020-04-04T21:10:25.359246+00:00 app[web.1]:
2020-04-04T21:10:25.359259+00:00 app[web.1]: > react-pustepause@0.1.0 start /app
2020-04-04T21:10:25.359260+00:00 app[web.1]: > react-scripts start
2020-04-04T21:10:25.359260+00:00 app[web.1]:
2020-04-04T21:10:27.456512+00:00 app[web.1]: ℹ 「wds」: Project is running at http://172.18.161.114/
2020-04-04T21:10:27.456873+00:00 app[web.1]: ℹ 「wds」: webpack output is served from
2020-04-04T21:10:27.456958+00:00 app[web.1]: ℹ 「wds」: Content not from webpack is served from /app/public
2020-04-04T21:10:27.457014+00:00 app[web.1]: ℹ 「wds」: 404s will fallback to /
2020-04-04T21:10:27.457209+00:00 app[web.1]: Starting the development server...
2020-04-04T21:10:27.457211+00:00 app[web.1]:
2020-04-04T21:10:27.588035+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-04T21:55:26.797837+00:00 heroku[web.1]: State changed from crashed to starting
2020-04-04T21:55:40.204461+00:00 app[web.1]:
2020-04-04T21:55:40.204479+00:00 app[web.1]: > react-pustepause@0.1.0 start /app
2020-04-04T21:55:40.204479+00:00 app[web.1]: > react-scripts start
2020-04-04T21:55:40.204480+00:00 app[web.1]:
2020-04-04T21:55:42.853119+00:00 app[web.1]: ℹ 「wds」: Project is running at http://172.18.206.246/
2020-04-04T21:55:42.853546+00:00 app[web.1]: ℹ 「wds」: webpack output is served from
2020-04-04T21:55:42.853636+00:00 app[web.1]: ℹ 「wds」: Content not from webpack is served from /app/public
2020-04-04T21:55:42.853716+00:00 app[web.1]: ℹ 「wds」: 404s will fallback to /
2020-04-04T21:55:42.853902+00:00 app[web.1]: Starting the development server...
2020-04-04T21:55:42.853903+00:00 app[web.1]:
2020-04-04T21:55:42.976144+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-04T23:16:55.576000+00:00 heroku[web.1]: State changed from crashed to starting
2020-04-04T23:17:12.455408+00:00 app[web.1]:
2020-04-04T23:17:12.455433+00:00 app[web.1]: > react-pustepause@0.1.0 start /app
2020-04-04T23:17:12.455434+00:00 app[web.1]: > react-scripts start
2020-04-04T23:17:12.455434+00:00 app[web.1]:
2020-04-04T23:17:15.775689+00:00 app[web.1]: ℹ 「wds」: Project is running at http://172.16.24.26/
2020-04-04T23:17:15.776953+00:00 app[web.1]: ℹ 「wds」: webpack output is served from
2020-04-04T23:17:15.777103+00:00 app[web.1]: ℹ 「wds」: Content not from webpack is served from /app/public
2020-04-04T23:17:15.778644+00:00 app[web.1]: ℹ 「wds」: 404s will fallback to /
2020-04-04T23:17:15.778983+00:00 app[web.1]: Starting the development server...
2020-04-04T23:17:15.778983+00:00 app[web.1]:
2020-04-04T23:17:15.929319+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-05T02:06:59.424136+00:00 heroku[web.1]: State changed from crashed to starting
2020-04-05T02:07:14.025754+00:00 app[web.1]:
2020-04-05T02:07:14.025777+00:00 app[web.1]: > react-pustepause@0.1.0 start /app
2020-04-05T02:07:14.025778+00:00 app[web.1]: > react-scripts start
2020-04-05T02:07:14.025778+00:00 app[web.1]:
2020-04-05T02:07:16.714076+00:00 app[web.1]: ℹ 「wds」: Project is running at http://172.17.224.6/
2020-04-05T02:07:16.714521+00:00 app[web.1]: ℹ 「wds」: webpack output is served from
2020-04-05T02:07:16.714621+00:00 app[web.1]: ℹ 「wds」: Content not from webpack is served from /app/public
2020-04-05T02:07:16.714721+00:00 app[web.1]: ℹ 「wds」: 404s will fallback to /
2020-04-05T02:07:16.714918+00:00 app[web.1]: Starting the development server...
2020-04-05T02:07:16.714920+00:00 app[web.1]:
2020-04-05T02:07:16.825861+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-05T07:48:27.405222+00:00 heroku[web.1]: State changed from crashed to starting
2020-04-05T07:48:39.670311+00:00 app[web.1]:
2020-04-05T07:48:39.670333+00:00 app[web.1]: > react-pustepause@0.1.0 start /app
2020-04-05T07:48:39.670334+00:00 app[web.1]: > react-scripts start
2020-04-05T07:48:39.670334+00:00 app[web.1]:
2020-04-05T07:48:41.805354+00:00 app[web.1]: ℹ 「wds」: Project is running at http://172.16.55.206/
2020-04-05T07:48:41.805768+00:00 app[web.1]: ℹ 「wds」: webpack output is served from
2020-04-05T07:48:41.805879+00:00 app[web.1]: ℹ 「wds」: Content not from webpack is served from /app/public
2020-04-05T07:48:41.805963+00:00 app[web.1]: ℹ 「wds」: 404s will fallback to /
2020-04-05T07:48:41.806163+00:00 app[web.1]: Starting the development server...
2020-04-05T07:48:41.806164+00:00 app[web.1]:
2020-04-05T07:48:41.888875+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-05T13:32:28.861883+00:00 heroku[web.1]: State changed from crashed to starting
2020-04-05T13:32:42.139952+00:00 app[web.1]:
2020-04-05T13:32:42.139968+00:00 app[web.1]: > react-pustepause@0.1.0 start /app
2020-04-05T13:32:42.139968+00:00 app[web.1]: > react-scripts start
2020-04-05T13:32:42.139968+00:00 app[web.1]:
2020-04-05T13:32:44.072413+00:00 app[web.1]: ℹ 「wds」: Project is running at http://172.16.108.126/
2020-04-05T13:32:44.072765+00:00 app[web.1]: ℹ 「wds」: webpack output is served from
2020-04-05T13:32:44.072839+00:00 app[web.1]: ℹ 「wds」: Content not from webpack is served from /app/public
2020-04-05T13:32:44.072900+00:00 app[web.1]: ℹ 「wds」: 404s will fallback to /
2020-04-05T13:32:44.073069+00:00 app[web.1]: Starting the development server...
2020-04-05T13:32:44.073070+00:00 app[web.1]:
2020-04-05T13:32:44.147851+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-05T18:30:30.954173+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-pustepause.herokuapp.com request_id=9bbecd3c-355f-44cf-b416-fcc895e00977 fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-05T18:30:32.056816+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-pustepause.herokuapp.com request_id=206fb2f9-125d-4b3b-b2b4-82350d98207f fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-05T18:38:16.519444+00:00 app[api]: Starting process with command `rake db:migrate` by user khzainulabidin@gmail.com
2020-04-05T18:38:31.243571+00:00 heroku[run.8227]: State changed from starting to up
2020-04-05T18:38:36.579921+00:00 heroku[run.8227]: State changed from up to complete
2020-04-05T18:38:43.791939+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-pustepause.herokuapp.com request_id=4576ce30-2005-4545-b84a-8847ba4e5133 fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-05T18:38:44.110647+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-pustepause.herokuapp.com request_id=95628db1-c532-48e6-b9d5-6b587536c8f7 fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-05T18:38:45.089377+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-pustepause.herokuapp.com request_id=5da35fd7-1d62-4acc-aed9-4ab8d53f2084 fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-05T18:38:45.550772+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-pustepause.herokuapp.com request_id=7f632320-be75-4034-8702-b537e23bc38a fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-05T18:38:45.974139+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-pustepause.herokuapp.com request_id=bcf72176-4100-4a8a-80f6-4e94c6ec5b00 fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-05T18:38:46.324445+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-pustepause.herokuapp.com request_id=07824287-ee32-4870-b3db-af0e44082a2b fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-05T18:38:46.877015+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-pustepause.herokuapp.com request_id=41432fd5-89a2-4ab8-94de-4a90ecc48ecc fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https
2020-04-05T18:38:47.217088+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-pustepause.herokuapp.com request_id=a6a4826e-a3dd-4810-900e-0f1ba718f9af fwd="68.192.253.24" dyno= connect= service= status=503 bytes= protocol=https

所以我终于找到了解决办法。这是因为 Heroku 使用的 buildpack。 Heroku 过去使用 'Create React App' 构建包,但现在它默认使用 'nodejs' 构建包,即使对于静态 React 应用程序也是如此。所以这是解决这个问题的方法:

如果您已经在 heroku 上部署了您的应用程序并且想要修复

如果您还没有部署您的应用程序,或者如果您想通过命令行执行此操作

使用以下命令解决问题:

heroku create $APP_NAME --buildpack mars/create-react-app
git push heroku master

将 $APP_NAME 更改为您的实际应用名称。

希望对您有所帮助!