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
1k
docker-compose × Firebase Emulator でローカル環境構築
meijin
November 30, 2020
Tweet
Share
More Decks by meijin
See All by meijin
texmeijin
0
490
texmeijin
1
580
texmeijin
3
150
texmeijin
0
850
texmeijin
0
38
texmeijin
3
900
Other Decks in Programming
See All in Programming
manfredsteyer
PRO
2
260
dora1998
0
180
kubode
2
190
rockname
1
330
daipresents
0
340
takuyaa
4
490
minodriven
37
29k
tmyk110
1
170
kulkarniankita09
0
270
marcoow
0
170
gtongy
0
480
mrtc0
1
190
Featured
See All Featured
bryan
32
3.5k
bkeepers
PRO
322
53k
brianwarren
82
4.8k
trishagee
24
3k
stephaniewalter
262
11k
myddelton
109
11k
ddemaree
273
31k
sachag
267
17k
thoeni
4
670
brettharned
93
3.1k
swwweet
206
6.9k
morganepeng
21
1.3k
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