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

Question

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

我关注了official guidelines on Firecast youtube channel，但我似乎遗漏了什么。

我在 SSR 模式下的 vue.js 应用程序在 localhost 上运行良好。它与基本的 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

所以这是我想出的解决方案。

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

1. 使用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"
  }
}

1. 安装依赖yarn add firebase-admin firebase-functions

2. 打开和编辑/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

4. 现在使用 quasar build -m ssr 构建 SSR 应用

5. 在您的终端中，转到./dist/ssr/ 并运行yarn install 以安装节点模块。

6. 最后回到你的根路径“./”并在部署前使用firebase serve 命令进行测试。它将像往常一样在端口 5000 可用。本地主机：5000

Answer 2

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

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

• 安排在 dist/ssr 中创建 index.html
• 或者，更改您的 URL 以找到存在于 dist/ssr 下的 HTML 文件
• 或者，将您的公用文件夹配置更改为指向包含您要查找的内容的文件夹。