我正在尝试将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'));
最佳答案
好了，伙计们，我弄清楚了...我只需要一个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);
祝你有个愉快的一周！