端口错误:heroku 中的 vue.js+node.js 项目
Posted
技术标签:
【中文标题】端口错误:heroku 中的 vue.js+node.js 项目【英文标题】:Error with ports: vue.js+node.js project in heroku 【发布时间】:2018-08-25 07:53:27 【问题描述】:尝试部署我的全栈项目。它在本地构建并运行良好,但在 Heroku 中,在“git push heroku master”命令和自动构建之后,我收到应用程序错误 - 503 Service Unavailable。看起来有不同的端口,或者根文件夹的路径可能不正确,它是 index.html
我的 vue.js 配置/index.js
'use strict'
const path = require('path')
module.exports =
dev:
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: ,
port: 80,
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false,
useEslint: true,
showEslintErrorsInOverlay: false,
devtool: 'cheap-module-eval-source-map',
cacheBusting: true,
cssSourceMap: true
,
build:
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
devtool: '#source-map',
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
我的 package.json
...
"scripts":
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"postinstall": "nodemon app.js",
"start": "npm run build",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
"build": "node --optimize_for_size --max_old_space_size=2048 --gc_interval=100 build/build.js"
,
...
还有 app.js,我将 'dist' 定义为一个文件夹,app 应该在其中获取 main index.html - 'app.use(express.static('dist'))'
const express = require('express');
const path = require('path');
const favicon = require('serve-favicon');
const morgan = require('morgan');
const bodyParser = require('body-parser');
const book = require('./api/routes/book');
const doingsRoutes = require('./api/routes/doings');
const targetsRoutes = require('./api/routes/targets');
const topsRoutes = require('./api/routes/tops');
const usersRoutes = require('./api/routes/users');
const app = express();
const mongoose = require('mongoose');
mongoose.Promise = require('bluebird');
mongoose.connect(
'mongodb://nodejs-rest:' +
'nodejs-rest' +
'@nodejs-rest-shard-00-00-vwe6k.mongodb.net:27017,nodejs-rest-shard-00-01-vwe6k.mongodb.net:27017,nodejs-rest-shard-00-02-vwe6k.mongodb.net:27017/test?ssl=true&replicaSet=nodejs-rest-shard-0&authSource=admin',
promiseLibrary: require('bluebird')
);
app.use(morgan('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded('extended':'false'));
app.use('/api/doings', doingsRoutes);
app.use('/api/targets', targetsRoutes);
app.use('/api/tops', topsRoutes);
app.use('/api/users', usersRoutes);
app.use(function(req, res, next)
const err = new Error('Not Found');
err.status = 404;
next(err);
);
app.set("port", process.env.PORT || 80);
if (process.env.NODE_ENV === 'production')
console.log('dist')
app.use(express.static('dist'));
app.listen(app.get("port"), () =>
console.log(`Find the server at: $app.get("port")`);
);
app.use(function(err, req, res, next)
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : ;
res.status(err.status || 500);
res.sendFile(path.join(__dirname, '../dist', 'index.html'));
);
app.set('view engine', 'html');
【问题讨论】:
【参考方案1】:您需要在您的应用程序的根目录上添加一个带有 express 和入口路由的 server.js 文件(在 package.json/index.html 所在的同一文件夹中)。我在 heroku 上也有一个 vue 应用程序,它不是很难。
// server.js
const express = require('express')
const path = require('path')
const history = require('connect-history-api-fallback')
const app = express()
const staticFileMiddleware = express.static(path.join(__dirname + '/dist'))
app.use(staticFileMiddleware)
app.use(history(
disableDotRule: true,
verbose: true
))
app.use(staticFileMiddleware)
app.get('/', function (req, res)
res.render(path.join(__dirname + '/dist/index.html'))
)
var server = app.listen(process.env.PORT || 8080, function ()
var port = server.address().port
console.log('App now running on port', port)
)
【讨论】:
很遗憾,我目前没有任何进展。当我将项目推送到 Heroku 时,构建没有错误,但随后我看到有关项目的字符串正在侦听某个端口,之后没有任何更改,因此 Heroku 等待大约 10-15 分钟并完成构建并出现超时错误。你能给我一个你在 github 上的项目的链接,我可以比较你和我的部署设置吗? 这是一个公司项目,所以它是私有的,但请在 pastebin.com 上向我展示您从 heroku 获得的构建过程。只需从 heroku 仪表板复制/粘贴“查看日志”以上是关于端口错误:heroku 中的 vue.js+node.js 项目的主要内容,如果未能解决你的问题,请参考以下文章
Heroku 部署混乱:Vue.js 前端与 Flask 后端
Web 应用程序(Vue.js、Django、Heroku)的 GDPR 合规性 [关闭]