如何为成功部署的 React 应用程序修复 Heroku 应用程序错误
Posted
技术标签:
【中文标题】如何为成功部署的 React 应用程序修复 Heroku 应用程序错误【英文标题】：How to Fix Heroku Application Error For a Successfully Deployed React App 【发布时间】：2020-07-16 16:28:54 【问题描述】：美好的一天。我已经成功地将我的反应应用程序部署到 Heroku。但是，当我尝试打开时，我的 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
这是一个 react 应用，使用 create-react-app 命令构建。我没有做 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"
我的公用文件夹如下：
- index.html
- robots.txt
这些文件的内容是： 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：
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
我还有 4 张图片在项目中使用，它们位于以下目录中：
作品集/src/imgs
任何帮助解决这个问题将不胜感激。
【问题讨论】：
你有 Heroku 部署的配置文件吗？还是您使用默认设置（只需将其推送到远程 heroku 分支） 我使用默认设置@LuisOsta 如果nour 的解决方案不起作用，可能是因为Heroku 没有真正配置为与CRA 的webpack 开发服务器一起使用。解决方案是制作一个快速服务器，为在 CRA 中运行“npm run build”产生的静态文件提供服务，然后直接部署 Express 服务器而不是 CRA。 【参考方案1】：如果您的应用已经部署，您可以在 heroku 设置中安装 https://github.com/mars/create-react-app-buildpack，如果仍然无法正常工作。尝试使用web: bin/boot 添加一个procfile。它对我有用，希望对你有用。
【讨论】：
在 heroku 设置中添加 github.com/mars/create-react-app-buildpack 对我有用【参考方案2】：好的，我找到了问题所在。部署时默认的 buildpack 是 node.js 的。我需要使用 create-react-app buildpack（如下所示）。现在完美运行。
heroku create $APP_NAME --buildpack mars/create-react-app
git push heroku master
heroku open
【讨论】：
很高兴您找到了解决方案！我不知道有 CRA 的 buildpack，这很酷 您也可以手动创建 Heroku 应用程序（或更改现有应用程序），方法是从 Settings > Buildpacks > Add buildpack with URL "buildpack-registry.s3.amazonaws.com/buildpacks/mars/…" 手动设置“buildpack”。【参考方案3】：如果您使用了 create-react-app，您应该添加一个名为引擎的新对象。在引擎对象内部，您可以指定 npm 和 node 的版本。为此，请打开您的终端并输入：
npm -v 按回车
节点-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
【讨论】：
以上是关于如何为成功部署的 React 应用程序修复 Heroku 应用程序错误的主要内容，如果未能解决你的问题，请参考以下文章
如何为 github 工作流操作归档工件中的文件以修复此警告？
如何为android修复“错误膨胀类GeckoEngineView”