Heroku

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 的构建时间是 50 秒，我想知道这是否是问题所在。是否构建速度太慢，然后在 60 年代 Heroku 限制达到之前没有足够的时间绑定到端口？

老实说，我不太确定从这里去哪里，在破解文件和改变应用程序的结构以提高效率之前（虽然这不是一件坏事）我想知道我是否走在正确的道路上。不愿意更改应用程序中的内容并在不解决最紧迫的初始问题时意外地产生更多问题。

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

感谢您的宝贵时间。

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

Answer 1

您似乎正试图在 development 环境中运行 heroku。您需要确保您的环境设置为 production 并且您获得了 webpack 来编译您的所有资产。

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

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

Heroku - 错误 R10（启动超时）-> Web 进程在使用 Webpack 启动后 60 秒内无法绑定到 $PORT

Heroku - Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch using Webpack

reactjs

webpack

yarnpkg