将 Firebase 函数与 Nuxt 3 结合使用

Question

环境

• 操作系统：macOS 10.15.7
• 节点版本：v16.14.2
• Nuxt版本：3.0.0-rc.2
• 火力地堡：9.7.0
• firebase 管理员：10.2.0
• firebase 功能：3.21.0
• firebase 功能测试：0.3.3

在 firebase.json 中设置以下配置：

{
"functions": { "source": ".output/server" }
}

我在“服务器”目录下有一个文件，其中包含以下函数：

import * as functions from "firebase-functions";

export const helloWorld = functions.https.onRequest((request, response) => {
    functions.logger.info("Hello logs!", {structuredData: true});
    response.send("Hello from Firebase!");
});

当我跑步时：

NITRO_PRESET=firebase npm run build
firebase emulators:start --only functions

然后转到我的 firebase 模拟器日志，它没有显示helloWorld()正在初始化的新函数。此外，当访问“http://localhost:5001/$PROJECTNAME/us-central1/helloWorld”时，它返回“函数 us-central1-helloWorld 不存在，有效函数为：us-central1-server”，这表明我的函数尚未初始化。

有什么方法可以从我的服务器目录中的文件在我的 Nuxt 3 应用程序中编写 firebase 云函数吗？

我在这里看到了类似的讨论，说可以functions在部署功能、存储、firestore 以及部署服务器和托管之间更改 nuxt.config.ts 对象。我试图仅在“服务器”目录中编写 firebase 函数，而不创建“函数”目录和项目的根目录。这可能吗？

我也在 GitHub上开启了讨论

Answer 1

不幸的是，您所遵循的过程有一些要点需要强调。正如之前在该线程中提到的中提到的：

\n

\n

Vue.js 应用是前端组件（即使它托管在 Firebase Hosting 等云服务中）。\nCloud Functions 是无服务器后端组件，托管在 Firebase (Google Cloud) 基础架构中并对事件做出反应。

\n

为了让这两个组件相互交互，基本上有两种可能性：

\n

\n
• 对于可调用云函数和 HTTPS 云函数，您将从 Vue.js 应用程序中调用它们。
\n
• 对于后台触发的云函数（例如由 Firestore 事件触发，如文档创建），Vue.js 前端可以生成事件（例如写入 Firestore）和/或监听云函数执行的结果（例如 Firestore文档已修改）。
\n

\n

\n

\xe2\x80\xa6

\n

\n

如文档中所述，要从 Vue.js 应用程序调用可调用函数，您需要执行以下操作（使用 JS SDK v9）：

\n

将 Firebase 添加到您的 Vue.js 应用。例如通过 firebaseConfig.js 文件：

\n

   import { initializeApp } from "firebase/app";\n   import { getFirestore } from "firebase/firestore";\n   import { getFunctions } from "firebase/functions";\n  \n   const firebaseConfig = {\n   apiKey: "...",\n   // ....\n   };\n  \n   const firebaseApp = initializeApp(firebaseConfig);\n   const db = getFirestore(firebaseApp);\n   const functions = getFunctions(firebaseApp);\n  \n   export { db, functions };\n

\n

然后，在你的组件中，你做

\n

   <script>       \n   import { functions } from \'../firebaseConfig\';\n   import { httpsCallable } from \'firebase/functions\';\n  \n   // ...\n   methods: {\n   async callFunction() {\n   const addMessage = httpsCallable(functions, \'addMessage\');\n   const result = await addMessage({ text: messageText })\n   const data = result.data;\n   //...\n   });\n  \n  }\n  \n   </script>\n

\n

\n

我还尝试重现该问题，并按照问题中的相同方法成功在模拟器上部署了功能，遵循 GCP 关于如何将Firebase 添加到项目的文档，并使用此Youtube 教程作为指南，它有有关如何将 Firebase 添加到 NuxtJS 项目的一些重要提示。

\n

我会留下一个样本来说明我的firebase.json所有设置完成后我的文件最终的外观：

\n

{\n  "firestore": {\n    "rules": "firestore.rules",\n    "indexes": "firestore.indexes.json"\n  },\n  "functions": {\n    "predeploy": [\n      "npm --prefix \\"$RESOURCE_DIR\\" run lint"\n    ],\n    "source": ".output/server" \n  },\n  "hosting": {\n    "site": "<your_project_id>",\n      "public": ".output/public",\n      "cleanUrls": true,\n      "rewrites": [{ "source": "**", "function": "server" }],\n    "ignore": [\n      "firebase.json",\n      "**/.*",\n      "**/node_modules/**"\n    ]\n  }\n}\n

\n

此外，我建议使用Firebase CLI，因为它具有更多辅助功能，并查看此Medium 指南以更深入地了解如何将 Firebase 添加到 Nuxt。

\n