Error: Cannot GET / [QUASAR FRAMEWORK] [HEROKU DEPLOYEMENT]
Error: Cannot GET / [QUASAR FRAMEWORK] [HEROKU DEPLOYEMENT]
我正在尝试在 Heroku 上发布我的 Quasar 应用程序。我正在使用 Express 服务我的前台。
我成功地在 Heroku 上发布了我的应用 link：https://quasar.dev/quasar-cli/developing-spa/deploying。
我的应用程序部署在 https://coronavirus-statistics-app.herokuapp.com/ 上，但是当我尝试访问它时，出现错误“Cannot GET /”。
我的服务器文件：
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/#/关于...
我的 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
如何解决问题？
感谢您的帮助
您需要从您的 express 服务器提供 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);
确保 'dist/spa' 文件夹存在于 Heroku 中并且您没有将它添加到您的 .gitignore 文件或没有将它签入 git.
最后，ENOENT 说 /app/dist 的原因只是因为你在 Heroku 上的 root/home 目录是 /app。永远不要构建锁定在绝对文件结构中的应用程序；只需使用如下所示的相对路径。
res.sendFile(path.join(__dirname, 'dist/spa', 'index.html'));
OR
res.sendFile('index.html', {root: path.join(__dirname, 'dist/spa')});
注意: __dirname returns当前执行脚本所在的目录。
如果有人仍然对 Quasar 和历史模式有疑问，您还需要检查 quasar.conf.js：
build: {
vueRouterMode: 'history', // available values: 'hash', 'history'
对我来说，默认情况下它在哈希上，将路由器放入历史记录是不够的。
我正在尝试在 Heroku 上发布我的 Quasar 应用程序。我正在使用 Express 服务我的前台。
我成功地在 Heroku 上发布了我的应用 link：https://quasar.dev/quasar-cli/developing-spa/deploying。 我的应用程序部署在 https://coronavirus-statistics-app.herokuapp.com/ 上，但是当我尝试访问它时，出现错误“Cannot GET /”。
我的服务器文件：
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/#/关于...
我的 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
如何解决问题？ 感谢您的帮助
您需要从您的 express 服务器提供 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);
确保 'dist/spa' 文件夹存在于 Heroku 中并且您没有将它添加到您的 .gitignore 文件或没有将它签入 git.
最后，ENOENT 说 /app/dist 的原因只是因为你在 Heroku 上的 root/home 目录是 /app。永远不要构建锁定在绝对文件结构中的应用程序；只需使用如下所示的相对路径。
res.sendFile(path.join(__dirname, 'dist/spa', 'index.html'));
OR
res.sendFile('index.html', {root: path.join(__dirname, 'dist/spa')});
注意: __dirname returns当前执行脚本所在的目录。
如果有人仍然对 Quasar 和历史模式有疑问，您还需要检查 quasar.conf.js：
build: {
vueRouterMode: 'history', // available values: 'hash', 'history'
对我来说，默认情况下它在哈希上，将路由器放入历史记录是不够的。