Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
docker-compose × Firebase Emulator でローカル環境構築
meijin
November 30, 2020
Programming
0
350
docker-compose × Firebase Emulator でローカル環境構築
meijin
November 30, 2020
Tweet
Share
More Decks by meijin
See All by meijin
texmeijin
0
2
texmeijin
3
110
texmeijin
0
360
texmeijin
0
34
texmeijin
3
820
Other Decks in Programming
See All in Programming
kubode
0
190
mizdra
7
4.8k
zsmb
2
110
hirotokirimaru
1
410
ajstarks
2
550
akatsukinewgrad
0
160
fkubota
1
390
showwin
0
120
momofff
0
160
junmikai
0
290
hanakla
2
3k
attsumi
1
420
Featured
See All Featured
trallard
13
640
jonrohan
1021
380k
mza
80
4.1k
samanthasiow
56
6.3k
wjessup
338
16k
jponch
103
5k
sferik
609
54k
philhawksworth
190
17k
jacobian
255
20k
danielanewman
200
19k
chriscoyier
499
130k
rocio
155
11k
Transcript
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
フロントエンドから呼び出し2 ざっくりこんな感じです useAuth().onAuthStateChanged((user) => { state.firebaseUser = user; }); const
collection: CollectionReference<Room> = 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(私) が 1⼈で全部開発していて寂しい 27
オンライン指導専⽤アプリもやってます 28
参考になったら投げ銭をお願いします! marpで書いた markdown を(ほぼ)そのまま Zenn に上げました 29
ご清聴ありがとうございました 30