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

如何解决将Quasar SSR vue /节点应用程序部署到Firebase托管

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

我关注了official guidelines on Firecast youtube channel，但似乎我缺少了一些东西。

我的SSR模式下的vue.js应用程序在localhost上运行良好。它与基本节点/快速应用完全不同。部署到Firebase托管后，我出现了错误404页面。 （Quasar Documentation on SSR deploy）

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

我用firebase.json启动firebase项目的项目根目录中的

firebase init文件包含以下行：

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

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

有人解决吗？

解决方法

这是我想出的解决方案。

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

1. 现在使用quasar build -m ssr

   构建SSR应用

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

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

,

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

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

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