将 Webpack 应用程序部署到 Heroku 时，“Web 进程在启动后 60 秒内无法绑定到 $PORT”
Posted
技术标签:
【中文标题】将 Webpack 应用程序部署到 Heroku 时，“Web 进程在启动后 60 秒内无法绑定到 $PORT”【英文标题】："Web process failed to bind to $PORT within 60 seconds of launch" when deploying Webpack App to Heroku 【发布时间】：2018-05-26 18:02:13 【问题描述】：我正在尝试将我的 Webpack 应用程序部署到 Heroku。我在我的 Procfile 中使用“npm run dev”作为命令。 我已经设置了
DEFAULT_PORT = process.env.port || 8080
在 webpack-dev-server.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"
最后，这是我的 app.jsx 文件：
import React from 'react';
import render from 'react-dom';
import App from '../components/App'
import '../css/style.css';
render((
<App />
), document.getElementById('app'));
【问题讨论】：
在没有看到您的“app.js”主文件的情况下很难为您提供帮助。或者生成该日志的代码所在的位置。 @midnightsyntax 我刚刚添加了 app.jsx 文件 【参考方案1】：好吧，伙计们，我想通了...我只需要一个 server.js 文件来为项目提供服务。我不敢相信事情就这么简单。发布我用来服务我的上帝被遗忘的 webpack 应用程序的代码......
这是我项目根目录下的 server.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);
祝你一周快乐！
【讨论】：
【参考方案2】：我正在经历类似的事情，即使我们确实有一个 server/index.js 文件正确指向应该构建文件的 /dist 文件夹。
我可以看看你的 Procfile 和 webpack 配置吗？
我们是这样推出的
/*Procfile:*/
web: ./node_modules/webpack/bin/webpack.js && node --optimize_for_size --max_old_space_size=460 --gc_interval=100 server
其中server 是我们的快速服务器server/index.js 的文件夹
【讨论】：
【参考方案3】：如果你使用节点，你的 procfile 应该是这样的
网络：节点 index.js
不要使用相对路径，只放服务器文件名
希望对你有帮助
【讨论】：
【参考方案4】：我遇到了同样的错误，我正在使用 React-Typescript 和 Webpack。这可能对某人有所帮助：
为了让应用在 Heroku 中正常运行，您需要修改一些配置。
//pakage.json
"engines":
"node": "14.15.4"
,
"scripts":
"start": "node server.js",
"build": "rm -rf build && webpack --config webpack/webpack.config.js --env env=prod"
在根文件夹中创建一个 server.js 脚本。这将帮助 heroku 了解它可以连接的端口（无需创建 .env）
//server.js
const express = require('express');
var path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.use('src/assets', express.static(path.join(__dirname + 'src/assets/')));
app.use('src/animations', express.static(path.join(__dirname + 'src/animations/')));
app.set('port', process.env.PORT || 8080);
var server = app.listen(app.get('port'), function()
console.log('listening on port ', server.address().port);
);
在 git 中更新您的代码，然后在 heroku 或 CLI 中转到您的项目
heroku login
heroku buildpacks:add heroku/nodejs
heroku buildpacks:add zidizei/typescript
heroku push heroku master
【讨论】：
以上是关于将 Webpack 应用程序部署到 Heroku 时，“Web 进程在启动后 60 秒内无法绑定到 $PORT”的主要内容，如果未能解决你的问题，请参考以下文章
将 Webpack 应用程序部署到 Heroku 时，“Web 进程在启动后 60 秒内无法绑定到 $PORT”
如何将 Rails + Webpacker 应用程序部署到 Heroku？