将Webpack应用部署到Heroku时，"Web进程在启动后60秒内无法绑定到$PORT"

Question

我正在尝试将我的Webpack应用程序部署到Heroku。我在Procfile中使用“npm run dev”作为命令。我准备好了

DEFAULT_PORT = process.env.port || 8080 

在网页包开发服务器中。js Heroku运行我的应用程序，但它崩溃了，说：

Web process failed to bind to $PORT within 60 seconds of launch

你可以在下面看到我的日志和. json文件。我很困惑。

2017-12-12T22:53:21.995212+00:00 app[web.1]:     + 41 hidden modules
2017-12-12T22:53:21.995212+00:00 app[web.1]: Child html-webpack-plugin for "index.html":
2017-12-12T22:53:21.995216+00:00 app[web.1]:        [2] (webpack)/buildin/global.js 509 bytes {0} [built]
2017-12-12T22:53:21.995213+00:00 app[web.1]:      1 asset
2017-12-12T22:53:21.995214+00:00 app[web.1]:        [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 1.4 kB {0} [built]
2017-12-12T22:53:21.995215+00:00 app[web.1]:        [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
2017-12-12T22:53:21.995219+00:00 app[web.1]:        [0] ./node_modules/css-loader!./src/css/style.css 830 bytes {0} [built]
2017-12-12T22:53:21.995216+00:00 app[web.1]:        [3] (webpack)/buildin/module.js 517 bytes {0} [built]
2017-12-12T22:53:21.995219+00:00 app[web.1]:        [1] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built]
2017-12-12T22:53:21.995224+00:00 app[web.1]: webpack: Compiled successfully.
2017-12-12T22:53:21.995218+00:00 app[web.1]: Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!src/css/style.css:
2017-12-12T22:54:13.856117+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2017-12-12T22:54:13.856117+00:00 heroku[web.1]: Stopping process with SIGKILL
2017-12-12T22:54:13.973488+00:00 heroku[web.1]: Process exited with status 137
2017-12-12T22:54:13.988182+00:00 heroku[web.1]: State changed from starting to crashed
2017-12-12T22:54:13.990564+00:00 heroku[web.1]: State changed from crashed to starting
2017-12-12T22:54:18.192737+00:00 heroku[web.1]: Starting process with command `npm run dev`
2017-12-12T22:54:27.691608+00:00 app[web.1]: Project is running at http://localhost:59703/
2017-12-12T22:54:27.691900+00:00 app[web.1]: webpack output is served from /
2017-12-12T22:54:30.791009+00:00 app[web.1]: Hash: 40cb4c337991c9ef0121
2017-12-12T22:54:30.791029+00:00 app[web.1]: Version: webpack 3.10.0
2017-12-12T22:54:30.791031+00:00 app[web.1]: Time: 3102ms
2017-12-12T22:54:30.791032+00:00 app[web.1]:            Asset       Size  Chunks                    Chunk Names
2017-12-12T22:54:30.791033+00:00 app[web.1]:    app.bundle.js    1.05 MB       0  [emitted]  [big]  main
2017-12-12T22:54:30.791034+00:00 app[web.1]: style.bundle.css  617 bytes       0  [emitted]         main
2017-12-12T22:54:30.791035+00:00 app[web.1]:       index.html    1.14 kB          [emitted]         
2017-12-12T22:54:30.791035+00:00 app[web.1]:    [2] ./node_modules/react/index.js 190 bytes {0} [built]
2017-12-12T22:54:30.791036+00:00 app[web.1]:   [10] ./node_modules/react-dom/index.js 1.36 kB {0} [built]
2017-12-12T22:54:30.791037+00:00 app[web.1]:   [17] multi (webpack)-dev-server/client?http://localhost:59703 ./src/js/app.jsx 40 bytes {0} [built]
2017-12-12T22:54:30.791038+00:00 app[web.1]:   [18] (webpack)-dev-server/client?http://localhost:59703 7.95 kB {0} [built]
2017-12-12T22:54:30.791038+00:00 app[web.1]:   [19] ./node_modules/url/url.js 23.3 kB {0} [built]
2017-12-12T22:54:30.791039+00:00 app[web.1]:   [26] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
2017-12-12T22:54:30.791039+00:00 app[web.1]:   [28] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
2017-12-12T22:54:30.791040+00:00 app[web.1]:   [29] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
2017-12-12T22:54:30.791041+00:00 app[web.1]:   [31] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
2017-12-12T22:54:30.791042+00:00 app[web.1]:   [36] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
2017-12-12T22:54:30.791043+00:00 app[web.1]:   [37] (webpack)/hot/log.js 1.04 kB {0} [optional] [built]
2017-12-12T22:54:30.791043+00:00 app[web.1]:   [38] (webpack)/hot/emitter.js 77 bytes {0} [built]
2017-12-12T22:54:30.791044+00:00 app[web.1]:   [40] ./src/js/app.jsx 451 bytes {0} [built]
2017-12-12T22:54:30.791045+00:00 app[web.1]:   [52] ./src/components/App.jsx 3.48 kB {0} [built]
2017-12-12T22:54:30.791046+00:00 app[web.1]:   [54] ./src/css/style.css 41 bytes {0} [built]
2017-12-12T22:54:30.791047+00:00 app[web.1]:     + 41 hidden modules
2017-12-12T22:54:30.791047+00:00 app[web.1]: Child html-webpack-plugin for "index.html":
2017-12-12T22:54:30.791048+00:00 app[web.1]:      1 asset
2017-12-12T22:54:30.791049+00:00 app[web.1]:        [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 1.4 kB {0} [built]
2017-12-12T22:54:30.791050+00:00 app[web.1]:        [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
2017-12-12T22:54:30.791050+00:00 app[web.1]:        [2] (webpack)/buildin/global.js 509 bytes {0} [built]
2017-12-12T22:54:30.791051+00:00 app[web.1]:        [3] (webpack)/buildin/module.js 517 bytes {0} [built]
2017-12-12T22:54:30.791052+00:00 app[web.1]: Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!src/css/style.css:
2017-12-12T22:54:30.791053+00:00 app[web.1]:        [0] ./node_modules/css-loader!./src/css/style.css 830 bytes {0} [built]
2017-12-12T22:54:30.791054+00:00 app[web.1]:        [1] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built]
2017-12-12T22:54:30.791084+00:00 app[web.1]: webpack: Compiled successfully.
2017-12-12T22:54:26.379844+00:00 app[web.1]: 
2017-12-12T22:54:26.379885+00:00 app[web.1]: > rapperapplication@1.0.0 dev /app
2017-12-12T22:54:26.379886+00:00 app[web.1]: > webpack-dev-server
2017-12-12T22:54:26.379887+00:00 app[web.1]: 
2017-12-12T22:54:49.900296+00:00 heroku[router]: at=error code=H20 desc="App boot timeout" method=GET path="/" host=rapperapplication.herokuapp.com request_id=3ab024a0-4ec0-4e90-9508-a701cf0c596e fwd="73.236.18.255" dyno= connect= service= status=503 bytes= protocol=https
2017-12-12T22:55:18.669392+00:00 heroku[web.1]: Process exited with status 137
2017-12-12T22:55:18.680949+00:00 heroku[web.1]: State changed from starting to crashed
2017-12-12T22:55:18.551666+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2017-12-12T22:55:18.551666+00:00 heroku[web.1]: Stopping process with SIGKILL
2017-12-12T22:55:21.000471+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=rapperapplication.herokuapp.com request_id=bfda82f0-f194-47a1-ac40-11daddf4b9a8 fwd="73.236.18.255" dyno= connect= service= status=503 bytes= protocol=https
2017-12-12T22:55:21.791196+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=rapperapplication.herokuapp.com request_id=2f3821a1-f17b-486c-83bb-084a413b6298 fwd="73.236.18.255" dyno= connect= service= status=503 bytes= protocol=https

这是我的。JSON文件：

        {
      "name": "rapperapplication",
      "version": "1.0.0",
      "description": "display information about rappers",
      "main": "app.js",
      "scripts": {
        "build": "webpack",
        "dev": "webpack-dev-server"
      },
      "keywords": [
        "rappers"
      ],
      "author": "Daniel Sigut",
      "license": "ISC",
      "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-env": "^1.6.1",
        "babel-preset-react": "^6.24.1",
        "css-loader": "^0.28.7",
        "extract-text-webpack-plugin": "^3.0.2",
        "file-loader": "^1.1.5",
        "html-webpack-plugin": "^2.30.1",
        "webpack": "^3.10.0",
        "webpack-dev-server": "^2.9.7"
      },
      "dependencies": {
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-router-dom": "^4.2.2"
      }
    }

最后，这是我的应用程序。jsx文件：

import React from 'react';
import { render } from 'react-dom';
import App from '../components/App'
import '../css/style.css';

render((
  <App />
), document.getElementById('app'));

Answer 1

如果你使用的是节点，你的程序文件应该是这样的

Web：节点index.js

不要使用相对路径，只需要输入服务器文件的名称

我希望有帮助

Answer 2

我正在经历类似的事情，即使我们有一个服务器/索引。js文件正确指向文件应该构建到的文件夹。

我可以看看你的Procfile和webpack配置吗？

我们是这样推出的

/*Procfile:*/
web: ./node_modules/webpack/bin/webpack.js && node --optimize_for_size --max_old_space_size=460 --gc_interval=100 server

其中server是一个包含我们的express serverserver/index的文件夹。js

Answer 3

伙计们，我知道了。。。我只需要一台服务器。js文件来为项目服务。我不敢相信事情竟如此简单。发布我用来为我那该死的网页应用服务的代码。。。

这是服务器。我的项目根目录中的js文件。

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(__dirname + '/dist/'));
app.use('/src/assets', express.static(__dirname + '/src/assets/'));


app.listen(process.env.PORT || 8080);

祝你有一个幸福的一周！