Firebase Cloud FunctionsとFirestoreを使って簡単サーバーレス環境を構築する

14347 ワード
Firestore 個人開発 cloudfunctions TypeScript Firebase TypeScript テキストリンク

はじめに

Next.js を使って個人開発をしようと思ったので Firebase Cloud Functions と Firestore を使ってサーバーレス環境を構築しました。
備忘録を兼ねた手順書として投稿します。

Firebase プロジェクトを作成

1. 初期化コマンドを実行

$ firebase init


2. 使用する機能を選択
→ Functions と Hosting を選択して Enter

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. 
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◉ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features


3. 既存の Firebase プロジェクトを使用するか
→ 今回は既存のプロジェクトを使用する

? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project


4. どのプロジェクトを使用するか

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: (Use arrow keys)
❯ Project ID (Project Name)


5. JavaScript と TypeScript どちらの形式で記述するか（今回は TypeScript ）

? What language would you like to use to write Cloud Functions? 
  JavaScript 
❯ TypeScript


6. TSLint を使用するか（自由に選択して OK ）

? Do you want to use TSLint to catch probable bugs and enforce style? (Y/n) Y


7. このタイミングで npm モジュールをインストールしておくか（後でもできる）

? Do you want to install dependencies with npm now? (Y/n) Y


8. デプロイ対象となるディレクトリを指定する（任意）

? What do you want to use as your public directory?


9. SPA かどうか

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y


10. コマンドが終了したらローカルサーバを起動
→ 表示された URL をコピー

$ yarn serve
...
✔  functions[api]: http function initialized (http://localhost:5000/react-firebase/us-central1/api).


11. 別のターミナルから接続確認

  • コピーした URL + /helloでリクエストを送信
    → Hello Express! が返ってくれば成功
$ curl http://localhost:5000/react-firebase/us-central1/api/hello
Hello Express!


Firestoreの 構築

Firebase Admin SDK の設定

1. サービスアカウント画面を開く



2. 秘密鍵を作成する


3. functions ディレクトリ直下に model ディレクトリを作成し、先程取得した秘密鍵(JSON形式)を配置する

4. Admin SDK 構成スニペットをコピーする


5. functions/model ディレクトリ直下に firebase.js ファイルを作成し、コピーしたスペニットを貼り付ける

6. 貼り付けたスペニットを以下の通りに（2箇所）修正する

  1. path/to/serviceAccountKey.json を取得した秘密鍵のパスとファイル名に合わせる
  2. 一番下の行に module.exports = admin; を追記する

var admin = require("firebase-admin");

var serviceAccount = require("path/to/serviceAccountKey.json"); // 1. パスとファイル名を修正

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
    databaseURL: "https://test-1-72855.firebaseio.com"
});

module.exports = admin; // 2. module.exports = admin; を追記


データベースの作成

1. Firebase コンソールの Database メニューのトップから「データベースの作成」を始める


2. 今回は「テストモードで開始」を選択する


3. ロケーションを選択して完了
→ asia-northeast1 は 東京


データの準備

1. コレクションを開始をクリック


2. コレクション ID に todos を入力し次へ


3.ドキュメント ID、フィールド、タイプ、値を入力して保存

  • ドキュメント ID　：　0001
  • フィールド　：　todo
  • タイプ　：　string
  • 値　：　テスト



Functions から Firestore の情報を取得する

1. Express と cors の導入

$ cd functions
$ yarn add express cors
$ yarn add -D @types/cors


2. functions/index.ts を以下の内容に修正する
→ todos コレクションの情報を全取得する

import * as functions from 'firebase-functions';
import * as express from 'express';
import * as cors from 'cors';
// @ts-ignore
import * as admin from '../model/firebase';

const db = admin.firestore();
const app = express();

app.use(cors());
app.get('/', async (req, res, next) => {
    try {
        const todoSnapshot = await db.collection('todos').get();
        const todos = todoSnapshot.docs.map((x: any) => {
            return {
                id: x.id,
                data: x.data()
            };
        });
        res.send(todos);
    } catch (e) {
        next(e);
    }
});

const api = functions.https.onRequest(app);
module.exports = {api};


3. ローカルサーバを起動
→ 表示された URL をコピー

$ yarn serve
...
✔  functions[api]: http function initialized (http://localhost:5000/react-firebase/us-central1/api).


4. 別のターミナルから接続確認

  • コピーした URL でリクエストを送信
    → [{"id":"0001","data":{"todo":"テスト"}}] が返ってくれば成功！
$ curl http://localhost:5000/react-firebase/us-central1/api
[{"id":"0001","data":{"todo":"テスト"}}]

参考記事

以下の記事を参考にさせて頂きました。