将 Quasar SSR vue/node 应用程序部署到 Firebase 托管

Question

我尝试了很多方法来上传和运行 firebase 托管上的 node/vue 项目，但没有成功。

我已经关注了 official guidelines on Firecast youtube channel，但我好像错过了什么。

我的 vue.js 应用程序在 SSR 模式下在本地主机上运行良好。它与基本的 node/express 应用程序略有不同。部署到 Firebase 托管后，出现错误 404 页面。 (Quasar Documentation on SSR deploy)

我用 quasar build -m ssr 构建了一个应用程序，它生成了一个新文件夹 dist/ssr 文件夹。

firebase.json 文件在我的项目根目录中，我在其中启动了一个带有 firebase init 的 firebase 项目包含以下行：

  {
    "hosting": {
      "public": "dist/ssr",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "function": "app"
        }
      ]
    }
  }

在部署到 firebase 托管之前，我尝试使用 firebase serve 对其进行测试，但是当我访问 localhost:5000 上的页面时，出现错误 404 或无内容。

有人有解决方案吗？

Answer 1

在您的浏览器中使用 http://localhost:5000 将从您的 public 文件夹（即 dist/ssr）请求名为“index.html”的文件。根据您在此处显示的内容，该文件夹中没有 index.html。我看到“index.js”和“template.html”。

您要么必须执行以下操作之一：

安排 index.html 在 dist/ssr
或者，更改您的 URL 以找到 dist/ssr
或者，更改您的 public 文件夹配置以指向包含您要查找的内容的文件夹。

Answer 2

这是我想出的解决方案。

我在 github 上制作了一个项目模板：https://github.com/danieltorscho/gcp-quasar

使用 firebase init 在项目文件夹的根目录中初始化 firebase 项目后，打开生成的 firebase.json:

{
  "hosting": {
    "public": "dist/ssr",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [{
      "source": "**",
      "function": "ssrapp" // <- This NAME should be the same as in /src-ssr/index.js
    }]
  },
  "functions": {
    "source": "dist/ssr"
  }
}

安装依赖项yarn add firebase-admin firebase-functions
打开并编辑 /src-ssr/index.js:

// BEGINNING OF THE FILE
const functions = require('firebase-functions') // <---- ADD FIREBASE FUNCTIONS

const
  express = require('express'),
  compression = require('compression')

const
  ssr = require('quasar-ssr'),
  extension = require('./extension'),
  app = express(),
  port = process.env.PORT || 3000
...
...
...
// END OF THE FILE

// COMMENT or DELETE following 3 lines of app.listen function
// app.listen(port, () => {
//   console.log(`Server listening at port ${port}`)
// })

exports.ssrapp = functions.https.onRequest(app) // <- "ssrapp" name is the same as in firebase.json

现在使用 quasar build -m ssr
构建 SSR 应用程序
在您的终端中，转到 ./dist/ssr/ 和运行 yarn install 安装节点模块。
最后回到您的根路径“./”并在使用 firebase serve 命令部署之前进行测试。它将像往常一样在端口 5000 上可用。 localhost:5000

将 Quasar SSR vue/node 应用程序部署到 Firebase 托管

Deploy Quasar SSR vue/node app to Firebase Hosting

node.js

firebase

vue.js

quasar

firebase-hosting