概要
前回は、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 を使えるぞ！！を参考に設定。
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
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を修正する。
{
"projects": {
"default": "hogehoge"
}
}
Docker内のポートにアクセスできるよう、作成された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が確認できる。
フロントエンドの修正
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();
};
バックエンドの修正
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)をローカルで動かしてみたメモ