Node App 在 Heroku Local 上运行,但在 Heroku 服务器上崩溃。使用简单的 Foundation 模板项目

Posted

技术标签:

【中文标题】Node App 在 Heroku Local 上运行,但在 Heroku 服务器上崩溃。使用简单的 Foundation 模板项目【英文标题】:Node App works on Heroku Local but crashes on Heroku server. using simple Foundation template project 【发布时间】:2019-11-17 05:19:50 【问题描述】:

我正在尝试在 Heroku 上部署基于 Yarn、Gulp 和 Node.js 的 Foundation Web 应用程序。它适用于heroku local web,但在 Heroku 服务器上崩溃。

我已正确设置端口。我正在尝试删除 Browsersync 并改用 gulp-connect 。在我的gulpfile.js 中,我设置了在构建后运行的connectHeroku 任务。我已经在 Heroku 的环境中设置了yarn start 命令。

这是我的gulp.babel.js


'use strict';

import plugins       from 'gulp-load-plugins';
import yargs         from 'yargs';
import browser       from 'browser-sync';
import gulp          from 'gulp';
import panini        from 'panini';
import rimraf        from 'rimraf';
import sherpa        from 'style-sherpa';
import yaml          from 'js-yaml';
import fs            from 'fs';
import webpackStream from 'webpack-stream';
import webpack2      from 'webpack';
import named         from 'vinyl-named';
import uncss         from 'uncss';
import autoprefixer  from 'autoprefixer';
import gulpConnect   from 'gulp-connect';

// Load all Gulp plugins into one variable
const $ = plugins();

// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);

// Load settings from config.yml
const  COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS  = loadConfig();

function loadConfig() 
  let ymlFile = fs.readFileSync('config.yml', 'utf8');
  return yaml.load(ymlFile);


// Build the "dist" folder by running all of the below tasks
// Sass must be run later so UnCSS can search for used classes in the others assets.
gulp.task('build',
 gulp.series(clean, gulp.parallel(pages, javascript, images, copy), sass, styleGuide));

gulp.task('connectHeroku', function () 
  gulpConnect.server(
    root: PATHS.dist,
    port: process.env.PORT || PORT
  );
);

// Build the site, run the server, and watch for file changes
gulp.task('default',gulp.series('build','connectHeroku'));
// gulp.task('default',gulp.series('build','connectHeroku'));


// gulp.task('default',
//   gulp.series('build','connectHeroku'));

// gulp.task('start','node app.js');

// gulp.task('default',
//   gulp.series('build', server, watch));

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) 
  rimraf(PATHS.dist, done);


// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() 
  return gulp.src(PATHS.assets)
    .pipe(gulp.dest(PATHS.dist + '/assets'));


// Copy page templates into finished html files
function pages() 
  return gulp.src('src/pages/**/*.html,hbs,handlebars')
    .pipe(panini(
      root: 'src/pages/',
      layouts: 'src/layouts/',
      partials: 'src/partials/',
      data: 'src/data/',
      helpers: 'src/helpers/'
    ))
    .pipe(gulp.dest(PATHS.dist));


// Load updated HTML templates and partials into Panini
function resetPages(done) 
  panini.refresh();
  done();


// Generate a style guide from the Markdown content and HTML template in styleguide/
function styleGuide(done) 
  sherpa('src/styleguide/index.md', 
    output: PATHS.dist + '/styleguide.html',
    template: 'src/styleguide/template.html'
  , done);


// Compile Sass into CSS
// In production, the CSS is compressed
function sass() 

  const postCssPlugins = [
    // Autoprefixer
    autoprefixer( browsers: COMPATIBILITY ),

    // UnCSS - Uncomment to remove unused styles in production
    // PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS),
  ].filter(Boolean);

  return gulp.src('src/assets/scss/app.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass(
      includePaths: PATHS.sass
    )
      .on('error', $.sass.logError))
    .pipe($.postcss(postCssPlugins))
    .pipe($.if(PRODUCTION, $.cleanCss( compatibility: 'ie9' )))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/css'))
    .pipe(browser.reload( stream: true ));


let webpackConfig = 
  mode: (PRODUCTION ? 'production' : 'development'),
  module: 
    rules: [
      
        test: /\.js$/,
        use: 
          loader: 'babel-loader',
          options: 
            presets: [ "@babel/preset-env" ],
            compact: false
          
        
      
    ]
  ,
  devtool: !PRODUCTION && 'source-map'


// Combine JavaScript into one file
// In production, the file is minified
function javascript() 
  return gulp.src(PATHS.entries)
    .pipe(named())
    .pipe($.sourcemaps.init())
    .pipe(webpackStream(webpackConfig, webpack2))
    .pipe($.if(PRODUCTION, $.uglify()
      .on('error', e =>  console.log(e); )
    ))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/js'));


// Copy images to the "dist" folder
// In production, the images are compressed
function images() 
  return gulp.src('src/assets/img/**/*')
    .pipe($.if(PRODUCTION, $.imagemin([
      $.imagemin.jpegtran( progressive: true ),
    ])))
    .pipe(gulp.dest(PATHS.dist + '/assets/img'));


// Start a server with BrowserSync to preview the site in
function server(done) 

    browser.init(
      server: PATHS.dist, port: process.env.PORT || PORT, open: false
    , done);



// Reload the browser with BrowserSync
function reload(done) 
  browser.reload();
  done();


// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() 
  gulp.watch(PATHS.assets, copy);
  gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
  gulp.watch('src/layouts,partials/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
  gulp.watch('src/data/**/*.js,json,yml').on('all', gulp.series(resetPages, pages, browser.reload));
  gulp.watch('src/helpers/**/*.js').on('all', gulp.series(resetPages, pages, browser.reload));
  gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
  gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
  gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
  gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));

我的package.json


  "name": "Imaginary-Symposium",
  "version": "1.0.0",
  "description": "Imaginary Symposium",
  "main": "gulpfile.babel.js",
  "scripts": 
    "start": "gulp",
    "build": "gulp build --production"
  ,
  "author": "ZURB <foundation@zurb.com>",
  "license": "MIT",
  "dependencies": 
    "foundation-sites": "^6.5.3",
    "jquery": "^3.2.1",
    "motion-ui": "^2.0.3",
    "what-input": "^5.1.2",
     "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@babel/register": "^7.0.0",
    "autoprefixer": "^9.1.5",
    "babel-loader": "^8.0.4",
    "browser-sync": "^2.10.0",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^3.3.1",
    "gulp-cli": "^2.0.1",
    "gulp-concat": "^2.5.2",
    "gulp-connect": "^5.7.0",
    "gulp-extname": "^0.2.0",
    "gulp-if": "^2.0.0",
    "gulp-imagemin": "^4.1.0",
    "gulp-load-plugins": "^1.1.0",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.1",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.1",
    "gulp-stylus": "^2.7.0",
    "js-yaml": "^3.4.6",
    "panini": "^1.3.0",
    "rimraf": "^2.4.3",
    "style-sherpa": "^1.0.0",
    "uncss": "^0.16.2",
    "vinyl-named": "^1.1.0",
    "webpack": "^4.20.2",
    "webpack-stream": "^5.1.1",
    "yargs": "^12.0.2"
  ,
  "devDependencies": 
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@babel/register": "^7.0.0",
    "autoprefixer": "^9.1.5",
    "babel-loader": "^8.0.4",
    "browser-sync": "^2.10.0",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^3.3.1",
    "gulp-cli": "^2.0.1",
    "gulp-concat": "^2.5.2",
    "gulp-connect": "^5.7.0",
    "gulp-extname": "^0.2.0",
    "gulp-if": "^2.0.0",
    "gulp-imagemin": "^4.1.0",
    "gulp-load-plugins": "^1.1.0",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.1",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.1",
    "gulp-stylus": "^2.7.0",
    "js-yaml": "^3.4.6",
    "panini": "^1.3.0",
    "rimraf": "^2.4.3",
    "style-sherpa": "^1.0.0",
    "uncss": "^0.16.2",
    "vinyl-named": "^1.1.0",
    "webpack": "^4.20.2",
    "webpack-stream": "^5.1.1",
    "yargs": "^12.0.2"
  ,
  "repository": 
    "type": "git",
    "url": "https://github.com/zurb/foundation-zurb-template.git"
  ,
  "bugs": 
    "url": "https://github.com/zurb/foundation-sites/issues",
    "email": "foundation@zurb.com"
  ,
  "engines": 
    "node": "10.x",
    "yarn": "1.16.x"
  ,
  "private": true

我想在 Heroku 上部署应用程序。

相反,我得到了这个:

2019-07-07T12:35:03.000000+00:00 app[api]: Build started by user 
2019-07-07T12:36:25.772475+00:00 app[api]: Deploy c66e2cec by user 
2019-07-07T12:36:25.772475+00:00 app[api]: Release v32 created by user 
2019-07-07T12:36:27.030070+00:00 heroku[web.1]: State changed from crashed to starting
2019-07-07T12:36:33.644558+00:00 heroku[web.1]: Starting process with command `yarn start`
2019-07-07T12:36:34.000000+00:00 app[api]: Build succeeded
2019-07-07T12:36:35.716329+00:00 app[web.1]: yarn run v1.16.0
2019-07-07T12:36:35.799780+00:00 app[web.1]: $ gulp
2019-07-07T12:36:36.286970+00:00 app[web.1]: [12:36:36] Requiring external module @babel/register
2019-07-07T12:36:36.708934+00:00 app[web.1]: Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
2019-07-07T12:36:39.150637+00:00 app[web.1]: [12:36:39] Using gulpfile ~/gulpfile.babel.js
2019-07-07T12:36:39.151579+00:00 app[web.1]: [12:36:39] Starting 'default'...
2019-07-07T12:36:39.153676+00:00 app[web.1]: [12:36:39] Starting 'build'...
2019-07-07T12:36:39.154337+00:00 app[web.1]: [12:36:39] Starting 'clean'...
2019-07-07T12:36:39.163199+00:00 app[web.1]: [12:36:39] Finished 'clean' after 8.42 ms
2019-07-07T12:36:39.163542+00:00 app[web.1]: [12:36:39] Starting 'pages'...
2019-07-07T12:36:39.163731+00:00 app[web.1]: [12:36:39] Starting 'javascript'...
2019-07-07T12:36:39.163915+00:00 app[web.1]: [12:36:39] Starting 'images'...
2019-07-07T12:36:39.164097+00:00 app[web.1]: [12:36:39] Starting 'copy'...
2019-07-07T12:36:39.378140+00:00 app[web.1]: [12:36:39] Finished 'images' after 214 ms
2019-07-07T12:36:39.630308+00:00 app[web.1]: [12:36:39] Finished 'pages' after 467 ms
2019-07-07T12:36:39.664236+00:00 app[web.1]: [12:36:39] Finished 'copy' after 500 ms
2019-07-07T12:36:45.584344+00:00 app[web.1]: [12:36:45] Version: webpack 4.25.1
2019-07-07T12:36:45.584359+00:00 app[web.1]: Built at: 07/07/2019 12:36:45 PM
2019-07-07T12:36:45.584362+00:00 app[web.1]: Asset      Size  Chunks             Chunk Names
2019-07-07T12:36:45.584364+00:00 app[web.1]: app.js   677 KiB     app  [emitted]  app
2019-07-07T12:36:45.584365+00:00 app[web.1]: app.js.map  1.05 MiB     app  [emitted]  app
2019-07-07T12:36:45.584366+00:00 app[web.1]: Entrypoint app = app.js app.js.map
2019-07-07T12:36:45.588167+00:00 app[web.1]: [12:36:45] Finished 'javascript' after 6.42 s
2019-07-07T12:36:45.588354+00:00 app[web.1]: [12:36:45] Starting 'sass'...
2019-07-07T12:36:47.313608+00:00 app[web.1]: [12:36:47] Finished 'sass' after 1.73 s
2019-07-07T12:36:47.313741+00:00 app[web.1]: [12:36:47] Starting 'styleGuide'...
2019-07-07T12:36:47.344145+00:00 app[web.1]: [12:36:47] Finished 'styleGuide' after 30 ms
2019-07-07T12:36:47.344291+00:00 app[web.1]: [12:36:47] Finished 'build' after 8.19 s
2019-07-07T12:36:47.344423+00:00 app[web.1]: [12:36:47] Starting 'connectHeroku'...
2019-07-07T12:36:47.345546+00:00 app[web.1]: [12:36:47] Starting server...
2019-07-07T12:36:47.353434+00:00 app[web.1]: [12:36:47] Server started http://localhost:6186
2019-07-07T12:36:47.353712+00:00 app[web.1]: [12:36:47] Running server
2019-07-07T12:37:34.179753+00:00 heroku[web.1]: State changed from starting to crashed
2019-07-07T12:37:34.252667+00:00 heroku[web.1]: State changed from crashed to starting
2019-07-07T12:37:34.069250+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2019-07-07T12:37:34.069434+00:00 heroku[web.1]: Stopping process with SIGKILL
2019-07-07T12:37:34.164632+00:00 heroku[web.1]: Process exited with status 137
2019-07-07T12:37:39.890453+00:00 heroku[web.1]: Starting process with command `yarn start`
2019-07-07T12:37:42.525193+00:00 app[web.1]: yarn run v1.16.0
2019-07-07T12:37:42.605985+00:00 app[web.1]: $ gulp
2019-07-07T12:37:43.171985+00:00 app[web.1]: [12:37:43] Requiring external module @babel/register
2019-07-07T12:37:43.571081+00:00 app[web.1]: Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
2019-07-07T12:37:45.999600+00:00 app[web.1]: [12:37:45] Using gulpfile ~/gulpfile.babel.js
2019-07-07T12:37:46.000576+00:00 app[web.1]: [12:37:46] Starting 'default'...
2019-07-07T12:37:46.002883+00:00 app[web.1]: [12:37:46] Starting 'build'...
2019-07-07T12:37:46.003508+00:00 app[web.1]: [12:37:46] Starting 'clean'...
2019-07-07T12:37:46.011249+00:00 app[web.1]: [12:37:46] Finished 'clean' after 7.45 ms
2019-07-07T12:37:46.011592+00:00 app[web.1]: [12:37:46] Starting 'pages'...
2019-07-07T12:37:46.011777+00:00 app[web.1]: [12:37:46] Starting 'javascript'...
2019-07-07T12:37:46.011956+00:00 app[web.1]: [12:37:46] Starting 'images'...
2019-07-07T12:37:46.012134+00:00 app[web.1]: [12:37:46] Starting 'copy'...
2019-07-07T12:37:46.222874+00:00 app[web.1]: [12:37:46] Finished 'images' after 211 ms
2019-07-07T12:37:46.502195+00:00 app[web.1]: [12:37:46] Finished 'pages' after 490 ms
2019-07-07T12:37:46.514761+00:00 app[web.1]: [12:37:46] Finished 'copy' after 503 ms
2019-07-07T12:37:53.917049+00:00 app[web.1]: [12:37:53] Version: webpack 4.25.1
2019-07-07T12:37:53.917059+00:00 app[web.1]: Built at: 07/07/2019 12:37:53 PM
2019-07-07T12:37:53.917062+00:00 app[web.1]: Asset      Size  Chunks             Chunk Names
2019-07-07T12:37:53.917064+00:00 app[web.1]: app.js   677 KiB     app  [emitted]  app
2019-07-07T12:37:53.917065+00:00 app[web.1]: app.js.map  1.05 MiB     app  [emitted]  app
2019-07-07T12:37:53.917066+00:00 app[web.1]: Entrypoint app = app.js app.js.map
2019-07-07T12:37:53.923691+00:00 app[web.1]: [12:37:53] Finished 'javascript' after 7.91 s
2019-07-07T12:37:53.923957+00:00 app[web.1]: [12:37:53] Starting 'sass'...
2019-07-07T12:37:55.730383+00:00 app[web.1]: [12:37:55] Finished 'sass' after 1.81 s
2019-07-07T12:37:55.730560+00:00 app[web.1]: [12:37:55] Starting 'styleGuide'...
2019-07-07T12:37:55.764813+00:00 app[web.1]: [12:37:55] Finished 'styleGuide' after 34 ms
2019-07-07T12:37:55.764969+00:00 app[web.1]: [12:37:55] Finished 'build' after 9.76 s
2019-07-07T12:37:55.765114+00:00 app[web.1]: [12:37:55] Starting 'connectHeroku'...
2019-07-07T12:37:55.766393+00:00 app[web.1]: [12:37:55] Starting server...
2019-07-07T12:37:55.777651+00:00 app[web.1]: [12:37:55] Server started http://localhost:10590
2019-07-07T12:37:55.778034+00:00 app[web.1]: [12:37:55] Running server
2019-07-07T12:38:39.995481+00:00 heroku[web.1]: State changed from starting to crashed
2019-07-07T12:38:39.903593+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2019-07-07T12:38:39.903593+00:00 heroku[web.1]: Stopping process with SIGKILL
2019-07-07T12:38:39.980831+00:00 heroku[web.1]: Process exited with status 137

