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

asp*_*aga 5 node.js firebase vue.js quasar firebase-hosting

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

我已遵循Firecast youtube 频道上的官方指南,但似乎我遗漏了一些东西。

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

我已经使用 构建了一个应用程序quasar build -m ssr,它会生成一个新的文件夹dist/ssr文件夹。 在此输入图像描述

firebase.json我启动了一个 firebase 项目的项目根目录中的文件包含firebase init以下几行:

  {
    "hosting": {
      "public": "dist/ssr",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "function": "app"
        }
      ]
    }
  }
Run Code Online (Sandbox Code Playgroud)

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

有人有解决办法吗?

asp*_*aga 4

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

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

  1. 使用 初始化项目文件夹根目录中的 firebase 项目后firebase init,打开生成的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"
  }
}
Run Code Online (Sandbox Code Playgroud)
  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
Run Code Online (Sandbox Code Playgroud)
  1. 现在使用以下命令构建 SSR 应用程序quasar build -m ssr

  2. 在终端中,转到./dist/ssr/并运行yarn install以安装节点模块。

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