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
370
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.3k
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.5k
Other Decks in Programming
See All in Programming
Lambda(Python)の リファクタリングが好きなんです
komakichi
3
190
趣味全開のAITuber開発
kokushin
0
200
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
110
Dissecting and Reconstructing Ruby Syntactic Structures
ydah
0
640
MCP調べてみました! / Exploring MCP
uhzz
2
2.3k
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
640
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
110
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
750
Memory API : Patterns, Performance et Cas d'Utilisation
josepaumard
0
130
PHPで書いたAPIをGoに書き換えてみた 〜パフォーマンス改善の可能性を探る実験レポート〜
koguuum
0
150
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
160
Being an ethical software engineer
xgouchet
PRO
0
210
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
36
3.2k
Embracing the Ebb and Flow
colly
85
4.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.4k
Adopting Sorbet at Scale
ufuk
76
9.3k
RailsConf 2023
tenderlove
30
1.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
Practical Orchestrator
shlominoach
186
10k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
It's Worth the Effort
3n
184
28k
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 Ͱॻ͔Ε͍ͯΔͱҠߦָ͕ ͳͲ