如何修复成功部署的 React 应用程序的 Heroku 应用程序错误
[英]How to Fix Heroku Application Error For a Successfully Deployed React App
问题描述
Good day.
再会。 I've managed to successfully deploy my react app to Heroku.我已经成功地将我的反应应用程序部署到 Heroku。 However, when I try to open, I get the following errors in my heroku logs:但是，当我尝试打开时，我的 heroku 日志中出现以下错误：
2020-04-04T11:31:03.263548+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.17.176.146/
2020-04-04T11:31:03.263914+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-04-04T11:31:03.264020+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-04-04T11:31:03.264096+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-04-04T11:31:03.264274+00:00 app[web.1]: Starting the development server...
2020-04-04T11:31:03.264276+00:00 app[web.1]:
2020-04-04T11:31:03.360569+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-04T14:25:45.432183+00:00 heroku[web.1]: State changed from crashed to starting
2020-04-04T14:25:57.190700+00:00 app[web.1]:
2020-04-04T14:25:57.190727+00:00 app[web.1]: > portfolio@0.1.0 start /app
2020-04-04T14:25:57.190728+00:00 app[web.1]: > react-scripts start
2020-04-04T14:25:57.190728+00:00 app[web.1]:
2020-04-04T14:25:59.253101+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.16.211.122/
2020-04-04T14:25:59.253414+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-04-04T14:25:59.253514+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-04-04T14:25:59.253580+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-04-04T14:25:59.253747+00:00 app[web.1]: Starting the development server...
2020-04-04T14:25:59.253749+00:00 app[web.1]:
2020-04-04T14:25:59.349915+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-04T14:28:20.178274+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=kerron-king-portfolio.herokuapp.com request_id=d8f77821-5bd5-4d55-8b95-8fbd37c13c09 fwd="190.213.65.88" dyno= connect= service= status=503 bytes= protocol=https
2020-04-04T14:28:24.241325+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=kerron-king-portfolio.herokuapp.com request_id=c021725e-5389-452d-9601-a7c8018ab331 fwd="190.213.65.88" dyno= connect= service= status=503 bytes= protocol=https
This is a react app, that was built using the create-react-app command.这是一个反应应用程序，它是使用 create-react-app 命令构建的。 I did no webpack editing and my package.json is as follows:我没有进行 webpack 编辑，我的 package.json 如下：
{
"name": "portfolio",
"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",
"prop-types": "^15.7.2",
"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",
"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"
]
},
"devDependencies": {
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.1"
}
}
My public folder is as follows:我的公用文件夹如下：
- index.html
- robots.txt
The contents of those files are: index.html:这些文件的内容是：index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Portfolio</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
robots.txt:机器人.txt：
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
I also have 4 images that I use in the project, that are housed in the following directory:我还有 4 个在项目中使用的图像，它们位于以下目录中：
portfolio/src/imgs投资组合/src/imgs
Any help in solving this would be greatly appreciated.解决此问题的任何帮助将不胜感激。
3 个解决方案
解决方案1
21 2020-04-04 17:01:13
Ok, I've found the issue.好的，我找到了问题所在。 The default buildpack when deploying is that of node.js.部署时的默认 buildpack 是 node.js。 I needed to use the create-react-app buildpack (as seen below).我需要使用 create-react-app buildpack（如下所示）。 It works perfectly now.它现在完美运行。
heroku create $APP_NAME --buildpack mars/create-react-app
git push heroku master
heroku open
解决方案2
5 2020-06-23 16:14:02
If your app is already deployed you can just install the https://github.com/mars/create-react-app-buildpack in heroku settings, if still not working.如果您的应用程序已经部署，您可以在 heroku 设置中安装https://github.com/mars/create-react-app-buildpack ，如果仍然无法正常工作。 Try adding a procfile with web: bin/boot .尝试使用 web 添加web: bin/boot 。 It works for me and hope it works for you.它对我有用，希望它对你有用。
解决方案3
1 2020-04-04 15:11:46
If you used create-react-app you should add a new object called engines.如果你使用了 create-react-app，你应该添加一个名为引擎的新 object。 Inside of the engines object, you specify the versions for npm and node.在引擎 object 内部，您可以指定 npm 和节点的版本。 To do this open up your terminal and type in:为此，请打开您的终端并输入：
npm -v Press enter npm -v 回车
node -v Press enter节点 -v 按回车
{ "name": "portfolio", "version": "0.1.0", "private": true, "engines": { "npm": "5.7.1",// here put your version "node": "9.5.0" // here put your version }, ... the rest of the file }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.