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.2k
ハッカソン的に作ったプロダクトを改善し、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
340
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.1k
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.8k
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
3.9k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
26k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.4k
Other Decks in Programming
See All in Programming
Jaspr Dart Web Framework 박제창 @Devfest 2024
itsmedreamwalker
0
150
ATDDで素早く安定した デリバリを実現しよう!
tonnsama
1
1.9k
HTML/CSS超絶浅い説明
yuki0329
0
190
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
2.1k
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
1.8k
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.4k
return文におけるstd::moveについて
onihusube
1
1.4k
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
170
PHPカンファレンス 2024|共創を加速するための若手の技術挑戦
weddingpark
0
140
ErdMap: Thinking about a map for Rails applications
makicamel
1
610
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
630
QA環境で誰でも自由自在に現在時刻を操って検証できるようにした話
kalibora
1
140
Featured
See All Featured
A Tale of Four Properties
chriscoyier
157
23k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
A better future with KSS
kneath
238
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
500
Designing Dashboards & Data Visualisations in Web Apps
destraynor
230
52k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Faster Mobile Websites
deanohume
305
30k
Docker and Python
trallard
43
3.2k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
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 Ͱॻ͔Ε͍ͯΔͱҠߦָ͕ ͳͲ