docker-compose × Firebase Emulator でローカル環境構築 株式会社 NoSchool CTO / meijin 1

⽬次 1. ⾃⼰紹介 2. 課題 3. Emulator を docker-compose でセットアップ 1. Firestore 2. Auth 4. 成果 5. 告知 2

⾃⼰紹介 3

⾃⼰紹介 Twitter Account 名⼈さん | マナリンク CTO@Meijin_garden Skill TypeScript(Nuxt/Next/Nest) / Laravel / AWS / Docker / Firebase / GitHub Actions 4

Next.js の LT を先⽇やりました 5

オンライン家庭教師マナリンク 6

Firebase の使いどころ オンライン家庭教師と、学⽣＆親御さんが使うチャットに利⽤ Web(Nuxt.js) ⇔ スマホアプリ(React Native) Firebase Auth & Firestore & Storage を利⽤ (ちなみに) Nuxt.js では composition-api で Firebase ⽤のフックを作成 vue-composition-api で Firestore を扱う react-firebase- hooks ⾵の Composition Function を作った 7

課題と要望 課題 ステージング⽤ Firebase を各開発者がローカルでも利⽤ データやアカウント情報が混ざってややこしい... 要望 1. ローカルで Firebase(Auth/Firestore/Functions)を動かしたい！ 2. Web フロント(Nuxt)、アプリ(React Native)から使いたい！ 3. Web バックエンド(NestJS)からの Admin SDK も動かしたい！ 8

Emulator を docker-compose でセット アップ 9

Emulator の概要 CLI から擬似的な Firebase 環境を起動できる仕組み localhost はもちろん、コンテナ内や CI でも起動できる Auth/Firestore/Functions/Hosting 等に対応 今回は docker-compose 上で動かすことで、Web バックエンド との接続も図る 10

Emulator セットアップの全体的な流れ Docker コンテナ作成 Node.js コンテナの Dockerfile を書く docker-compose.yml で他コンテナのネットワークと接続 コンテナを起動する bash で⼊り込み、エミュレータを起動する ソースコードの書き換え 環境変数を⾒て、Emulator の利⽤可否を分岐する 11

Docker コンテナ作成 FROM node:10-buster RUN apt-get update -y RUN apt-get install -y curl openjdk-11-jre-headless RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - \ && apt-get install -y nodejs RUN npm install -g firebase-tools && mkdir functions COPY ./package.json ./ COPY ./yarn.lock ./ COPY ./functions/package.json ./functions/. COPY ./functions/yarn.lock ./functions/. 12

docker-compose.yml version: '3.7' networks: server: external: name: XXXXXX services: firebase: build: context: . dockerfile: ./docker/local/Dockerfile volumes: - ./:/opt/workspace:cached ports: - 9099:9099 # Auth - 4000:4000 # Emulator Suite UI - 5001:5001 # Cloud Functions - 8080:8080 # Cloud Firestore environment: USE_LOCAL_BACKEND: 1 working_dir: /opt/workspace networks: - server command: bash -c 'yarn && cd functions && yarn && /bin/bash' tty: true 13

docker-compose.yml ポイント Web コンテナの docker-compose network と接続する これにより http://nginx 等で Web に接続できるし、Web からも http://firebase:9099 等の URI で Emulator に接続できる networks: server: external: name: XXXXXX_default 14

Emulator の起動画⾯(Firestore) http://localhost:4000/firestore 15

データの Export/Import 以下のコマンドで Emulator 内のデータは出し⼊れできるので、 基本的なデータを⼊れたら Seeder 代わりに開発メンバー間で共有す るのがおすすめ firebase emulators:export ./data/export_my_data -P default firebase emulators:start -P default --import=./data/export_my_data 16

ソースコードからの呼び出し 17

フロントエンドから呼び出し useAuth/useFirestore/useStorage(Storage は将来に期待)という 命名で export const enabledEmulator = () => process.env.USE_FIREBASE_EMULATOR export const useAuth = () => { auth = firebase.app().auth() if (enabledEmulator()) { auth.useEmulator('http://localhost:9099') } return auth } 18

フロントエンドから呼び出し２ ざっくりこんな感じです useAuth().onAuthStateChanged((user) => { state.firebaseUser = user; }); const collection: CollectionReference = useFirestore().collection( "rooms" ); 19

バックエンド(例：NestJS)からの呼び出し AdminSDK からの接続も Emulator 対応している docker-compose で接続しているのでホスト名は firebase import * as admin from "firebase-admin"; // ... admin.firestore().settings({ host: "firebase:8080", ssl: false, }); 20

React Native Emulator と接続 Nuxt⇔React Native 間でのリ アルタイムチャットがローカル 環境完結で実現できる！ (useAuth 等は同等のコードで 動いた) 21

利⽤上の注意点 22

Storage には未対応 つまり、Storage の動作確認をしたければそこだけステージングの Firebase に引き続きアップロードされる 環境変数の再読み込みが必要で割と⾯倒 各開発者が個⼈⽤の Firebase を持って運⽤するのも⼀案 23

所感 24

所感 思ったより完成度が⾼かった 特に Firestore を hook にした Functions が動くのはちょっと 感動 Admin SDK も Emulator を向いて使える Auth は Custom Token を使った認証もいける 今後の課題 Storage 対応 25

告知 26

CTO(私) が １⼈で全部開発していて寂しい 27

オンライン指導専⽤アプリもやってます 28

参考になったら投げ銭をお願いします！ marpで書いた markdown を(ほぼ)そのまま Zenn に上げました 29

ご清聴ありがとうございました 30