reactjs - 部署到 heroku 路径 ="/"路径 ="/favicon.ico"时出现问题

Question

希望有人能够帮助我解决将我的 React 应用程序推送到 Heroku 时遇到的问题。 heroku 日志反复显示以下错误。

at=error code=H10 desc="App crashed" method=GET path="/" host=jp-portfolio.herokuapp.com request_id=4841ef14-b2f2-4ae7-82d7-d47abf123db7 fwd="67.188.208.208" dyno= connect= service= status=503 bytes= protocol=https 2020-04-02T06:42:02.631967+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=jp-portfolio.herokuapp.com request_id=552909aa-ff34-4a4d-91cc-c817938b39b7 fwd="67.188.208.208" dyno= connect= service= status=503 bytes= protocol=https

对我来说，它似乎不喜欢我在 app.js 文件上定义路由的方式，因此我更改了 app.js 文件并添加了要遵循的路由器文件 React Routing works in local machine but not Heroku但它对我不起作用。

还有这个

React router is not able to handle routes and give back warning of did not match

App.js 文件

import React, { Component } from 'react'

class App extends Component {
static propTypes = {
  children: PropTypes.node
}

render() {
  const { children } = this.props
  return (
    <div>
      {children}
    </div>
  )
}
}

export default App

我的包 JSON

{
  "name": "jp-portfolio",
  "version": "0.1.0",
  "private": false,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "@material-ui/core": "^4.9.7",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/styles": "^4.0.0-rc.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "chart.js": "^2.9.3",
    "contentful": "^7.14.0",
    "history": "^4.10.1",
    "react": "^16.13.1",
    "react-chartjs-2": "^2.9.0",
    "react-d3-speedometer": "^0.10.1",
    "react-dom": "^16.13.1",
    "react-fontawesome": "^1.7.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "typeface-roboto": "0.0.75"
  },
  "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"
    ]
  }

路由器.js

import React from 'react';
import { BrowserRouter as Router, Route} from "react-router-dom";
import Portfolio from "./pages/portfolio";
import About from "./pages/about"
import { useRouterHistory, Router } from 'react-router'
import { createHistory } from 'history'

const history = useRouterHistory(createHistory)({
    basename: '/test'
  })

export default <Router history={history} >
  <Route path="/" component={App}>
    <IndexRoute component={Portfolio}/>
    <Route path="/about" component={About}/>
  </Route>
</Router>

在本地运行。

有没有人遇到过类似的问题并知道我该如何解决这个问题？任何帮助将不胜感激!

Answer 1

https://blog.heroku.com/deploying-react-with-zero-configuration

嘿，你经历过这个吗？我认为如果您使用 Heroku CLI，则需要在部署期间添加 -b 标签以添加自定义构建包。

这也类似于这个问题React app crashes on Heroku after using npm install

编辑:所以我尝试将示例 React 应用程序部署到 Heroku 并提出了类似的问题。问题是，当您使用 Create-react-app 生成 React 应用程序时，它会自动添加构建配置。现在，heroku 构建了应用程序并尝试为构建的应用程序提供服务。因此，它将无法按预期路由应用程序。为了解决这个问题，你必须使用构建包以及告诉heroku如何提供文件的项目，或者你必须将后端和前端分开(前端-react和使用节点的后端express服务器)。

引用 - https://github.com/mars/create-react-app-buildpack#usage https://github.com/mars/heroku-cra-node

编辑2:按照@IvanAracki的建议添加了一些引号

Thanks to the zero-config foundation of create-react-app, the idea of zero-config deployment seemed within reach. Since these new apps all share a common, implicit architecture, the build process can be automated and then served with intelligent defaults. So, we created this community buildpack to experiment with no-configuration deployment to Heroku.

npm install -g create-react-app
create-react-app my-app
cd my-app
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
heroku open

使用构建包自行尝试 docs .