部署到 heroku 路径 = "/" 路径 = "/favicon.ico" 的问题

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

at=error code=H10 desc="应用程序崩溃"method=GET path="/"host=jp-portfolio.herokuapp.com request_id=44841ef14-b2f22-4ae7-82d7-d47abf123db7 fwd="67.188.208.208"dyno=connect=service=state=503字节=protocol=https2020-04-02T06:42:02.631967+00:0 heroku[路由器]：at=错误代码=H10 desc="应用程序崩溃"方法=GET路径="/favicon.ico"主机=jp-portfolio.herokuapp.com请求id=552909aa-ff34-4a4d-91cc-c817938b39b7 fwd="67.188.208.208"dyno=连接=服务=状态=503字节=协议=https

对我来说，它似乎不喜欢我在app.js文件上定义路由的方式，所以我更改了app.js，并添加了要遵循的路由器文件React Routing在本地机器中工作，但不是Heroku，但它对我不起作用。

和这个

React路由器无法处理路由，并返回与不匹配的警告

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>

在本地运行。

有没有人经历过类似的问题，知道我如何解决这个问题？如有任何帮助，我们将不胜感激！

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

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

此外，它类似于这个问题React应用程序在使用npm安装后在Heroku上崩溃

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

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

编辑2：根据@IvanAracki 的建议添加了一些引号

由于create-react-app的零配置基础，零配置部署的想法似乎触手可及。由于这些新应用程序都共享一个通用的隐式体系结构，因此构建过程可以自动化，然后使用智能默认值。因此，我们创建了这个社区构建包，在没有配置部署到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文档自己尝试一下。

我多次遇到相同的问题，总是返回503服务器错误。

在那段时间里，我总是按照以下步骤启动并运行我的应用程序：

将env端口分配给Heroku应用程序，如process.env.PORT ||1234
检查Procfile和Start脚本
通过将环境变量作为配置变量添加到Heroku来处理环境变量，因为这些是部署的应用程序将使用的环境变量。
确保服务器的依赖关系中没有版本问题

相关内容

最新更新

热门标签：