Question

我尝试了许多方法来在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或无内容。

有人解决吗？

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

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

现在使用quasar build -m ssr
构建SSR应用
在您的终端中，转到./dist/ssr/并运行yarn install以安装节点模块。
最后返回到根路径“ ./”，并在使用firebase serve命令进行部署之前进行测试。它将照常在端口5000上可用。本地主机：5000

Answer 2

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

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

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

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

2 个答案: