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
4k
docker-compose × Firebase Emulator でローカル環境構築
meijin
November 30, 2020
Tweet
Share
More Decks by meijin
See All by meijin
初めてエンジニアインターンの育成に取り組んで考えたこと
texmeijin
0
760
ESLintの独自ルール作成にチャレンジした話
texmeijin
2
180
シード期スタートアップで 2年半カイゼンしてきたこと
texmeijin
1
120
一部上場企業からベンチャー転職のBefore/After
texmeijin
0
280
次世代フロントエンドツールVite入門会
texmeijin
0
430
microCMSを使った ビジネスサイドとの コミュニケーション
texmeijin
2
550
国産OSS_aspida_の_公認エバンジェリストに_任命してもらった話.pdf
texmeijin
1
180
React Native×Firebaseで オンライン指導用の チャットアプリを開発している話
texmeijin
0
1.6k
管理画面付きAPIが簡単に作れるmicroCMSとの向き合い方まとめ
texmeijin
1
900
Other Decks in Programming
See All in Programming
ebpfとWASMに思いを馳せる2022 / techfeed-conference-2022-ebpf-wasm-amsy810
masayaaoyama
1
780
byte列のbit表現を得るencodingライブラリ作った
convto
1
210
CIでAndroidUIテストの様子を録画してみた
mkeeda
0
190
Licences open source : entre guerre de clochers et radicalité
pylapp
2
380
iOSアプリの技術選択2022
tattn
6
2.6k
Viteはいいぞ/Vite is Good
dojineko
1
110
dbtとBigQueryで始めるData Vault入門
kazk1018
0
260
tfcon2022_Web3Dひとめぐり.pdf
emadurandal
0
1.1k
スモールチームがAmazon Cognitoでコスパよく作るサービス間連携認証
tacke_jp
2
940
How useEvent would change our applications
koba04
1
1.8k
TechFeed Conference 2022 - Kotlin Experimental
jmatsu
0
870
近況PHP / PHP in now a days
uzulla
4
2k
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
103
16k
Agile that works and the tools we love
rasmusluckow
319
19k
Code Reviewing Like a Champion
maltzj
506
37k
Clear Off the Table
cherdarchuk
79
280k
Facilitating Awesome Meetings
lara
29
3.9k
Six Lessons from altMBA
skipperchong
14
1.3k
It's Worth the Effort
3n
172
25k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
Typedesign – Prime Four
hannesfritz
33
1.3k
Atom: Resistance is Futile
akmur
255
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
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