正文 

当前位置： 首页 > 知识 >

端口错误：heroku 中的 vue.js+node.js 项目

     2023-03-07     232

关键词：

【中文标题】端口错误：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 / Clojure 部署上的端口错误

】Heroku/Clojure部署上的端口错误【英文标题】：PortErroronHeroku/ClojureDeployment【发布时间】：2012-01-0120:28:01【问题描述】：这是我的Heroku/Clojureproblemhere的后续问题。正如该线程中所述，我能够将我的应用推送到Heroku的主服务器，然... 查看详情

Heroku 部署混乱：Vue.js 前端与 Flask 后端

】Heroku部署混乱：Vue.js前端与Flask后端【英文标题】：Herokudeploymentconfusion:Vue.jsfrontendwithFlaskbackend【发布时间】：2019-04-0714:57:42【问题描述】：我目前的网络应用程序涉及一个Vue.js前端和一个充当RESTAPI的Flask后端。它们分别在我... 查看详情

Vue.js Heroku 部署不起作用

】Vue.jsHeroku部署不起作用【英文标题】：Vue.jsHerokudeploynotworking【发布时间】：2019-01-2323:54:55【问题描述】：我正在尝试将我制作的Vue.js应用程序部署到Heroku，但我不断收到Cannotfindmodule\'/app/index.js\'。我觉得我只是错过了一些小... 查看详情

Web 应用程序（Vue.js、Django、Heroku）的 GDPR 合规性 [关闭]

】Web应用程序（Vue.js、Django、Heroku）的GDPR合规性[关闭]【英文标题】：GDPRcomplianceforawebapp(Vue.js,Django,Heroku)[closed]【发布时间】：2020-12-1803:24:14【问题描述】：我已经使用Django、Vue.js构建了一个Web应用程序并将其部署在Heroku上。这... 查看详情

Heroku中的进程类型和Dynos有啥区别

】Heroku中的进程类型和Dynos有啥区别【英文标题】：WhatisthedifferencebetweenProcessTypesandDynosinHerokuHeroku中的进程类型和Dynos有什么区别【发布时间】：2018-03-1418:00:10【问题描述】：我在Heroku中订阅了一个爱好计划。该计划的详细信息... 查看详情

Heroku 中的 PHP 错误日志

】Heroku中的PHP错误日志【英文标题】：PHPErrorLogsinHeroku【发布时间】：2012-11-2604:29:43【问题描述】：我在Heroku上部署了一个PHP应用程序，但我似乎无法找到apache错误日志。使用命令$herokulogs我似乎只得到了apache访问日志。所以一... 查看详情

Heroku 登录错误：证书链中的自签名证书

】Heroku登录错误：证书链中的自签名证书【英文标题】：HerokuLoginError:selfsignedcertificateincertificatechain【发布时间】：2019-01-2321:27:42【问题描述】：我正在尝试在Mac上使用HerokuCLI。当我尝试使用Heroku登录名登录Heroku并提供我的凭据... 查看详情

Heroku Node.js 和 uWebsockets.js R10 错误，绑定端口失败

】HerokuNode.js和uWebsockets.jsR10错误，绑定端口失败【英文标题】：HerokuNode.jsanduWebsockets.jsR10Error,failedtobindport【发布时间】：2021-12-0216:17:50【问题描述】：我创建了一个最小的应用程序，用于测试在heroku上使用dockerfile部署node.jsuWebso... 查看详情

laravel 中的 Vue.js 错误

】laravel中的Vue.js错误【英文标题】：Vue.jserrorinlaravel【发布时间】：2016-05-0805:17:24【问题描述】：当我尝试使用vue.js在Laravel中运行以下代码时：<html><head><title></title><linkhref="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css... 查看详情

NodeJS 应用程序构建成功（Heroku），但启动时 Heroku 中的应用程序错误

...应用程序构建成功（Heroku），但启动时Heroku中的应用程序错误【英文标题】：NodeJSappbuildissuccessful(Heroku)butApplicationErrorinherokuatthelaunch【发布时间】：2018-04-0719:16:03【问题描述】：我正在使用Cloud9IDE。当我这样做时构建成功gitadd.gi... 查看详情

如何解决 Heroku（Python）中的“应用程序错误”[重复]

】如何解决Heroku（Python）中的“应用程序错误”[重复]【英文标题】：Howtosolve"ApplicationError"inHeroku(Python)[duplicate]【发布时间】：2017-01-0516:28:50【问题描述】：我在Python-Django框架中创建了一个项目。我在heroku中部署了该项... 查看详情

heroku中的django应用程序出现工作超时错误

】heroku中的django应用程序出现工作超时错误【英文标题】：djangoappinherokugettingworkertimeouterror【发布时间】：2014-09-0801:51:18【问题描述】：我已经部署了一个django应用程序并部署到Heroku，它通过CSV文件将facebook帐户ID作为输入并解... 查看详情

如何使用 sirv 访问 Heroku 分配的端口？

】如何使用sirv访问Heroku分配的端口？【英文标题】：HowcanIaccessHeroku\'sassignedportwithsirv?【发布时间】：2020-03-2619:53:59【问题描述】：我收到HerokuH20错误（应用程序启动超时），然后是H10错误（Web进程未能在启动后60秒内绑定到$PORT... 查看详情

heroku 中的 Django Redis 连接错误：写入套接字时出现错误 110。连接超时

】heroku中的DjangoRedis连接错误：写入套接字时出现错误110。连接超时【英文标题】：DjangoRedisconnectionerrorinheroku:Error110whilewritingtosocket.Connectiontimedout【发布时间】：2020-02-1306:14:57【问题描述】：我在Heroku上托管的Django项目中使用Red... 查看详情

Vue.js 和 Nuxt.js 中的 Firebase 存储 CORS 错误

】Vue.js和Nuxt.js中的Firebase存储CORS错误【英文标题】：FirebaseStorageCORSerrorinVue.jsandNuxt.js【发布时间】：2021-12-3020:32:31【问题描述】：我正在尝试从我的Web应用程序(Vue.js+Nuxt.js)下载存储在firebase-storage上的.pdf但是出现了这个错误访... 查看详情

Express 4.0 中的 Heroku socket.io 示例错误

】Express4.0中的Herokusocket.io示例错误【英文标题】：Herokusocket.iosampleerrorinExpress4.0【发布时间】：2014-06-1002:14:50【问题描述】：所以我尝试使用示例heroku应用程序：https://github.com/lstoll/socket-io-chat-heroku作为模板来构建我自己的socket.... 查看详情

如何处理 Vue.JS 中的 Apollo Graphql 查询错误？

】如何处理Vue.JS中的ApolloGraphql查询错误？【英文标题】：HowtohandleApolloGraphqlqueryerrorinVue.JS?【发布时间】：2019-11-1708:59:39【问题描述】：我正在将Vue.js与Vue-Apollo一起使用，并尝试使用查询来获取共享成员列表。我在后端使用graphQ... 查看详情

看到错误模块未找到：heroku 应用程序中的 'pg-native'

】看到错误模块未找到：heroku应用程序中的\\\'pg-native\\\'【英文标题】：SeeingerrorModulenotfound:\'pg-native\'inherokuapp看到错误模块未找到：heroku应用程序中的\'pg-native\'【发布时间】：2017-05-2213:02:06【问题描述】：我正在尝试将postgres... 查看详情