Cloud Functionsを使ってCloud Firestoreにデータを保存する 🔥

実装手順

❶ パッケージを用意する

yarn add firebase firebase-tools

❷ package.jsonを編集する

package.json

{
  "name": "functions-to-firestore",
  "scripts": {
    "login": "firebase login",
    "init": "firebase init",
    "emulate": "firebase emulators:start",
    "deploy": "firebase deploy"
  },
  "dependencies": {
    "firebase": "^10.13.0",
    "firebase-tools": "^13.15.3"
  }
}

❸ Firebaseのコンソールからプロジェクトをつくり、Cloud Firestore、Cloud Functionsを有効にする

ルールはテストモードで開始する
ロケーションは近いところを選ぶ

ロケーションは近いところを選ぶ

firebase.google.com

❹ Firebaseプロジェクトを初期化する

初期化

yarn run init

初期化後、❸で作成したプロジェクトに紐付けます。

必要なものを有効化

◉ Firestore: Configure security rules and indexes files for Firestore
◉ Functions: Configure a Cloud Functions directory and its files
◉ Emulators: Set up local emulators for Firebase products

必要なエミュレータを有効化

◉ Functions Emulator
◉ Firestore Emulator

いろいろ選択肢が出てきますが、基本的にEnterを連打でOKです。

❺ コードを書く

firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": [
    {
      "source": "functions",
      "codebase": "default",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log",
        "*.local"
      ]
    }
  ],
  "emulators": {
    "functions": {
      "port": 5001
    },
    "firestore": {
      "port": 8080
    },
    "ui": {
      "enabled": true
    },
    "singleProjectMode": true
  }
}

functions/index.js

const { onRequest } = require('firebase-functions/v2/https');
const { initializeApp } = require('firebase-admin/app');
const { getFirestore } = require('firebase-admin/firestore');

initializeApp();

exports.save = onRequest({
  region: ['asia-northeast1'],
}, async (request, response) => {
  const { collection, doc, value } = request.query;

  if (
    typeof collection === 'string' &&
    typeof doc === 'string' &&
    typeof value === 'string'
  ) {
    try {
      await getFirestore().collection(collection).doc(doc).set({
        value
      });

      response.send({
        collection,
        doc,
        value
      });
    } catch (err) {
      logger.error(err);
    }
  }

  response.send({
    collection: null,
    doc: null,
    value: null
  });
});

❻ エミュレータで確認する

yarn emulate

http://127.0.0.1:4000/logs?q=metadata.emulator.name%3D%22functions%22 にアクセスすると、デプロイしたfunctionのURLが確認できます。

関数名は、http://127.0.0.1:（ポート番号）/（プロジェクト名）/（リージョン）/（関数名）となるので、

functionsのポートを「5001」
プロジェクト名が「functions-to-firestore」
リージョンが「asia-northeast1（東京）」
関数名が「save」

ならば、

http://127.0.0.1:5001/functions-to-firestore/asia-northeast1/save

となります。

クエリパラメータで、collection、doc、valueを指定できるようにしてあるので、

http://127.0.0.1:5001/functions-to-firestore/asia-northeast1/save?collection=collection&doc=doc&value=value

にアクセスすると、

{"collection":"collection","doc":"doc","value":"value"}

というJSONを返しつつ、

しっかりCloud Firestoreに保存されます。
GETリクエストでデータが保存されるのが、やや気持ち悪い気がするのですが、ときに便利に使えます。
ただし、今回のコードは非常に簡易的なものなので、保存できるデータ形式が、

{
  value: string;
}

に限定されます。

❼ デプロイする

yarn deploy

今回は以上です。

みかづきブログ・カスタム

基本的にはちょちょいのほいです。