Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ハッカソン的に作ったプロダクトを改善し、Firebaseを「ちゃんと」 使っていく話 / Mi...
Search
potato4d(Takuma HANATANI)
August 01, 2019
Programming
1
2.3k
ハッカソン的に作ったプロダクトを改善し、Firebaseを「ちゃんと」 使っていく話 / Migrate to Firebase friendly architecture
2019年8月2日に #serverlessosaka で発表したスライドです。
potato4d(Takuma HANATANI)
August 01, 2019
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
350
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.2k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.8k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.9k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.2k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.6k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
26k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.4k
Other Decks in Programming
See All in Programming
Ruby on cygwin 2025-02
fd0
0
170
『品質』という言葉が嫌いな理由
korimu
0
180
Writing documentation can be fun with plugin system
okuramasafumi
0
130
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
140
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
8
2.8k
CI改善もDatadogとともに
taumu
0
180
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
640
Pulsar2 を雰囲気で使ってみよう
anoken
0
250
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
180
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
140
Featured
See All Featured
Visualization
eitanlees
146
15k
Facilitating Awesome Meetings
lara
52
6.2k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Site-Speed That Sticks
csswizardry
4
400
A designer walks into a library…
pauljervisheath
205
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Optimizing for Happiness
mojombo
376
70k
Thoughts on Productivity
jonyablonski
69
4.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing for humans not robots
tammielis
250
25k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Transcript
ϋοΧιϯత ʹ ࡞ͬͨ ϓϩμΫτΛվળ͠ɺFirebaseΛʮͪΌΜͱʯ ͍ͬͯ͘ 2019.08.01 #serverlessosaka Takuma HANATANI (@potato4d)
HANATANI Takuma (@potato4d) • Ֆ୩ຏ / @potato4d • Web Application
Developer • Work at... • LINE Corp: UIT dept. Frontend Engineer / Developer Relations • ElevenBack: President, Technical Advisor, Web Engineer • ౦ژࡏॅ͚ͩͲؔग़ͳͷͰͳ͠ʹདྷ·ͨ͠
Agenda 1. ࠓ͢Ϟϊͱίτͷհ 2. Firebase ʹدͤ͗͢ͳ͍ 1st release ʹ͚ͨ։ൃํ๏ʹ͍ͭͯ 3.
Firebase ΛʮΒ͘͠ʯΘͳ͍͜ͱʹΑΔ՝ʹ͍ͭͯ 4. ঃʑʹ Firebase Λ׆༻͢Δํ๏Ҡߦ͢ΔதͰͬͨ͜ͱ 5. ·ͱΊ
Agenda 1. ࠓ͢Ϟϊͱίτͷհ 2. Firebase ʹدͤ͗͢ͳ͍ 1st release ʹ͚ͨ։ൃํ๏ʹ͍ͭͯ 3.
Firebase ΛʮΒ͘͠ʯΘͳ͍͜ͱʹΑΔ՝ʹ͍ͭͯ 4. ঃʑʹ Firebase Λ׆༻͢Δํ๏Ҡߦ͢ΔதͰͬͨ͜ͱ 5. ·ͱΊ
ࠓ͢Ϟϊͱίτͷհ
JSLounge Archives /https://jslounge-archives.elevenback.jp/
Nuxt.js, Firebase, Stripe Λϑϧ׆༻ͯ͠αʔόʔϨεͰJAMStackͳECαΠτΛ2Ͱ։ൃͨ͠ https://qiita.com/potato4d/items/13050d5934ff592dc539
Nuxt.js, Firebase, Stripe Λϑϧ׆༻ͯ͠αʔόʔϨεͰJAMStackͳECαΠτΛ2Ͱ։ൃͨ͠ https://qiita.com/potato4d/items/13050d5934ff592dc539
JSLounge Archives /https://jslounge-archives.elevenback.jp/
JSLounge Archives /https://jslounge-archives.elevenback.jp/
Agenda 1. ࠓ͢Ϟϊͱίτͷհ 2. 1st release ʹ࠷దԽͨ͠։ൃͱ Firebase Β͘͠ͳ͞ɾͦͷ՝ 3.
Cloud Firestore ͱ Cloud Functions ͷ͍͚έʔεελσΟ 4. ࠓ࡞ΔͳΒࣄલʹ͓͖ͬͯ͘͜ͱɾճΓέʔεελσΟ 5. ·ͱΊ
1st release ʹ࠷దԽͨ͠։ൃελΠϧʹ͍ͭͯ
1st release ͷͱ͖ͷঢ়ଶ • ࣮࣭తͳ 2 day ϋοΧιϯ • ʮϋϯζΦϯͷڭࡐΛΦϯϥΠϯֶशʹར༻Ͱ͖Δମݧʯ͕ΰʔϧ
• SPA / API + Firebase ߏ • SPA Nuxt.js Ͱ API Firebase Cloud Functions, ೝূ Firebase Auth • ܾࡁ͕ؔΘΔγεςϜͷͨΊɺશମతʹ҆શʹ͢ํʹ • ෆ߹͕ى͜Βͳ͍ɺى͖ͨ߹ӡӦଆ͕ෆརӹΛඃΔܗͰͷઃܭ • ͦͷͨΊ Firestore ͷΞΫηεΛ෧ҹ Ͱ࣮
1st release ͷͱ͖ͷঢ়ଶ • MVP Λߴʹಧ͚ΔͨΊͷ DX ڥʹࣄલࢿ • CircleCI
ʹΑΔ CI / CD • TypeScript Ͱهड़͞Εͨ Functions ͷιʔείʔυ • ͦͷଞࡉ͔ͳٕज़બఆʹΑΔվળ͍͢͠ • ҰํͰύϑΥʔϚϯε Firebase ͰͷϦϦʔεʹ͚ͯଥڠ • Firestore Regional ͳ US Region (αʔϏεຊ͚) • ҰԠҰճషͬͨίωΫγϣϯΛ࠶ར༻͢ΔͳͲͰ͖Δखଧ͓ͬͯ͘
ӡ༻ޙʹݦࡏԽ͖ͯͨ͠՝ (Ұ෦)
Cloud Functions ͷ HTTP ϑοΫ ͍͗͢ • ͍͍ͩͨ Functions ͳͷͦΕͦΕͰͭΒ͍
• ొਓ͕Ϣʔβʔใ(ܾࡁ͋Γ), ڭࡐαϚϦ(public), ڭࡐৄࡉ(private), ܾࡁϩά ͷ 4 ͭ • ۪ʹεΩʔϚఆٛ͢ΔͱϦεΩʔͱ͍͑ Firebase Β͘͠࡞Δͱ͕͔͔࣌ؒΔ • ݁Ռେମ Functions ʹͳͬͨܦҢ • ϑϩϯτΤϯυͷ Firebase Auth Ͱ JWT ΛͱΔ → Authorization ϔομʔʹͿͪ͜Ή • JWT Λͬͯೝূͯ͠ऴΘΓͳͷͰָͳͷָ • ग़ͨ͘͠ͳ͍ใΛؾܰʹϚεΫͰ͖Δͷศར
Cloud Functions ͷ HTTP ϑοΫ ͍͗͢ • ͨͩҰɺͨͩͨͩແବ͕ଟ͍ • ͦͦಈ࡞͕ॏ͍
• ਓ͕ଟ͔ͬͨΓίʔϧυελʔτͻ͍ͨͱ͖ • ඇಉظͰྑ͍ॴ͕ಉظతʹͳͬͯ͠·͏ • Functions Ͱ Promise.all ඦ྾ݓͬͯඍົ • ͕σΧ͍ • ૄ݁߹Ͱͳ͍ܗͰͷػೳఏڙ FaaS ʹΒͤΔ͜ͱͰͳ͍
ٯʹ Firestore ͷϧʔϧ͕ࡶ͗͢ service cloud.firestore { match /databases/{database}/documents { }
} ຊʹԿڐՄ͍ͯ͠ͳ͍ঢ়ଶ͔Βελʔτ
ٯʹ Firestore ͷϧʔϧ͕ࡶ͗͢ • Admin SDK Ҏ֎ͩͱԿͱΕͳ͍ • ઌఔͷϧʔϧΛࢀর •
Firebase Admin SDK Λ͑ͳ͍έʔε͕ग़͖ͯͨ • ͷͪʹཧը໘ SPA ͕ര • ݁Ռཧऀͨͪͷ uid ͷϋʔυίʔσΟϯάΛ͢Δ͜ͱʹ • Firestore ͔ΒऔΕྑ͍ใΛऔΒͣɺٯʹແବ͕૿͍͑ͯΔ • ී௨ʹΊ͍ͨ
ͦͷଞଟ͘ͷΈঃʑʹղফ…… ࣮ Admin SDK ͷ TS ͷܕ͕ҧ͏ ࢥͬͨΑΓਓ͕͖ͨΒ Functions ΓଟগؾʹͳΔ
ͦͦใͷऔಘΛશ෦ೝূલఏʹ͚ͯͨ͠ͲγΣΞ URL ࡞ͬͨ ཧγϦΞϧΩʔͱͷඥ͚ཧ͍ͨ͠
͔࣍Β Firebase Βͨ͘͠͠෦Λ͝հ
Agenda 1. ࠓ͢Ϟϊͱίτͷհ 2. 1st release ʹ࠷దԽͨ͠։ൃͱ Firebase Β͘͠ͳ͞ɾͦͷ՝ 3.
Cloud Firestore ͱ Cloud Functions ͷ͍͚έʔεελσΟ 4. ࠓ࡞ΔͳΒࣄલʹ͓͖ͬͯ͘͜ͱɾճΓέʔεελσΟ 5. ·ͱΊ
Cloud Firestore ͱ Cloud Functions ͷ ͍͚έʔεελσΟ
ϢʔβʔใΛׂͯ͠ Functions ͷར༻ΛݮΒ͢ • ೝূࡁϢʔβʔ͕ࣗͷใΛऔΔ࣌ʹ Firestore ͔ΒऔΔ • ઌड़ͷ௨Γܾࡁσʔλͷ߹Ͱ Functions
͔Βऔಘ͍ͯͨ͠ • ܾࡁؔ࿈ͷσʔλͷϚεΫͷͨΊɺ Functions Ͱऔͬͯফ͢ • ·ͣϢʔβʔใΛ public Ͱྑ͍ͷͱྑ͘ͳ͍ͷʹׂ • ओʹϩάΠϯޙͷϑΝʔετϏϡʔͷඳըύϑΥʔϚϯε্ͷͨΊ • Ͳ͏ͯ͠ಉظతͳ͕ͪൃੜ͢Δ • Πϯελϯε͕มΘΔͱ͖ͷίʔϧυελʔτඍົ
ϢʔβʔใΛׂͯ͠ Functions ͷར༻ΛݮΒ͢ Ϣʔβʔ͕ಡΜͰ͍͍ܾࡁϑϥάใͱߪೖ݁ՌͷΈΛׂͯ͠
ͪͳΈʹ ܾࡁͷ෦ Functions ʹՄೳͳݶΓཔΔ • ݁Ռతʹେ෦ Firestore ʹ͕ͨ͠ɺܾࡁίʔυ Functions •
ܾࡁͷϦΫΤετࣗମͲͷΈͪ HTTP τϦΨʔͰ࣮͢Δ • ٯʹݴ͑͜͜Ҏ֎ HTTP τϦΨʔ͕ͳͯ͘ྑ͍ • ͱ͍ܾ͑ࡁΤϥʔ࣌ͷΓ͠ɺޙॲཧࣦഊ࣌ͷ߹ੑΛߟྀ͢Δͱ Ұͭͷ Function Ͱ௨͠Ͱ࣮ߦͯ͠͠·͏΄͏͕ྑ͍ • Firestore ͷτϥϯβΫγϣϯར༻ՄೳʹͳΔͳͲϝϦοτେ͖͍
Agenda 1. ࠓ͢Ϟϊͱίτͷհ 2. 1st release ʹ࠷దԽͨ͠։ൃͱ Firebase Β͘͠ͳ͞ɾͦͷ՝ 3.
Cloud Firestore ͱ Cloud Functions ͷ͍͚έʔεελσΟ 4. ࠓ࡞ΔͳΒࣄલʹ͓͖ͬͯ͘͜ͱɾճΓέʔεελσΟ 5. ·ͱΊ
ࠓ࡞ΔͳΒࣄલʹ ͓͖ͬͯ͘͜ͱɾճΓέʔεελσΟ
ཧը໘ͷݖݶཧΛϚελσʔλ͔ΒҾ͘ • ։ൃॳظͷ CLI ཧʹݶք͕དྷΔ • ΪϦΪϦ·ͰGit ཧͨ͠ JSON Λॻ͖·ͬͯ͘
sync ͢Δӡ༻Λͨ͠ • ӡ༻͢ΔʹͭΕͯ DB Λ৮Εͯཉ͍͠ਓ͕ෳਓʹͳͬͨ • ͦΕʹͬͯཧը໘Λ༻ҙ͢Δ͜ͱʹ • ݱ࣮ͷϋϯζΦϯͱ࿈ಈ͢ΔͨΊʹγϦΞϧΩʔͷൃߦݖݶ͕ཉ͍͠ • ࣗҎ֎͕ߨࢣΛΔ࣌ʹڭࡐσʔλ͚ͩॻ͖ࠐΈݖݶΛ͍ͨ͠
ཧϢʔβʔͷVJEϕʔεͰΨοπϦϋʔυίʔσΟϯά ཧը໘ͷݖݶཧΛϚελσʔλ͔ΒҾ͘
• ઐ༻ͷ masterdata/permissions Λ࡞ • string[] ͳ editor ͱ string[]
ͳ admin Λ༻ҙ • ݖݶൣғʹ͋ΔϢʔβʔʹ͍ͭͯ୭Ͱ৮ΕΔΑ͏ʹվળ • Firestore ͷϧʔϧΛมߋ͠ɺݖݶΛಡΈࠐΉํ๏ʹมߋ • get(/databases/$(database)/documents/masterdata/permissions) • rules ͷ get Λ͏͜ͱͰ Firestore ͷσʔλ͔ΒݖݶΛ༩Ͱ͖Δ • ࠓճ request.token.uid in get() ͱ͢Δ͜ͱͰରԠ ཧը໘ͷݖݶཧΛϚελσʔλ͔ΒҾ͘
Ұ൪ύϑΥʔϚϯεͷग़ΔϦʔδϣϯʹ͢Δ • ͜ΕΛϦϦʔεͨ࣌͠ Firestore ͷ౦ژϦʔδϣϯ͕ͳ͔ͬͨ • ݁ՌͦͦϨΠςϯγ͕͋Δ͔ΒͰ Functions Λڐ༰ͨ͠ܦҢ •
ͷͪ(2019/03)ʹશҠߦΛ࣮ࢪ • ࠓ global ͳΒ౦ژϦʔδϣϯͷϓϩδΣΫτʹҠߦਪ • ϓϩδΣΫτ͔Β৽͘͠࡞Γ͢ඞཁ͕͋ΓɺAuth Ҡߦ͕ͭΒ͍ͷͰҙ • ࣌ Google Cloud ͷϓϩδΣΫτʹมߋ → GCS ʹు͖ग़͢ → GCS ͔ΒΠϯϙʔτͷඞཁ༗(࠷৽ͷঢ়گະΩϟονΞοϓ)
Ұ൪ύϑΥʔϚϯεͷग़ΔϦʔδϣϯʹ͢Δ ଞͷӡӦϝϯόʔ͕ؒҧ͑ͳ͍Α͏ʹࠓͻͲ͘ࡶͳ໊લͰଘ໋த
Agenda 1. ࠓ͢Ϟϊͱίτͷհ 2. 1st release ʹ࠷దԽͨ͠։ൃͱ Firebase Β͘͠ͳ͞ɾͦͷ՝ 3.
Cloud Firestore ͱ Cloud Functions ͷ͍͚έʔεελσΟ 4. ࠓ࡞ΔͳΒࣄલʹ͓͖ͬͯ͘͜ͱɾճΓέʔεελσΟ 5. ·ͱΊ
·ͱΊ • ॳظ։ൃʹ͓͍ͯ Functions ʹد͖ͤΔͷଥੑ͕͋ͬͨ • ࣮ࡍʹ Firestore ʹҠߦ࣌ϧʔϧͷߟྀ࿙ΕͷσάϨͰҰॠμϯ ϩʔυ͠์ʹͳΓ͔͚ͨ͜ͱ
• ݁ߏ Firestore ͷςετࡶ͔ͭ؆୯Ͱͳ͍…… • ҰํͰ Functions པΓ ͷͪͷଥੑύϑΥʔϚϯεʹ՝ • Web ͷ߹ΦϑϥΠϯͷ Firestore ʹ͍ͭͯߟ͑ͳ͍͍ͯ͘ͷ͕ٹ͍ • ͱ͍͑ Firestore Ͱ݁Ͱ͖Δͱ͜Ζॱ࣍Ҡߦ͠Α͏
·ͱΊ • ཧը໘ͷ Web UI Λ࡞ΔετʔϦʔग़ͯ͘ΔͷͰߟྀ͢Δ • RDB ͳͲͱҧͬͯγεςϜͷϢʔβʔͰݖݶΛཧͰ͖ͳ͍ͷͰ͡Ί ͔Βઃܭ͓ͯ͘͜͠ͱ
• ࠷ݶ member / admin ͘Β͍࡞͓ͬͯ͘ͱָ • DX Λ্ͤ͞Δ͕͋ΔͷεϜʔζͳҠߦʹܨ͕ΔͷͰ ˕ • CI / CD ڥ͕Ͱ͖͍ͯΔͱվળָ͕ • Functions ͕ TypeScript Ͱॻ͔Ε͍ͯΔͱҠߦָ͕ ͳͲ