firebase emulatorを使用する (例: Authentication , Firestore)

● firebase emulatorのインストール

npm install -g firebase-tools
firebase --version

firebase アカウントが既にある場合は一度ログアウトしてからログインしなおすと良いです

firebase logout
firebase login

javaのインストールが促される場合は、下記のサイトからダウンロードします。

(interl と M1, M2 mac で ダウンロードするインストーラーが違うのでご注意ください)
https://www.oracle.com/java/technologies/downloads/

● ローカルフォルダ firebase_emulator_authentication にエミュレータをインストール

mkdir _firebase_emulator_authentication
cd _firebase_emulator_authentication
firebase init

emulator だけを使用したい場合は次のコマンドでもokです

firebase init emulators

● インストールオプションを適宜選択する

例: Authentication を使用したい場合

「Emulators: Set up local emulators for Firebase products」 を選択
     ↓
「Authentication Emulator」 を選択

例: Firestore を使用したい場合

「Emulators: Set up local emulators for Firebase products」 を選択
     ↓
「Firestore Emulator」 を選択

● firebase エミュレーターの起動

firebase emulators:start

javaコマンドラインツールが必要と表示される場合はこちらからダウンロードしてインストールします

https://www.oracle.com/java/technologies/downloads/

エミュレーターの管理画面はこちら

http://localhost:4000/auth

● firebase エミュレーターをlocalhostではなくIPアドレス指定で起動する

firebase.json

  "emulators": {
    "auth": {
      "port": 9099,
      "host": "192.168.1.26" // これを追加します
    },

● アプリからfirebaseエミュレーターを使用する

import { connectAuthEmulator} from "firebase/auth"
if (process.env.NODE_ENV != "production") {
  connectAuthEmulator(auth, "http://localhost:9099")
}

● firebase emulator Authentication では verify(検証)はできません

ログイン成功時に返却される UserCredentialImpl に kid が含まれないため公開鍵が分からないため検証はできません。 https://zenn.dev/mekappi/articles/48034d52393184

● firestoreエミュレーターを使用する

ディレクトリに移動してから次のコマンドを実行します

・1. firebase の初期化

firebase init

以下の2つをスペースを押して選択します

Emulators: Set up local emulators for Firebase products
Firestore: Configure security rules and indexes files for Firestore

次に以下の4つを聞かれるので答えます

・1. 既存プロジェクトまたは新規プロジェクトを使用するか聞かれるので答えます
・2. セキュリティールールのファイル名を聞かれるのでそのままエンターを押します(firestore.rules になる)
・3. インデックスのファイル名を聞かれるのでそのままエンターを押します(firestore.indexes.json になる)
・4. インストールするエミュレーターを聞かれるので( Authentication Emulator ,  Firestore Emulator)の2つを選択します

後はエンターキー連打でokです

・2. エミュレーターの起動

・データの永続化ありで起動する (ディレクトリ firestore_data にデータが保存されます)

firebase emulators:start  --import firestore_data --export-on-exit

終了時にメモリ上のデータをディレクトリ「firestore_data」のファイルに書き出します。
必ずctrl+cを押して終了させるようにしましょう。
(ターミナルごとkillした場合は保存されません)

・3. Firestoreに undefined なデータを送信した時に自動的にそのメンバを削除するように設定する

アプリ側の .ts (.js) を変更します

export const firebaseDB = getFirestore()

  ↓

export const firebaseDB = initializeFirestore(FirebaseApp, {
  ignoreUndefinedProperties: true
})

引用 : https://firebase.google.com/docs/reference/js/firestore_

initializeFirestore (アプリ、設定、データベース ID)

指定された設定でFirestoreの新しいインスタンスを初期化します。 getFirestore()を含む他の関数の前にのみ呼び出すことができます.カスタム設定が空の場合、この関数はgetFirestore()を呼び出すのと同じです.


・データの永続化なしで起動する

firebase emulators:start

● firestoreのセキュリティールールをテストする

firestore.rules を以下の内容で保存してデータ取得がエラーとなることを確認します

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // rule - 全て却下
    match /{document=**} {
      allow read, write: if false
    }
  }
}

ホワイトリスト形式で記述するので ルールを何を書かない場合でもアクセスができなくなります

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
  }
}

なお、 firestore.rules は更新するとするルールが適用されます(エミュレーターを再起動する必要はありません)

No.2224
03/09 21:21

edit