Heroku 进程绑定端口失败答案

【问题标题】：Heroku process failed to Bind portHeroku 进程绑定端口失败
【发布时间】：2020-01-02 08:48:30
【问题描述】：

我正在尝试在 Heroku 上部署以下入门工具包。但是，当我尝试启动它时，它失败了:(

错误：

错误 R10（启动超时）-> Web 进程在启动后 60 秒内未能绑定到 $PORT

我没有找到配置或设置端口的地方。它在 8080 上启动，但仍然失败。

浏览器同步服务器：

/**
 * Start browserSync server
 */
'use strict';

const fs    = require('fs');

module.exports = function(options) {

  return () => {
    // If index.html exist - open it, else show folder
    let listDirectory = fs.existsSync(options.mainHtml) ? false : true;

    options.browserSync.init({
      notify: false,
      server: {

        baseDir: './',
        directory: listDirectory
      },
      snippetOptions: {
        // Provide a custom Regex for inserting the snippet
        rule: {
          match: /$/i,
          fn: (snippet, match) => snippet + match
        }
      },
      port: 8080
    });
  };

};

Package.json:

{
  "name": "Demo-app",
  "version": "2.3.2",
  "description": "Demo Project",
  "repository": {
    "type": "git",
  },
  "keywords": [
    "starte",
    "markup",
    "JustCoded",
    "jc"
  ],
  "author": "JustCoded",
  "license": "MIT",
  "bugs": {
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "babelify": "^10.0.0",
    "browser-sync": "^2.18.0",
    "browserify": "^16.5.0",
    "del": "^3.0.0",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-plugin-import": "^2.14.0",
    "files-exist": "^1.1.0",
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-cssimport": "^5.0.0",
    "gulp-cssnano": "^2.1.2",
    "gulp-debug": "^3.1.0",
    "gulp-eslint": "^5.0.0",
    "gulp-file-include": "^2.0.1",
    "gulp-group-css-media-queries": "^1.2.0",
    "gulp-htmlhint": "^0.3.1",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^4.1.0",
    "gulp-newer": "^1.3.0",
    "gulp-notify": "^3.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.4.1",
    "gulp-uglify": "^3.0.0",
    "htmlhint-stylish": "^1.0.3",
    "node-notifier": "^5.0.2",
    "path": "^0.12.7",
    "vinyl-source-stream": "^2.0.0"
  },
  "engines": {
    "node": ">=6.0.0"
  },
  "scripts": {
    "test": "gulp build",
    "production": "gulp build",
    "start": "gulp"
  },
  "dependencies": {
    "include-media": "^1.4.9",
    "jquery": "^3.3.1",
    "normalize.css": "^5.0.0"
  }
}

Gulp 文件：

(() => {
  'use strict';

  const cfg         = require('./gulp-config.js'),
        gulp        = require('gulp'),
        del         = require('del'),
        path        = require('path'),
        notifier    = require('node-notifier'),
        gutil       = require('gulp-util'),
        browserSync = require('browser-sync').create();

  /**
   * Require gulp task from file
   * @param  {string} taskName     Task name
   * @param  {String} path         Path to task file
   * @param  {Object} options      Options for task
   * @param  {Array}  dependencies Task dependencies
   */
  function requireTask(taskName, path, options, dependencies) {
    let settings = options || {};
    const taskFunction = function (callback) {
      if (settings.checkProduction) {
        settings.isProduction = process.argv[process.argv.length - 1] === 'build';
      }

      let task = require(path + taskName + '.js').call(this, settings);

      return task(callback);
    };

    settings.taskName = taskName;

    if (!Array.isArray(dependencies)) {
      gulp.task(taskName, taskFunction);
    } else if (dependencies.length === 1) {
      gulp.task(taskName, gulp.series(dependencies[0], taskFunction));
    } else {
      gulp.task(taskName, gulp.series(dependencies, taskFunction));
    }
  }

  /**
   * Remove image(s) from build folder if corresponding
   * images were deleted from source folder
   * @param  {Object} event    Event object
   * @param  {String} src      Name of the source folder
   * @param  {String} dest     Name of the destination folder
   */
  function deleteFile(file, src, dest) {
    let fileName = file.path.toString().split('/').pop();
    let fileEventWord = file.event == 'unlink' ? 'deleted' : file.event;

    let filePathFromSrc = path.relative(path.resolve(src), file.path);
    let destFilePath = path.resolve(dest, filePathFromSrc);

    try {
      del.sync(destFilePath);
      console.log(` \u{1b}[32m${fileEventWord}: ${fileName}\u{1b}[0m`);
    } catch (error) {
      console.log(` \u{1b}[31mFile has already deleted\u{1b}[0m`);
    }
  }

  /**
   * Show error in console
   * @param  {String} prefix Title of the error
   * @param  {String} err     Error message
   */
  function showError(prefix, err) {
    gutil.log(gutil.colors.white.bgRed(' ' + prefix + ' '), gutil.colors.white.bgBlue(' ' + err.message + ' '));
    notifier.notify({
      title: prefix,
      message: err.message
    });
    this.emit('end');
  }

  /**
   * template HTML
   */
  requireTask(`${cfg.task.fileInclude}`, `./${cfg.folder.tasks}/`, {
    templates: cfg.fileInclude.templates,
    dest: cfg.fileInclude.dest
  });

  /**
   * Hint HTML
   */
  requireTask(`${cfg.task.htmlHint}`, `./${cfg.folder.tasks}/`);

  /**
   * Lint ES
   */
  requireTask(`${cfg.task.esLint}`, `./${cfg.folder.tasks}/`, {
    src: cfg.folder.src
  });

  /**
   * Build custom js
   */
  requireTask(`${cfg.task.buildCustomJs}`, `./${cfg.folder.tasks}/`, {
    src: cfg.folder.src,
    dest: cfg.folder.build,
    mainJs: cfg.file.mainJs,
    checkProduction: true,
    showError: showError
  });

  /**
   * Build js vendor (concatenate vendors array)
   */
  requireTask(`${cfg.task.buildJsVendors}`, `./${cfg.folder.tasks}/`, {
    src: cfg.folder.src,
    dest: cfg.folder.build,
    vendorJs: cfg.file.vendorJs,
    vendorJsMin: cfg.file.vendorJsMin
  });

  /**
   * Build styles for application from SASS
   */
  requireTask(`${cfg.task.buildSass}`, `./${cfg.folder.tasks}/`, {
    src: cfg.folder.src,
    dest: cfg.folder.build,
    mainScss: cfg.file.mainScss,
    mainScssMin: cfg.file.mainScssMin,
    versions: cfg.autoprefixer.versions,
    checkProduction: true,
    showError: showError
  });

  /**
   * Compile scss files listed in the config
   */
  requireTask(`${cfg.task.buildSassFiles}`, `./${cfg.folder.tasks}/`, {
    sassFilesInfo: cfg.getPathesForSassCompiling(),
    dest: cfg.folder.build,
    versions: cfg.autoprefixer.versions,
    showError: showError
  });

  /**
   * Build styles for vendor from SASS
   */
  requireTask(`${cfg.task.buildStylesVendors}`, `./${cfg.folder.tasks}/`, {
    src: cfg.folder.src,
    dest: cfg.folder.build,
    vendorScss: cfg.file.vendorScss,
    vendorScssMin: cfg.file.vendorScssMin,
    showError: showError
  });

  /**
   * Minify images
   */
  requireTask(`${cfg.task.imageMin}`, `./${cfg.folder.tasks}/`, {
    src: cfg.folder.src,
    dest: cfg.folder.build
  });

  /**
   * Clean build folder
   */
  requireTask(`${cfg.task.cleanBuild}`, `./${cfg.folder.tasks}/`, {
    src: cfg.folder.build
  });

  /**
   * Clean production folder
   */
  requireTask(`${cfg.task.cleanProd}`, `./${cfg.folder.tasks}/`, {
    src: cfg.folder.prod
  });


  /**
   * Copy folders to the build folder
   */
  requireTask(`${cfg.task.copyFolders}`, `./${cfg.folder.tasks}/`, {
    dest: cfg.folder.build,
    foldersToCopy: cfg.getPathesToCopy()
  });

  /**
   * Copy folders to the production folder
   */
  requireTask(`${cfg.task.copyFoldersProduction}`, `./${cfg.folder.tasks}/`, {
    dest: cfg.folder.prod,
    foldersToCopy: cfg.getPathesToCopyForProduction()
  });

  /**
   * Start browserSync server
   */
  requireTask(`${cfg.task.browserSync}`, `./${cfg.folder.tasks}/`, {
    mainHtml: cfg.file.mainHtml,
    browserSync: browserSync
  });

  /**
   * Watch for file changes
   */
  requireTask(`${cfg.task.watch}`, `./${cfg.folder.tasks}/`, {
    sassFilesInfo: cfg.getPathesForSassCompiling(),
    src: cfg.folder.src,
    templates: cfg.folder.templates,
    dest: cfg.folder.build,
    imageExtensions: cfg.imageExtensions,
    browserSync: browserSync,
    deleteFile: deleteFile,
    tasks: {
      buildSassFiles: cfg.task.buildSassFiles,
      buildCustomJs: cfg.task.buildCustomJs,
      buildSass: cfg.task.buildSass,
      esLint: cfg.task.esLint,
      fileInclude: cfg.task.fileInclude,
      htmlHint: cfg.task.htmlHint,
      imageMin: cfg.task.imageMin
    }
  }, false);

  /**
   * Default Gulp task
   */
  gulp.task('default', gulp.series(
    cfg.task.cleanBuild,
    gulp.parallel(
      cfg.task.buildCustomJs,
      cfg.task.buildJsVendors,
      cfg.task.buildSass,
      cfg.task.buildSassFiles,
      cfg.task.buildStylesVendors,
      cfg.task.fileInclude,
      cfg.task.htmlHint,
      cfg.task.esLint,
      cfg.task.imageMin
    ),
    cfg.task.copyFolders,
    gulp.parallel(
      cfg.task.browserSync,
      cfg.task.watch
    )
  ));

  /**
   * Creating production folder without unnecessary files
   */
  gulp.task('build', gulp.series(
    gulp.parallel(
      cfg.task.cleanProd,
      cfg.task.cleanBuild
    ),
    gulp.parallel(
      cfg.task.buildCustomJs,
      cfg.task.buildJsVendors,
      cfg.task.buildSass,
      cfg.task.buildSassFiles,
      cfg.task.buildStylesVendors,
      cfg.task.fileInclude,
      cfg.task.htmlHint,
      cfg.task.esLint,
      cfg.task.imageMin
    ),
    cfg.task.copyFolders,
    cfg.task.copyFoldersProduction
  ), true);
})();

端口绑定的超时有一些问题。

我添加了"preinstall": "npm install -g gulp" 和

我的 Procfile 也显示以下内容：

网络：吞咽

有人可以帮助我为什么它失败了吗？我真的很想在 Heroku 上部署这个项目，非常感谢任何帮助解决问题！

项目上没有办法绑定端口。

【问题讨论】：

“它在 8080 上启动，但仍然失败”——你不应该使用端口 8080，除非那是端口 assigned to you via the PORT environment variable。这可能很容易解决，但我们不会在 GitHub 上为您深入挖掘您的代码。这里的问题应该是独立的，以最大程度地减少链接失效并为未来用户最大化价值。请复制您的服务器（可能是express？）配置为侦听请求的部分。
@Chris 我非常感谢您的回答。通常我会寻找package.json 或app.js 以找到端口号并进行更改。但是，在这种情况下，gulp 正在生成端口号，但找不到它是如何做到的（我进行了谷歌搜索，然后发布了 repo，以防它有用）请让我知道如何修复它。
@Chris 所以我在浏览器同步配置中找到了“端口”部分。它是 8080，尝试将其更改为 8000，即使是同样的错误。在heroku中无法绑定到8000。 :(
再次，你不能在 Heroku 上选择自己的端口 选择 8000 没关系、8080 或任何其他值；如果 you 选择了它，则说明你使用了 wrong 端口。您必须使用通过PORT 环境变量分配给您的端口。同样，如果您编辑您的问题以包含侦听连接的代码部分，我们也许可以帮助您解决这个问题。
@Chris 看起来我的应用没有监听任何环境变量:(我应该添加一个吗？

标签： heroku

【解决方案1】：

使用process.env.PORT || 8080 而不仅仅是8080 解决了我的问题。 Heroku 喜欢这种方式！

【讨论】：