时间戳

首页 > 解决方案 > 错误：无法获取/[QUASAR FRAMEWORK] [HEROKU 部署]

express - 错误：无法获取/[QUASAR FRAMEWORK] [HEROKU 部署]

问题描述

我正在尝试在 Heroku 上发布我的 Quasar 应用程序。我正在使用 Express 服务于我的前线。

我使用该链接成功在 Heroku 上发布了我的应用程序：https ://quasar.dev/quasar-cli/developing-spa/deploying 。我的应用程序部署在https://coronavirus-statistics-app.herokuapp.com/上 ，但是当我尝试访问它时，出现错误“无法获取 /”。

我的服务器文件：

const
  express = require('express'),
  serveStatic = require('serve-static'),
  history = require('connect-history-api-fallback'),
  port = process.env.PORT || 5000
const app = express()
app.use(history())
app.use(serveStatic(__dirname + '/dist/spa'))
app.listen(port)

在本地，我可以通过 http://localhost:5000/#/home 访问我的应用程序以及我的不同视图 http://localhost:5000/#/table、http://localhost:5000/#/about .. .

我来自 Heroku 部署的日志：

-----> Building on the Heroku-20 stack
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  >= 10.18.1
       engines.npm (package.json):   >= 6.13.4
       engines.yarn (package.json):  >= 1.21.1
       
       Resolving node version >= 10.18.1...
       Downloading and installing node 15.11.0...
       Bootstrapping npm >= 6.13.4 (replacing 7.6.0)...
       npm >= 6.13.4 installed
       Resolving yarn version >= 1.21.1...
       Downloading and installing yarn (1.22.10)
       Installed yarn 1.22.10
       
-----> Restoring cache
       - node_modules
       
-----> Installing dependencies
       Installing node modules
       
       added 1377 packages, and audited 1378 packages in 43s
       
       1 high severity vulnerability
       
       To address all issues (including breaking changes), run:
         npm audit fix --force
       
       Run `npm audit` for details.
       
-----> Build
       Detected both "build" and "heroku-postbuild" scripts
       Running heroku-postbuild
       
       > corona-app@0.0.1 heroku-postbuild
       > yarn && yarn build
       
       yarn install v1.22.10
       info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
       [1/5] Validating package.json...
       [2/5] Resolving packages...
warning axios@0.18.1: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
warning @quasar/app > webpack-dev-server > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning @quasar/app > chokidar > fsevents@2.1.3: "Please update to latest v2.3 or v2.2"
warning @quasar/app > webpack-dev-server > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning @quasar/app > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning @quasar/app > stylus > css-parse > css > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning @quasar/app > webpack-dev-server > chokidar > braces > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning @quasar/app > webpack-dev-server > chokidar > braces > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
       [3/5] Fetching packages...
       info fsevents@2.1.3: The platform "linux" is incompatible with this module.
       info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
       info fsevents@2.3.2: The platform "linux" is incompatible with this module.
       info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
       info fsevents@1.2.13: The platform "linux" is incompatible with this module.
       info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
       [4/5] Linking dependencies...
       [5/5] Building fresh packages...
       success Saved lockfile.
       Done in 35.33s.
       yarn run v1.22.10
       $ yarn
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
       [1/5] Validating package.json...
       [2/5] Resolving packages...
       success Already up-to-date.
       Done in 1.44s.
       
-----> Caching build
       - node_modules
       
-----> Pruning devDependencies
       
       added 7 packages, removed 6 packages, and audited 70 packages in 4s
       
       1 high severity vulnerability
       
       To address all issues (including breaking changes), run:
         npm audit fix --force
       
       Run `npm audit` for details.
       
-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 44.9M
-----> Launching...
       Released v8
       https://coronavirus-statistics-app.herokuapp.com/ deployed to Heroku

当我尝试访问我的应用程序时来自 Heroku 的日志：

2021-03-07T10:10:06.024914+00:00 app[web.1]: Error: ENOENT: no such file or directory, stat '/app/dist/spa/index.html'
2021-03-07T10:10:06.025410+00:00 heroku[router]: at=info method=GET path="/" host=coronavirus-statistics-app.herokuapp.com request_id=86909de1-ee05-4c15-ae11-16a2f0bab822 fwd="183.182.112.106" dyno=web.1 connect=0ms service=8ms status=404 bytes=380 protocol=https

如何解决问题？谢谢你的帮助

标签： expressherokustaticquasar-frameworkquasar

解决方案

您需要从您的快递服务器上提供 index.html 文件。

const
  express = require('express'),
  path = require('path'),
  serveStatic = require('serve-static'),
  history = require('connect-history-api-fallback'),
  port = process.env.PORT || 5000

const app = express()
app.use(history())
app.use(serveStatic(__dirname + '/dist/spa'))
app.get('/*', function(req,res) {
    //res.sendFile(path.join(__dirname+'/dist/spa/index.html'));
    res.sendFile(path.join(__dirname, 'dist/spa', 'index.html'));
});
app.listen(port);

确保 Heroku 中存在“dist/spa”文件夹，并且您尚未将其添加到 .gitignore 文件或未将其检入 git。

最后，ENOENT 说 /app/dist 的原因仅仅是因为您在 Heroku 上的根/主目录是 /app。永远不要构建锁定在绝对文件结构中的应用程序；只需使用如下的相对路径。

res.sendFile(path.join(__dirname, 'dist/spa', 'index.html'));
OR
res.sendFile('index.html', {root: path.join(__dirname, 'dist/spa')});

注意：__dirname 返回当前执行脚本所在的目录。

推荐阅读