部署 Quasar SSR vue/node 应用到 Firebase Hosting

Question

我尝试了多种方法来上传和在Firebase托管上运行节点/ Vue 项目，但都没有成功。

我遵循了 Firecast YouTube 频道的官方指南，但似乎我漏掉了一些东西。

我的 Vue.js 应用程序在 SSR 模式下在本地主机上运行良好。它与基本的 node / express 应用程序略有不同。一旦部署到 Firebase 托管，我就会得到错误 404 页面。 (Quasar SSR 部署文档)

我使用 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错误或无内容。

有人有解决方案吗？

- aspirinemaga

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"
  }
}

2. 安装依赖：yarn add firebase-admin firebase-functions

3. 打开并编辑 /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上可用。localhost:5000

- aspirinemaga

Answer 2

在浏览器中使用http://localhost:5000将从您的公共文件夹（即dist/ssr）请求名为“index.html”的文件。从您展示的内容来看，该文件夹中没有index.html，只有“index.js”和“template.html”。您需要执行以下操作之一：

• 创建一个index.html文件到dist/ssr目录下。
• 或者，更改URL以定位dist/ssr下存在的HTML文件。
• 或者，更改公共文件夹配置以指向具有所需内容的文件夹。

- Doug Stevenson

---

没有帮助，尝试指向模板，安装依赖项，将index.js更改为运行纯express服务器以及firebase函数，仍然给我一个404错误。 - aspirinemaga

我无法提供更多帮助，因为我不知道你的代码出了什么问题。你可能还没有放置一个适当的index.html文件。 - Doug Stevenson

我不太确定如何展示更多我所做的内容。我只能说的是，没有关于如何将Quasar SSR应用程序部署到Firebase托管的指南。我尝试过部署纯Node / Express应用程序，并且它可以工作，但是在这里，使用Quasar自动生成的/dist/ssr/index.js文件，我不确定如何将firebase.json配置文件与dist/ssr的index.js连接起来。 - aspirinemaga