部署到heroku path=“/path=”/favicon.ico的问题

Question

希望有人能帮我解决一个问题，当我把我的反应应用推给heroku时。heroku日志反复显示以下错误。

应用程序崩溃了“request_id=4841ef14-b2f2-4ae7-82d7-d47abf123db7 code=H10 desc=”/“host=jp-folio.herokuapp.com desc= fwd="67.188.208.208”dyno= connect= service= status=503 bytes= 2020-04-02T06:42:02.631967+00:00 herokurouter: at=error code=H10 desc="App崩溃了“at=error code=H10”主机=jp-folio.herokuapp.com en1 20#“67.188.208.208”en22 en24 en26#

在我看来，这似乎不像我在app.js文件上定义路由的方式，所以我更改了app.js文件，并添加了路由器文件以遵循在本地机器上反应路由工作，而不是Heroku，但它对我没有作用。

还有这个

did路由器无法处理路由并返回不匹配的警告。

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"
    ]
  }

Router.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，则需要在部署期间添加-b标记，以添加自定义构建包。

而且，它类似于这个问题，使用npm安装后，在Heroku上响应应用程序崩溃

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

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

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

由于创建-反应-应用的零配置基础，零配置部署的想法似乎是可以实现的。由于这些新应用程序都共享一个通用的隐式体系结构，所以构建过程可以自动化，然后使用智能默认设置。因此，我们创建了这个社区buildpack来尝试在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

使用buildpack 文档自己尝试一下。

Answer 2

我已经多次面对同样的问题，这总是返回503服务器错误。

在这种情况下，我总是按照以下步骤来启动和运行我的应用程序：

1. 将env端口分配给像process.env.PORT ||1234这样的Heroku应用程序
2. 检查Procfile和启动脚本
3. 通过将env变量作为配置变量添加到Heroku，来处理env变量，因为这些都是部署的应用程序将要使用的env变量。
4. 确保服务器的依赖项中没有版本问题。