More than 1 year has passed since last update.

Firebase Emulatorで動作確認しながらREST APIを自作してFirestoreにデータを保存させ、functionをデプロイする

Last updated at 2022-08-20Posted at 2022-08-20

(2)CloudFunctions for Firebaseに触れる

概要

前回まででフロントエンドのReactアプリとfirebaseの設定とfunctionsの雛形の作成が完了しました。
前回：https://qiita.com/sugimo-ne/items/c363342a0d83c7ab82b4
今回はfunctionsをどのように作成して動作させるのか、簡単にRESTAPIの作成とCloud Firestoreとの連携もしてみたいと思います。

functionsに触れる。

こちらの公式ドキュメントに沿ってサンプルのコードを動かしていきます。

firebase functionsエンドポイント作成とレスポンスの設定をしてみる。

まずその前に、functions/index.jsを見てみましょう

const functions = require("firebase-functions");

// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
//
// exports.helloWorld = functions.https.onRequest((request, response) => {
//   functions.logger.info("Hello logs!", {structuredData: true});
//   response.send("Hello from Firebase!");
// });

自動で雛形が作成されています。
firebase emulatorが起動されていない場合、

$ firebase emulators:start

で起動させ、
index.jsのコメントアウトを外してみてください。
コンソールにfunctionのローカルのエンドポイントが出力されるかとおもます。

*スクショ

　http://localhost:5001/プロジェクト名/us-central1/helloWorld

こちらのエンドポイントブラウザからアクセスしてみましょう。

functions/index.jsの

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

helloWorldが実行されてresponse.sendで指定した文字列がリクエストに対するレスポンスとして帰ってきています。

試しに

exports.helloWorld

こちらの記述を

exports.sample

と書き換え、

response.send("Hello from Firebase!");

を

response.send("yaa");

と書き換えてみます。

先ほどと変わって

　http://localhost:5001/プロジェクト名/us-central1/sample

こちらにアクセスするとyaaという文字列が返却されているのがわかるかと思います。

(request, response)を引数に取り、responseのメソッドを使用したものを関数を与え、
返り値を変数に格納し、exportすると変数名に対応したアクセスがあった際に実行されるためresponseの内容が返ってくるようになります。

公式のサンプルを動かす。

次にcloudfunctionsでfirebaseの提供するサービスと連携するscriptを見てみます。

公式のサンプルに従ってローカルで起動しているcloudfirestoreと連携したscriptを動かしてみます。

functions/index.jsの中身をサンプルに入れ替えます。

  const functions = require('firebase-functions');

  exports.makeUppercase = functions.firestore.document('/messages/{documentId}')
      .onCreate((snap, context) => {
        const original = snap.data().original;
        console.log('Uppercasing', context.params.documentId, original);
        const uppercase = original.toUpperCase();
        return snap.ref.set({uppercase}, {merge: true});
      });

中身を見ていくと

functions.firestore.document()の引数にfirestoreのcollectionのドキュメントまでのパスを与え、.onCreate関数でドキュメントが作成された際の処理を記述しています。
ここではmessagesコレクションに作成されたドキュメントのoriginalフィールドの値を取得し、すべて英数字の大文字に変換し同じドキュメント内のussercaseフィールドに保存する処理が記述されています。

firebase emulatorにアクセスし、firestoreのタブを開きます。

[start collection]ボタンを押して、

collectionIDをmessages

DocumentIDをデフォルト値

Fieldをoriginal

Valueをtest

としてsaveします。

そうするとローカルのEmulatorでデータベースの値が更新されているのが確認できます。

functionsにexpressを使用してREST APIを作成し、データをローカルのfirestoreに保存する。

これまでやった内容をもとに
RESTAPIを作成してfirestoreのデータを追加してみましょう。

$ cd functions
$ npm install --save-dev firebase-admin express cors

必要なパッケージ類をインストールします。

ソースコード

functions/admin.js

const admin = require("firebase-admin");
admin.initializeApp();

const db = admin.firestore();

module.exports = {
  db,
};

admin.jsにfirebase-admin(firebaseをサーバサイドで利用するためのsdk)を使うための初期設定を行なっています。
ローカルのemulatorに対して操作を行う際にはinitializeApp()の引数は与えなくて大丈夫です。
controllerで使用するdbもインスタンス化してexportします。

functions/controllers/TestController.js

const {db} = require("../admin");

const messagePost = async (req, res) => {
    try{
        console.log(req.body)
        const {text} = req.body;
        const ref = db.collection("messages");
        const docRef = await ref.add({
            original: text
        })

        const docSnapshot = await docRef.get();
        const newMessage = {
            id: docSnapshot.id,
            ...docSnapshot.data(),
          };

        res.json({
            message: "success",
            data:newMessage
        })
    }catch(e){
        console.log(e)
        res.json({
            message: "failed",
            error:e
        })
    }
}

module.exports = {
    messagePost
}

messagePost関数はexpressのrouterでルーティングにマッチしたpostリクエストを受け取った際に発火させます。
リクエストボディのtextを受け取ってadmin sdkを使用してfirestoreにデータを保存する処理を記述しています。

これによってtextデータを含めたリクエストがきた際に、
messagesコレクションに新しく、
original: textの中身
のフィールドを持ったドキュメントが追加されるようになります。

functions/routes.js

const {Router} = require("express");
const router = new Router();

const {messagePost} = require("./controllers/TestController");

router.route("/test").post(messagePost);

module.exports = router;

routes.jsではexpressのルーティング機能を利用するための設定を行なっています。
controllerのmessagePost関数を読み込んで
/testに対してpostリクエストがあった際にmessagePostを呼び出します。

functions/index.js

const functions = require("firebase-functions");
const express = require("express");
const cors = require("cors");
const app = express();

app.use(cors({origin: true}));

const router = require("./routes");
app.use("/", router);

exports.api = functions.https.onRequest(app);

exports.makeUppercase = functions.firestore.document("/messages/{documentId}")
    .onCreate((snap, context) => {
      const original = snap.data().original;
      console.log("Uppercasing", context.params.documentId, original);
      const uppercase = original.toUpperCase();
      return snap.ref.set({uppercase}, {merge: true});
    });

index.jsで