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

【问题标题】："Web process failed to bind to $PORT within 60 seconds of launch" when deploying Webpack App to Heroku将 Webpack 应用程序部署到 Heroku 时，“Web 进程在启动后 60 秒内无法绑定到 $PORT”
【发布时间】：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 文件

标签： node.js heroku webpack


【解决方案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

        【讨论】：

          猜你喜欢
          • 1970-01-01
          • 2020-02-10
          • 1970-01-01
          • 2023-03-20
          • 2013-03-19
          • 2019-07-12
          • 2014-03-15
          • 2016-03-08
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode