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.js MEAN Stack App 在本地工作，但无法部署到 Heroku