概要

前回は、Firebase Authを使ったログインを行った。
今回は、ローカルでFirebase Authのエミュレータを使った開発ができる環境を整える。

ソースコード

ローカル環境

Windows 11 Home 24H2 26100.2605
Docker version 27.3.1, build ce12230
Node v22.11.0
bun 1.1.42
⛅️ wrangler 3.99.0

Cloudflare Workersのローカル実行

Local Developのwrangler devで実行。
Get Startedで作成されるフォーマットの通りにやれば動作した。

Google Firebase Authentication のローカル実行

公式エミュレータがある。
Dockerのコンテナ内でFirebase Emulatorを動かしたいとFirebase Local Emulator SuiteをDocker環境で構築して、アプリケーションからテストを実行してみたを参考にDockerでエミュレータを動かした。
バックエンドはCloudflare Workers でも Firebase Authentication を使えるぞ！！を参考に設定。

infra/local/firebase/docker/Dockerfile

FROM ubuntu:22.04

RUN apt update && \
apt install -y curl openjdk-17-jdk && \
curl -fsSL https://deb.nodesource.com/setup_22.x | bash - && \
apt install -y nodejs

RUN npm install -g firebase-tools

infra/local/firebase/docker-compose.yml

version: '3.9'

services:
  firebase:
    build:
      context: .
      dockerfile: ./docker/Dockerfile
    volumes:
       # 初期設定が終わったら削除
       - ./tmp:/opt/tmp
# 初期設定が終わったらコメントアウト解除
#      - ./firebase.json:/opt/firebase/firebase.json
#      - ./.firebaserc:/opt/firebase/.firebaserc
#      - ./config:/root/.config:cached
#      - ./cache:/root/.cache:cached

    ports:
      - 9099:9099 # Firebase Authentication
      - 9005:9005 # Firebase login
      - 4000:4000 # Firebase UI
    working_dir: /opt/firebase
    command: firebase emulators:start
    tty: true

docker-compose buildでコンテナを作成し、docker-compose run --service-ports firebase bashでコンテナ内に入り初期設定を行う。

まずは、cd /opt/tmp firebase loginでログインする。表示されるリンクを踏むとブラウザで下記のような画面が出るのでFirebase Cliにアクセスの許可を与える。

最後に下記のような画面がブラウザに表示されたらログイン成功。

つぎにfirebase initで初期設定を行う。
今回はエミュレータ用の設定を行いたいので、エミュレータを選んでスペースキーを押下して選択する。

プロジェクトを選んだり、いろいろ回答していく。途中の画像は割愛。

最終的に、.firebaserc,firebase.json,.gitignoreの３つのファイルが作成される。このうち.firebasercとfirebase.jsonを使う。いったんDockerは切断し、docker-compose.ymlのvolumesを修正する。

infra/local/firebase/.firebaserc

{
  "projects": {
    "default": "hogehoge"
  }
}

Docker内のポートにアクセスできるよう、作成されたfirebase.jsonファイルに少し手を加える。

infra/local/firebase/firebase.json

{
  "emulators": {
    "auth": {
      "port": 9099,
+      "host": "0.0.0.0"
    },
    "ui": {
      "enabled": true,
      "port": 4000,
+      "host": "0.0.0.0"
    },
    "singleProjectMode": true
  }
}

これでdocker-compose upを行うと下記のようにエミュレータが立ち上がることが確認できる。

http://127.0.0.1:4000にアクセスするとエミュレータのUIが確認できる。

フロントエンドの修正

apps/frontend/src/shared/lib/auth/firebaseAuth.ts

import {
+ connectAuthEmulator,
  getAuth,
  NextOrObserver,
  onAuthStateChanged,
  signInAnonymously,
  User,
} from 'firebase/auth';
import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY as string,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN as string,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID as string,
};
const firebaseApp = initializeApp(firebaseConfig);
const auth = getAuth(firebaseApp);

+ if (import.meta.env.DEV) {
+   connectAuthEmulator(auth, 'http://127.0.0.1:9099');
+ }

export const signInAnonymous = async () => {
  const ret = await signInAnonymously(auth);
  console.log('signInAnonymous', ret);
  return ret;
};
export const onAuthStateChangedListener = (callback: NextOrObserver<User>) =>
  onAuthStateChanged(auth, callback);
export const getIdToken = async () => {
  const user = auth.currentUser;
  if (user == null) {
    return null;
  }
  return user.getIdToken();
};

バックエンドの修正

apps/backend/.dev.vars

NEON_CONNECTION_STRING=postgresql://<DB_USER_NAME>:<DB_PASSWORD>@<NEON_DB_DOMAIN>.us-west-2.aws.neon.tech/main?sslmode=require
NEO4J_URL=neo4j+s://<NEO4J_INSTANCE_DOMAIN>.databases.neo4j.io
NEO4J_USER=neo4j
NEO4J_PASSWORD=<NEO4J_PASSWORD>

FIREBASE_PROJECT_ID=hogehoge
+ FIREBASE_AUTH_EMULATOR_HOST=127.0.0.1:9099

参考

API Gateway + Lambda+Hasuraの構成をローカルで模倣してテストを行ったメモ
 AWS CDKで作成したAPIGateway+Lambda(Node18)をローカルで動かしてみたメモ