Question

为客户使用http://jumbo-react.g-axon.com/框架。该框架基于react并使用webpack进行构建。它可以在我的本地计算机上运行，但是当上传到Heroku时出现此错误：

react-material@2.0.0 start /app
2018-08-24T10:05:46.551774+00:00 app[web.1]: > webpack-dev-server --hot --open
2018-08-24T10:05:46.551775+00:00 app[web.1]: 
2018-08-24T10:05:47.905809+00:00 app[web.1]: Project is running at http://localhost:24282/
2018-08-24T10:05:47.906248+00:00 app[web.1]: webpack output is served from /assets/
2018-08-24T10:05:47.906347+00:00 app[web.1]: Content not from webpack is served from ./public/, ./src/
2018-08-24T10:05:47.906399+00:00 app[web.1]: 404s will fallback to /index.html
2018-08-24T10:05:47.939064+00:00 app[web.1]: Unable to open browser. If you are running in a headless environment, please do not use the open flag.
2018-08-24T10:06:37.917006+00:00 app[web.1]: Hash: 7feed7b626257881787d
2018-08-24T10:06:37.917049+00:00 app[web.1]: Version: webpack 3.12.0
2018-08-24T10:06:37.917052+00:00 app[web.1]: Time: 49556ms
2018-08-24T10:06:37.917058+00:00 app[web.1]: Asset     Size  Chunks                    
2018-08-24T10:06:37.917128+00:00 app[web.1]:

切开中间使其更易于阅读

2018-08-24T10:06:37.917146+00:00 app[web.1]: [../node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.04 kB {30} [built]
2018-08-24T10:06:37.917124+00:00 app[web.1]: [../node_modules/react-hot-loader/patch.js] ./node_modules/react-hot-loader/patch.js 40 bytes {30} [built]
2018-08-24T10:06:37.917147+00:00 app[web.1]: [../node_modules/webpack/hot/only-dev-server.js] (webpack)/hot/only-dev-server.js 2.37 kB {30} [built]
2018-08-24T10:06:37.917143+00:00 app[web.1]: [../node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {30} [built]
2018-08-24T10:06:37.917151+00:00 app[web.1]: + 1784 hidden modules
2018-08-24T10:06:37.917126+00:00 app[web.1]: [../node_modules/webpack-dev-server/client/index.js?http://localhost:24282] (webpack)-dev-server/client?http://localhost:24282 7.93 kB {30} [built]
2018-08-24T10:06:37.917152+00:00 app[web.1]: webpack: Compiled successfully.
2018-08-24T10:06:37.917142+00:00 app[web.1]: [../node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 kB {30} [built]
2018-08-24T10:06:37.917150+00:00 app[web.1]: [./index.js] ./src/index.js 848 bytes {30} [built]
2018-08-24T10:06:44.847917+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2018-08-24T10:06:44.847917+00:00 heroku[web.1]: Stopping process with SIGKILL
2018-08-24T10:06:44.963250+00:00 heroku[web.1]: Process exited with status 137
2018-08-24T10:06:44.977771+00:00 heroku[web.1]: State changed from starting to crashed

最初搜索答案时，最常见的回答是：因为我很难设置端口而不是使用process.env.PORT，但是现在我已经在webpack设置中对其进行了更改：

 return {
        context: this.srcPathAbsolute,
        devtool: 'eval',
        devServer: {
            contentBase: ['./public/', './src/'],
            publicPath: '/assets/',
            historyApiFallback: true,
            hot: true,
            inline: true,
            port: process.env.PORT || 3000

但是Heroku仍然显示此崩溃报告。但是，每次显示时，该应用程序现在都使用不同的端口-这意味着它现在由Heroku设置。

webpack的构建时间为50s，我想知道这是否是问题所在。它的构建速度是否太慢，然后在60年代Heroku限制上升之前又没有足够的时间绑定到端口？

老实说，在窃取文件并更改应用程序的结构以提高效率之前，我真的不确定要从这里走什么（虽然这不是一件坏事），我想知道自己是否走对了。当不解决最紧迫的初始问题时，会讨厌更改应用程序中的内容并意外地产生更多问题。

如果您有任何建议，真的很想听听。

感谢您的时间。

Node: v8.11.3
Yarn: 1.6.0
Webpack: ^3.5.6

Answer 1

您似乎正在尝试在development环境中运行heroku。您将要确保您的环境设置为production，并且要获得Web Pack来编译所有资产。

heroku输出的第一行显示webpack-dev-server --hot --open，这表明您正在尝试在生产中使用Web Packer开发服务器，顾名思义，它可能无法正常工作。

这可能有帮助吗？ https://www.thegreatcodeadventure.com/deploying-react-redux-to-heroku/

Heroku-错误R10（启动超时）->使用Webpack启动后60秒钟内，Web进程未能绑定到$ PORT

1 个答案: