本文介绍了Node App可在Heroku Local上运行，但在Heroku服务器上崩溃.使用简单的Foundation模板项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在Heroku上部署基于Yarn，Gulp和Node.js的Foundation Web应用程序.它可与heroku local web一起使用，但在Heroku服务器上崩溃.
I am trying to deploy a Foundation web app based on Yarn, Gulp and Node.js on Heroku. It works with heroku local web but crashes on the Heroku server.
我已经正确设置了端口.我正在尝试删除Browsersync并改用gulp-connect.在我的gulpfile.js中，设置了connectHeroku任务，该任务在构建后运行.我已经在环境中为Heroku设置了yarn start命令.
I have set the port correctly. I am trying to remove Browsersync and use gulp-connect instead. In my gulpfile.js I have set the connectHeroku task which is run after build. I have set the yarn start command in the environment for Heroku.
这是我的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 <[email protected]>",
"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": "[email protected]"
},
"engines": {
"node": "10.x",
"yarn": "1.16.x"
},
"private": true
}
我希望将应用程序部署在Heroku上.
I would like to have the application deployed on 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
推荐答案
好的，所以这是我设法做到的，并且有效(请注意，我对此很陌生):堆栈:Zurb Foundation模板( zurb Foundation )，它使用yarn和gulp进行数据包管理并建立.输出到名为dist的文件夹(可在config.yml中更改)； Expressjs; NodeJS.
OK so here is what I've managed to do and it worked (pls note that I am very new to this):Stack: Zurb Foundation template (zurb foundation) which uses yarn and gulp for packet management and build. Outputs to a folder called dist (changeable in the config.yml); Expressjs; NodeJS.
Code follows after the steps.
- 上面使用@Chris评论有关Expressjs的使用( expressjs.com )非常感谢@Chris！
- 在我的根文件夹中创建了一个server.js文件；
- 添加了以下代码(请参阅下面的server.js列表)(在阅读了文档并遵循了以下两个链接之后: Heroku堆栈上的HelloDimitri ； Zurb基金会在Heroku上部署;
- 必须重新配置server.js，因为expressjs所需的路径必须符合我的项目；
- 在我的根文件夹中为Heroku创建了一个procfile，以使用yarn而不是npm(如果没有配置文件，则使用npm)；
- 更新了我的gulpfile.babel.js以仅构建应用程序而不启动任何服务器；
- 更新了我的package.json并在依赖项中添加了expressjs;
- 更新了我的package.json并为节点添加了启动脚本，以按照server.js启动服务器；
- 毕竟，我在本地运行了
yarn start，一切进展顺利； - 对我的GitHub存储库进行了更改并将其部署在Heroku上.
- Used @Chris comment above on using Expressjs (expressjs.com) Many thanks @Chris!
- created a file server.js in my root folder;
- added the following code (see below the listing of server.js) (after reading the documentation and following these two links: HelloDimitri on Heroku stack; Zurb Foundation deployment on Heroku;
- had to reconfigure my server.js because of the paths expressjs needed had to be according to my project;
- created a procfile in my root folder for Heroku to use yarn instead of npm(uses npm if no profile is there);
- updated my gulpfile.babel.js to simply build the app and not start any server;
- updated my package.json and added expressjs in the dependencies;
- updated my package.json and added the start script for node to start the server as per server.js;
- after all that, I ran
yarn startlocally and it all went well; - pushed the changes to my GitHub repo and deployed on Heroku.
就是这样.
我希望这对遇到同样问题的人有所帮助.非常感谢@Chris.欢呼.
I hope this helps people with the same issue. Many thanks to @Chris.cheers.
package.json脚本:
package.json scripts:
"scripts": {
"start": "gulp && node server.js",
"build": "gulp build --production" }
package.json依赖项(我与devDependencies相同.仍然不知道在Heroku上构建时是否需要它们.一旦发现，便会更新.):
package.json dependencies (I have the same as devDependencies. still don't know if I need them or not for the build on Heroku. Will update once I find out.):
"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
gulpfile.babel.js
gulp.task('default',gulp.series('build'));
个人资料
web: yarn start
server.js代码:
server.js code:
// 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模板项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！