在 Nuxt 3 中使用 Firebase 函数

Question

环境

操作系统：macOS 10.15.7
节点Version:v16.14.2
Nuxt 版本：3.0.0-rc.2
Firebase: 9.7.0
firebase-admin: 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”时，它 returns“函数 us-central1-helloWorld 不存在，有效函数是：us-central1-server”，其中提示我的函数还没有初始化。

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

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

我也在GitHubhere

上开了一个讨论

Answer 1

不幸的是，您正在执行的过程有一些要点需要强调。如前所述 thread:

The Vue.js app is a front-end component (even if it is hosted in a cloud service like Firebase Hosting). The Cloud Functions are serverless back-end components, hosted in the Firebase (Google Cloud) infrastructure and reacting to events.

To get these two components interacting with each other there are basically two possibilities:

For Callable Cloud Functions and HTTPS Cloud Functions, you will call them from your Vue.js app.

For background triggered Cloud Functions (e.g. triggered by a Firestore event like doc creation), the Vue.js front-end could generate the event (e.g. write to Firestore) and/or listen to the result of a Cloud Function execution (e.g. a Firestore doc is modified).

…

As explained in the documentation, to call the Callable Function from your Vue.js app, you need to do as follows (with the JS SDK v9):

Add Firebase to your Vue.js app. For example via a firebaseConfig.js file:

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

Then, in your component, you do

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

我也尝试重现这个问题，并且按照 GCP 关于如何添加 Firebase to your project, and using this Youtube tutorial 作为指南的文档，使用与问题相同的方法成功地在模拟器上部署了功能，它有关于如何将 Firebase 添加到 NuxtJS 项目的一些重要提示。

我将留下一个示例，说明我的 firebase.json 文件在所有 set-up 完成后的样子：

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

此外，我想建议使用 Firebase CLI, as it has more accessibility features, and check this Medium guide 来更深入地了解如何将 Firebase 添加到 Nuxt。

在 Nuxt 3 中使用 Firebase 函数

Using Firebase Functions with Nuxt 3

firebase

google-cloud-functions

nuxt.js