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

debugcn 发表于 Dev

灵芝

我尝试了许多方法来上载并在Firebase托管上运行node / vue项目，但未成功。

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

我的Sue模式下的vue.js应用在localhost上运行良好。它与基本节点/快速应用完全不同。部署到Firebase托管后，我出现了错误404页面。（有关SSR部署的类星体文档）

我使用构建了一个应用quasar build -m ssr，该应用会生成一个新的文件dist/ssr夹文件夹。

firebase.json我启动了Firebase项目的项目根目录中的file文件，其中firebase init包含以下几行：

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

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

有人有解决方案吗？

灵芝

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

使用初始化项目文件夹根目录中的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"
  }
}

安装依赖 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