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を「ちゃんと」 使っていく話 / Migrate to Firebase friendly architecture
Search
potato4d(Hanatani Takuma)
August 01, 2019
Programming
1
2.1k
ハッカソン的に作ったプロダクトを改善し、Firebaseを「ちゃんと」 使っていく話 / Migrate to Firebase friendly architecture
2019年8月2日に #serverlessosaka で発表したスライドです。
potato4d(Hanatani Takuma)
August 01, 2019
Tweet
Share
More Decks by potato4d(Hanatani Takuma)
See All by potato4d(Hanatani Takuma)
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
1.7k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.6k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.5k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
980
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.3k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
3.6k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
25k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.1k
気軽な Node.js バックエンド開発には TypeORM がちょうどいい #kng7 / introduce-typeorm
potato4d
9
4.2k
Other Decks in Programming
See All in Programming
Elm 0.19.0 Changes
bkuhlmann
0
490
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
200
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
350
Node.js v22 で変わること
yosuke_furukawa
PRO
9
3.5k
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
GitHub Copilotのススメ
marcy731
1
200
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
540
Let's learn code review
riofujimon
2
400
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
雑に思考を整理する技術と効能
konifar
60
29k
Code Reviews
bkuhlmann
4
890
Featured
See All Featured
Faster Mobile Websites
deanohume
299
30k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
How GitHub (no longer) Works
holman
304
140k
Why Our Code Smells
bkeepers
PRO
331
56k
A Philosophy of Restraint
colly
197
16k
Fireside Chat
paigeccino
21
2.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Rails Girls Zürich Keynote
gr2m
91
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Writing Fast Ruby
sferik
621
60k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
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 Ͱॻ͔Ε͍ͯΔͱҠߦָ͕ ͳͲ