Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

7fccfb690a818ed2f3a15fc21d426d5a?s=47 meijin
November 30, 2020

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

7fccfb690a818ed2f3a15fc21d426d5a?s=128

meijin

November 30, 2020
Tweet

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. フロントエンドから呼び出し2 ざっくりこんな感じです 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(私) が 1⼈で全部開発していて寂しい 27

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

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

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