【问题讨论】:

哦,你把所有东西都塞进了一个代码清单。这很令人困惑。我会修复它。以后,请使用分隔代码块,即每个文件一个```块或缩进块。 或者缩进你的代码块或者使用带有```的围栏代码块,而不是两者。 看起来gulp-connect 仅供开发使用:“Gulp 插件运行网络服务器(使用 LiveReload)”。没有理由在生产中使用 LiveReload。您的生产配置在哪里,例如与 Express 或类似? 非常感谢克里斯!真的很感激。实际上我对此很陌生,并且不确定我必须为生产配置做什么。 :/ 任何指导将不胜感激。 我不是一个真正的 Node.js 人,但我认为你想要 Express。您可能想查看Heroku's getting started with Node.js guide。 【参考方案1】:

好的,这就是我设法做的事情并且它奏效了(请注意,我对此很陌生): Stack:Zurb Foundation 模板 (zurb foundation),它使用 yarn 和 gulp 进行数据包管理和构建。输出到名为 dist 的文件夹(可在 config.yml 中更改);快递; NodeJS。

Code follows after the steps.
    使用上面的@Chris 评论使用 Expressjs (expressjs.com) 非常感谢@Chris! 在我的根文件夹中创建了一个文件 server.js; 添加了以下代码(参见下面的 server.js 列表)(阅读文档并点击这两个链接后:HelloDimitri on Heroku stack;Zurb Foundation deployment on Heroku; 必须重新配置我的 server.js,因为 expressjs 需要的路径必须根据我的项目; 在我的根文件夹中创建了一个 procfile 供 Heroku 使用 yarn 而不是 npm(如果没有配置文件,则使用 npm); 更新了我的 gulpfile.babel.js 以简单地构建应用程序而不启动任何服务器; 更新了我的 package.json 并在依赖项中添加了 expressjs; 更新了我的 package.json 并添加了 node 的启动脚本以按照 server.js 启动服务器; 毕竟,我在本地运行yarn start,一切顺利; 将更改推送到我的 GitHub 存储库并部署到 Heroku。

就是这样。

我希望这可以帮助有同样问题的人。非常感谢@Chris。 干杯。

package.json 脚本:

  "scripts": 
    "start": "gulp && node server.js",
    "build": "gulp build --production"   

package.json 依赖项(我与 devDependencies 相同。仍然不知道在 Heroku 上构建是否需要它们。一旦我发现会更新。):

"dependencies": 
    "express": "^4.14.1",
    "foundation-sites": "^6.5.3",
    "jquery": "^3.2.1",
    "motion-ui": "^2.0.3",
    "what-input": "^5.1.2",
     "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@babel/register": "^7.0.0",
    "autoprefixer": "^9.1.5",
    "babel-loader": "^8.0.4",
    "browser-sync": "^2.10.0",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^3.3.1",
    "gulp-cli": "^2.0.1",
    "gulp-concat": "^2.5.2",
    "gulp-connect": "^5.7.0",
    "gulp-extname": "^0.2.0",
    "gulp-if": "^2.0.0",
    "gulp-imagemin": "^4.1.0",
    "gulp-load-plugins": "^1.1.0",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.1",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.1",
    "gulp-stylus": "^2.7.0",
    "js-yaml": "^3.4.6",
    "panini": "^1.3.0",
    "rimraf": "^2.4.3",
    "style-sherpa": "^1.0.0",
    "uncss": "^0.16.2",
    "vinyl-named": "^1.1.0",
    "webpack": "^4.20.2",
    "webpack-stream": "^5.1.1",
    "yargs": "^12.0.2"
  

gulpfile.babel.js

gulp.task('default',gulp.series('build'));

简介

web: yarn start

server.js 代码:

// server.js

var express = require('express')
var app = express()


app.set('port', (process.env.PORT || 5000))


app.use(express.static('dist',
    index: false, 
    immutable: true, 
    cacheControl: true,
    maxAge: "30d"
));

// app.use('/bower_components', express.static(__dirname + '/bower_components'))
console.log("dirname "+__dirname)
app.get('/', function(request, response) 
    console.log('request: '+request)
                      response.sendFile(__dirname+'/dist/index.html')
                    )

app.listen(app.get('port'), function() 
                      console.log("Node app is running at localhost:" + app.get('port'))
                    )

【讨论】:

以上是关于Node App 在 Heroku Local 上运行,但在 Heroku 服务器上崩溃。使用简单的 Foundation 模板项目的主要内容,如果未能解决你的问题,请参考以下文章

node.js 项目在本地机器上工作,在 Heroku 上部署时出现问题

三步将Node应用部署到Heroku上

三步将Node应用部署到Heroku上 --转载

Node.js MEAN Stack App 在本地工作,但无法部署到 Heroku

Node.js/ Ionic 应用程序未在 Heroku 上正确部署

Node.js 应用程序适用于工头,但不适用于 heroku。 404 错误