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
390
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.3k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.9k
終わりゆく 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.7k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4.1k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.5k
Other Decks in Programming
See All in Programming
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
270
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.8k
生成AIで日々のエラー調査を進めたい
yuyaabo
0
610
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
3
2k
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
3k
Select API from Kotlin Coroutine
jmatsu
1
180
從零到一:搭建你的第一個 Observability 平台
blueswen
1
960
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
業務自動化をJavaとSeleniumとAWS Lambdaで実現した方法
greenflagproject
1
120
無関心の谷
kanayannet
0
180
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
800
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Typedesign – Prime Four
hannesfritz
42
2.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Balancing Empowerment & Direction
lara
1
340
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
GraphQLとの向き合い方2022年版
quramy
46
14k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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 Ͱॻ͔Ε͍ͯΔͱҠߦָ͕ ͳͲ