docker-compose × Firebase Emulator でローカル環境構築

Transcript

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

   1

2. ⽬次 1. ⾃⼰紹介 2. 課題 3. Emulator を docker-compose でセットアップ

   1. Firestore 2. Auth 4. 成果 5. 告知 2

3. ⾃⼰紹介 3

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

   Laravel / AWS / Docker / Firebase / GitHub Actions 4

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

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

7. 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

8. 課題と要望 課題 ステージング⽤ Firebase を各開発者がローカルでも利⽤ データやアカウント情報が混ざってややこしい... 要望 1. ローカルで Firebase(Auth/Firestore/Functions)を動かしたい！

   2. Web フロント(Nuxt)、アプリ(React Native)から使いたい！ 3. Web バックエンド(NestJS)からの Admin SDK も動かしたい！ 8

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

10. Emulator の概要 CLI から擬似的な Firebase 環境を起動できる仕組み localhost はもちろん、コンテナ内や CI でも起動できる

    Auth/Firestore/Functions/Hosting 等に対応 今回は docker-compose 上で動かすことで、Web バックエンド との接続も図る 10

11. Emulator セットアップの全体的な流れ Docker コンテナ作成 Node.js コンテナの Dockerfile を書く docker-compose.yml で他コンテナのネットワークと接続

    コンテナを起動する bash で⼊り込み、エミュレータを起動する ソースコードの書き換え 環境変数を⾒て、Emulator の利⽤可否を分岐する 11

12. 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

13. 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

14. docker-compose.yml ポイント Web コンテナの docker-compose network と接続する これにより http://nginx 等で

    Web に接続できるし、Web からも http://firebase:9099 等の URI で Emulator に接続できる networks: server: external: name: XXXXXX_default 14

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

16. データの 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. ソースコードからの呼び出し 17

18. フロントエンドから呼び出し 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

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

    collection: CollectionReference<Room> = useFirestore().collection( "rooms" ); 19

20. バックエンド(例：NestJS)からの呼び出し AdminSDK からの接続も Emulator 対応している docker-compose で接続しているのでホスト名は firebase import *

    as admin from "firebase-admin"; // ... admin.firestore().settings({ host: "firebase:8080", ssl: false, }); 20

21. React Native Emulator と接続 Nuxt⇔React Native 間でのリ アルタイムチャットがローカル 環境完結で実現できる！ (useAuth

    等は同等のコードで 動いた) 21

22. 利⽤上の注意点 22

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

    23

24. 所感 24

25. 所感 思ったより完成度が⾼かった 特に Firestore を hook にした Functions が動くのはちょっと 感動

    Admin SDK も Emulator を向いて使える Auth は Custom Token を使った認証もいける 今後の課題 Storage 対応 25

26. 告知 26

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

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

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

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