尽管我修复了 Heroku PORT 分配错误答案

【问题标题】：Heroku PORT assignment error although I fixed it尽管我修复了 Heroku PORT 分配错误
【发布时间】：2017-04-12 00:10:37
【问题描述】：

我正在尝试将我的 react 应用程序部署到 Heroku，但通过 heroku 日志收到此错误消息，

2017-04-11T04:54:31.000000+00:00 app[api]: Build started by user heliotherapyy@gmail.com
2017-04-11T04:55:05.124340+00:00 app[api]: Deploy 8f241f1 by user heliotherapyy@gmail.com
2017-04-11T04:55:05.124340+00:00 app[api]: Release v8 created by user heliotherapyy@gmail.com
2017-04-11T04:54:31.000000+00:00 app[api]: Build succeeded
2017-04-11T04:55:05.490326+00:00 app[api]: Release v8 created by user heliotherapyy@gmail.com
2017-04-11T04:55:05.742229+00:00 heroku[web.1]: State changed from crashed to starting
2017-04-11T04:55:09.582152+00:00 heroku[web.1]: Starting process with command `npm start`
2017-04-11T04:55:11.697099+00:00 app[web.1]: 
2017-04-11T04:55:11.697113+00:00 app[web.1]: > teleos@0.0.3 start /app
2017-04-11T04:55:11.697114+00:00 app[web.1]: > webpack-dev-server --progress --profile --colors
2017-04-11T04:55:11.697115+00:00 app[web.1]: 
2017-04-11T04:55:12.594 70% 1/1 build modules http://127.0.0.1:54499/
2017-04-11T04:55:12.594337+00:00 app[web.1]: webpack result is served from /
2017-04-11T04:55:12.594384+00:00 app[web.1]: content is served from ./public
2017-04-11T04:55:12.594457+00:00 app[web.1]: 404s will fallback to /index.html
2017-04-11T04:55:17. 42% 73/136 build modules
2017-04-11T04:55:17 58% 180/223 build modules
2017-04-11T04:55:17.879336+00:00 app[web.1] 63% 281/315 build modules
2017-04-11T04:55:17.879336+00:0 63% 373/415 build modules
2017-04-11T04:55:17.879 68% 484/496 build modules
2017-04-11T04:55:17.879336+00:00 app[we5304ms build modules      
2017-04-11T04:55:17.886137+00:00 app8ms seal 
2017-04-11T04:55:17.896354+00:0010ms optimize
2017-04-11T04:55:17.908569+00:00 12ms hashing
2017-04-11T04:55:18.762ms create chunk assets
2017-04-11T04:55:18ms additional chunk assets
2017-04-11T04:55:180ms optimize chunk assets 
2017-04-11T04:55:18.8373149ms optimize assets
2017-04-11T04:55:18.896612+00:00 app59ms emit
2017-04-11T04:56:10.046877+00:00 app[web.1]: Error waiting for process to 
terminate: No child processes
2017-04-11T04:56:10.028392+00:00 heroku[web.1]: Error R10 (Boot timeout) -> 
Web process failed to bind to $PORT within 60 seconds of launch
2017-04-11T04:56:10.028452+00:00 heroku[web.1]: Stopping process with SIGKILL
2017-04-11T04:56:10.147218+00:00 heroku[web.1]: Process exited with status 22
2017-04-11T04:56:10.134762+00:00 heroku[web.1]: State changed from starting to 
crashed

所以我查看了 R10 错误消息，很多人说这是因为我没有将我的 PORT 号配置为由 Heroku 分配。但是我的 webpack.config.js 文件清楚地表明 process.env.PORT 是这样的：

"use strict";
    var webpack = require('webpack');
    var path = require('path');
    var loaders = require('./webpack.loaders');
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    var DashboardPlugin = require('webpack-dashboard/plugin');
    var ExtractTextPlugin = require('extract-text-webpack-plugin');

    const HOST = process.env.HOST || "127.0.0.1";
    const PORT = process.env.PORT || "8888";

    loaders.push({
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&localIdentName=[local]___[hash:base64:5]!sass?outputStyle=expanded'),
        exclude: ['node_modules']
    });

    module.exports = {
        entry: [
            'react-hot-loader/patch',
            './src/index.jsx', // your app's entry point
            './styles/index.scss'
        ],
        debug: true,
        devtool: '#eval-source-map',
        output: {
            publicPath: '/',
            path: path.join(__dirname, 'public'),
            filename: 'bundle.js'
        },
        resolve: {
            extensions: ['', '.js', '.jsx']
        },
        module: {
            loaders
        },
        devServer: {
            contentBase: "./public",
            // do not print bundle build stats
            noInfo: true,
            // enable HMR
            hot: true,
            // embed the webpack-dev-server runtime into the bundle
            inline: true,
            // serve index.html in place of 404 responses to allow HTML5 history
            historyApiFallback: true,
            port: PORT,
            host: HOST
        },
        plugins: [
            new webpack.NoErrorsPlugin(),
            new webpack.HotModuleReplacementPlugin(),
            new ExtractTextPlugin("style.css", {
                  allChunks: true
            }),
            new DashboardPlugin(),
            new HtmlWebpackPlugin({
                template: './src/template.html',
                files: {
                    css: ['style.css'],
                    js: [ "bundle.js"],
                }
            }),
        ]
    };

仅供参考，我的整个 github 存储库是 here。请大家帮帮我！

【问题讨论】：

标签： reactjs heroku webpack

【解决方案1】：

我不太确定，但我认为您不应该在 webpack 配置文件中指定端口。 devServer.host 也是如此。根据文档， devServer.port 只是 CLI。当您在控制台中运行 webpack 时，您将其指定为标志。您应该在使用 PORT 变量的条目文件中指定您的端口。 https://webpack.js.org/configuration/dev-server/#devserver-host-cli-only https://webpack.js.org/configuration/dev-server/#devserver-port-cli-only

【讨论】：

【解决方案2】：

已解决：

我正在使用 React 样板，并意识到我一直在使用的 localhost 实际上是由 webpack-dev-server 托管的。所以我添加了一个简单的节点服务器文件，并提供了位于通过捆绑创建的公共目录中的文件。

【讨论】：