ハッカソン的に作ったプロダクトを改善し、Firebaseを「ちゃんと」 使っていく話 / Migrate to Firebase friendly architecture

2019年8月2日に #serverlessosaka で発表したスライドです。

Transcript

1. ϋοΧιϯత ʹ ࡞ͬͨ
   ϓϩμΫτΛվળ͠ɺFirebaseΛʮͪΌΜͱʯ
   ࢖͍ͬͯ͘࿩
   2019.08.01 #serverlessosaka Takuma HANATANI (@potato4d)
   

   View Slide

2. HANATANI Takuma
   (@potato4d)
   • Ֆ୩୓ຏ / @potato4d
   • Web Application Developer
   • Work at...
   • LINE Corp: UIT dept. Frontend Engineer / Developer Relations
   • ElevenBack: President, Technical Advisor, Web Engineer
   • ౦ژࡏॅ͚ͩͲؔ੢ग़਎ͳͷͰ͸ͳ͠ʹདྷ·ͨ͠
   

   View Slide

3. Agenda
   1. ࠓ೔࿩͢Ϟϊͱίτͷ঺հ
   2. Firebase ʹدͤ͗͢ͳ͍ 1st release ʹ޲͚ͨ։ൃํ๏ʹ͍ͭͯ
   3. Firebase ΛʮΒ͘͠ʯ࢖Θͳ͍͜ͱʹΑΔ՝୊఺ʹ͍ͭͯ
   4. ঃʑʹ Firebase Λ׆༻͢Δํ๏΁Ҡߦ͢ΔதͰ΍ͬͨ͜ͱ
   5. ·ͱΊ
   

   View Slide

4. Agenda
   1. ࠓ೔࿩͢Ϟϊͱίτͷ঺հ
   2. Firebase ʹدͤ͗͢ͳ͍ 1st release ʹ޲͚ͨ։ൃํ๏ʹ͍ͭͯ
   3. Firebase ΛʮΒ͘͠ʯ࢖Θͳ͍͜ͱʹΑΔ՝୊఺ʹ͍ͭͯ
   4. ঃʑʹ Firebase Λ׆༻͢Δํ๏΁Ҡߦ͢ΔதͰ΍ͬͨ͜ͱ
   5. ·ͱΊ
   

   View Slide

5. ࠓ೔࿩͢Ϟϊͱίτͷ঺հ
   

   View Slide

6. JSLounge Archives
   /https://jslounge-archives.elevenback.jp/
   

   View Slide

7. Nuxt.js, Firebase, Stripe Λϑϧ׆༻ͯ͠αʔόʔϨεͰJAMStackͳECαΠτΛ2೔Ͱ։ൃͨ͠࿩
   https://qiita.com/potato4d/items/13050d5934ff592dc539
   

   View Slide

8. Nuxt.js, Firebase, Stripe Λϑϧ׆༻ͯ͠αʔόʔϨεͰJAMStackͳECαΠτΛ2೔Ͱ։ൃͨ͠࿩
   https://qiita.com/potato4d/items/13050d5934ff592dc539
   

   View Slide

9. JSLounge Archives
   /https://jslounge-archives.elevenback.jp/
   

   View Slide

10. JSLounge Archives
    /https://jslounge-archives.elevenback.jp/
    

    View Slide

11. Agenda
    1. ࠓ೔࿩͢Ϟϊͱίτͷ঺հ
    2. 1st release ʹ࠷దԽͨ͠։ൃͱ Firebase Β͘͠ͳ͞ɾͦͷ՝୊
    3. Cloud Firestore ͱ Cloud Functions ͷ࢖͍෼͚έʔεελσΟ
    4. ࠓ࡞ΔͳΒࣄલʹ΍͓ͬͯ͘΂͖͜ͱɾ଍ճΓέʔεελσΟ
    5. ·ͱΊ
    

    View Slide

12. 1st release ʹ࠷దԽͨ͠։ൃελΠϧʹ͍ͭͯ
    

    View Slide

13. 1st release ͷͱ͖ͷঢ়ଶ
    • ࣮࣭తͳ 2 day ϋοΧιϯ੡඼
    • ʮϋϯζΦϯͷڭࡐΛΦϯϥΠϯֶशʹ΋ར༻Ͱ͖Δମݧʯ͕ΰʔϧ
    • SPA / API + Firebase ߏ੒
    • SPA ͸ Nuxt.js Ͱ API ͸ Firebase Cloud Functions, ೝূ͸ Firebase Auth
    • ܾࡁ͕ؔΘΔγεςϜͷͨΊɺશମతʹ҆શʹ౗͢ํ޲ʹ
    • ෆ੔߹͕ى͜Βͳ͍ɺى͖ͨ৔߹͸ӡӦଆ͕ෆརӹΛඃΔܗͰͷઃܭ
    • ͦͷͨΊ Firestore ͷ௚઀ΞΫηεΛ෧ҹ Ͱ࣮૷
    

    View Slide

14. 1st release ͷͱ͖ͷঢ়ଶ
    • MVP Λߴ଎ʹಧ͚ΔͨΊͷ DX ؀ڥʹ͸ࣄલ౤ࢿ
    • CircleCI ʹΑΔ CI / CD
    • TypeScript Ͱهड़͞Εͨ Functions ͷιʔείʔυ
    • ͦͷଞࡉ͔ͳٕज़બఆʹΑΔվળ͠΍͍͢౔৕
    • ҰํͰύϑΥʔϚϯε͸ Firebase ͰͷϦϦʔεʹ޲͚ͯଥڠ
    • Firestore ͸ Regional ͳ US Region (໪࿦αʔϏε͸೔ຊ޲͚)
    • ҰԠҰճషͬͨίωΫγϣϯΛ࠶ར༻͢ΔͳͲͰ͖Δख͸ଧ͓ͬͯ͘
    

    View Slide

15. ӡ༻ޙʹݦࡏԽ͖ͯͨ͠՝୊ (Ұ෦)
    

    View Slide

16. Cloud Functions ͷ HTTP ϑοΫ ࢖͍͗͢໰୊
    • ͍͍ͩͨ Functions ͳͷ΋ͦΕ͸ͦΕͰͭΒ͍
    • ొ৔ਓ෺͕Ϣʔβʔ৘ใ(ܾࡁ͋Γ), ڭࡐαϚϦ(public), ڭࡐৄࡉ(private), ܾࡁϩά
    ͷ 4 ͭ
    • ۪௚ʹεΩʔϚఆٛ͢ΔͱϦεΩʔͱ͸͍͑ Firebase Β͘͠࡞Δͱ͕͔͔࣌ؒΔ
    • ݁Ռେମ Functions ʹͳͬͨܦҢ
    • ϑϩϯτΤϯυͷ Firebase Auth Ͱ JWT ΛͱΔ → Authorization ϔομʔʹͿͪ͜Ή
    • JWT Λ࢖ͬͯೝূͯ͠ऴΘΓͳͷͰָͳͷ͸ָ
    • ग़ͨ͘͠ͳ͍৘ใΛؾܰʹϚεΫͰ͖Δͷ΋ศར
    

    View Slide

17. Cloud Functions ͷ HTTP ϑοΫ ࢖͍͗͢໰୊
    • ͨͩҰ఺ɺͨͩͨͩແବ͕ଟ͍
    • ͦ΋ͦ΋ಈ࡞͕ॏ͍
    • ਓ͕ଟ͔ͬͨΓίʔϧυελʔτͻ͍ͨͱ͖
    • ඇಉظͰྑ͍৔ॴ͕ಉظతʹͳͬͯ͠·͏
    • Functions ಺Ͱ Promise.all ඦ྾ݓ΍ͬͯ΋ඍົ
    • ੹຿͕σΧ͍
    • ૄ݁߹Ͱͳ͍ܗͰͷػೳఏڙ͸ FaaS ʹ΍ΒͤΔ͜ͱͰ͸ͳ͍
    

    View Slide

18. ٯʹ Firestore ͷϧʔϧ͕ࡶ͗͢໰୊
    service cloud.firestore {
    match /databases/{database}/documents {
    }
    }
    ຊ౰ʹԿ΋ڐՄ͍ͯ͠ͳ͍ঢ়ଶ͔Βελʔτ
    

    View Slide

19. ٯʹ Firestore ͷϧʔϧ͕ࡶ͗͢໰୊
    • Admin SDK Ҏ֎ͩͱԿ΋ͱΕͳ͍
    • ઌఔͷϧʔϧΛࢀর
    • Firebase Admin SDK Λ࢖͑ͳ͍έʔε͕ग़͖ͯͨ
    • ͷͪʹ؅ཧը໘ SPA ͕ര஀
    • ݁Ռ؅ཧऀͨͪͷ uid ͷϋʔυίʔσΟϯάΛ͢Δ͜ͱʹ
    • Firestore ͔ΒऔΕ͹ྑ͍৘ใΛऔΒͣɺٯʹແବ͕૿͍͑ͯΔ
    • ී௨ʹ΍Ί͍ͨ
    

    View Slide

20. ͦͷଞଟ͘ͷ೰Έ΋ঃʑʹղফ……
    ࣮͸ Admin SDK ͷ TS ͷܕ͕ҧ͏
    ࢥͬͨΑΓਓ͕͖ͨΒ Functions ͸΍͸ΓଟগؾʹͳΔ
    ͦ΋ͦ΋৘ใͷऔಘΛશ෦ೝূલఏʹ͚ͯͨ͠ͲγΣΞ URL ࡞ͬͨ
    ෺ཧγϦΞϧΩʔͱͷඥ෇͚΋؅ཧ͍ͨ͠
    

    View Slide

21. ͔࣍Β Firebase Βͨ͘͠͠෦෼Λ͝঺հ
    

    View Slide

22. Agenda
    1. ࠓ೔࿩͢Ϟϊͱίτͷ঺հ
    2. 1st release ʹ࠷దԽͨ͠։ൃͱ Firebase Β͘͠ͳ͞ɾͦͷ՝୊
    3. Cloud Firestore ͱ Cloud Functions ͷ࢖͍෼͚έʔεελσΟ
    4. ࠓ࡞ΔͳΒࣄલʹ΍͓ͬͯ͘΂͖͜ͱɾ଍ճΓέʔεελσΟ
    5. ·ͱΊ
    

    View Slide

23. Cloud Firestore ͱ Cloud Functions ͷ
    ࢖͍෼͚έʔεελσΟ
    

    View Slide

24. Ϣʔβʔ৘ใΛ෼ׂͯ͠ Functions ͷར༻ΛݮΒ͢
    • ೝূࡁϢʔβʔ͕ࣗ਎ͷ৘ใΛऔΔ࣌ʹ௚઀ Firestore ͔ΒऔΔ
    • ઌड़ͷ௨Γܾࡁσʔλͷ౎߹Ͱ Functions ͔Βऔಘ͍ͯͨ͠
    • ܾࡁؔ࿈ͷσʔλͷϚεΫͷͨΊɺ Functions Ͱऔͬͯফ͢
    • ·ͣ͸Ϣʔβʔ৘ใΛ public Ͱྑ͍΋ͷͱྑ͘ͳ͍΋ͷʹ෼ׂ
    • ओʹϩάΠϯޙͷϑΝʔετϏϡʔͷඳըύϑΥʔϚϯε޲্ͷͨΊ
    • Ͳ͏ͯ͠΋ಉظతͳ଴͕ͪൃੜ͢Δ
    • Πϯελϯε਺͕มΘΔͱ͖ͷίʔϧυελʔτ΋ඍົ
    

    View Slide

25. Ϣʔβʔ৘ใΛ෼ׂͯ͠ Functions ͷར༻ΛݮΒ͢
    Ϣʔβʔ͕ಡΜͰ͍͍ܾࡁϑϥά৘ใͱߪೖ݁ՌͷΈΛ࢒ͯ͠෼ׂ
    

    View Slide

26. ͪͳΈʹ
    ܾࡁͷ෦෼͸ Functions ʹՄೳͳݶΓཔΔ
    • ݁Ռతʹେ෦෼͸ Firestore ʹ͕ͨ͠ɺܾࡁίʔυ͸ Functions
    • ܾࡁͷϦΫΤετࣗମ͸ͲͷΈͪ HTTP τϦΨʔͰ࣮૷͢Δ
    • ٯʹݴ͑͹͜͜Ҏ֎͸ HTTP τϦΨʔ͕ͳͯ͘΋ྑ͍
    • ͱ͸͍ܾ͑ࡁΤϥʔ࣌ͷ੾Γ໭͠ɺޙॲཧࣦഊ࣌ͷ੔߹ੑΛߟྀ͢Δͱ
    Ұͭͷ Function Ͱ௨͠Ͱ࣮ߦͯ͠͠·͏΄͏͕ྑ͍
    • Firestore ͷτϥϯβΫγϣϯ΋ར༻ՄೳʹͳΔͳͲϝϦοτ͸େ͖͍
    

    View Slide

27. Agenda
    1. ࠓ೔࿩͢Ϟϊͱίτͷ঺հ
    2. 1st release ʹ࠷దԽͨ͠։ൃͱ Firebase Β͘͠ͳ͞ɾͦͷ՝୊
    3. Cloud Firestore ͱ Cloud Functions ͷ࢖͍෼͚έʔεελσΟ
    4. ࠓ࡞ΔͳΒࣄલʹ΍͓ͬͯ͘΂͖͜ͱɾ଍ճΓέʔεελσΟ
    5. ·ͱΊ
    

    View Slide

28. ࠓ࡞ΔͳΒࣄલʹ
    ΍͓ͬͯ͘΂͖͜ͱɾ଍ճΓέʔεελσΟ
    

    View Slide

29. ؅ཧը໘ͷݖݶ؅ཧΛϚελσʔλ͔ΒҾ͘
    • ։ൃॳظͷ CLI ؅ཧʹݶք͕དྷΔ
    • ΪϦΪϦ·ͰGit ؅ཧͨ͠ JSON Λॻ͖·ͬͯ͘͸ sync ͢Δӡ༻Λͨ͠
    • ӡ༻͢ΔʹͭΕͯ DB Λ৮Εͯཉ͍͠ਓ͕ෳ਺ਓʹͳͬͨ
    • ͦΕʹ൐ͬͯ؅ཧը໘Λ༻ҙ͢Δ͜ͱʹ
    • ݱ࣮ͷϋϯζΦϯͱ࿈ಈ͢ΔͨΊʹγϦΞϧΩʔͷൃߦݖݶ͕ཉ͍͠
    • ࣗ෼Ҏ֎͕ߨࢣΛ΍Δ࣌ʹڭࡐσʔλ͚ͩॻ͖ࠐΈݖݶΛ౉͍ͨ͠
    

    View Slide

30. ؅ཧϢʔβʔͷVJEϕʔεͰΨοπϦϋʔυίʔσΟϯά
    ؅ཧը໘ͷݖݶ؅ཧΛϚελσʔλ͔ΒҾ͘
    

    View Slide

31. • ઐ༻ͷ masterdata/permissions Λ࡞੒
    • string[] ͳ editor ͱ string[] ͳ admin Λ༻ҙ
    • ݖݶൣғ಺ʹ͋ΔϢʔβʔʹ͍ͭͯ͸୭Ͱ΋৮ΕΔΑ͏ʹվળ
    • Firestore ͷϧʔϧΛมߋ͠ɺݖݶΛಡΈࠐΉํ๏ʹมߋ
    • get(/databases/$(database)/documents/masterdata/permissions)
    • rules ͷ get Λ࢖͏͜ͱͰ Firestore ͷσʔλ͔ΒݖݶΛ෇༩Ͱ͖Δ
    • ࠓճ͸ request.token.uid in get() ͱ͢Δ͜ͱͰରԠ
    ؅ཧը໘ͷݖݶ؅ཧΛϚελσʔλ͔ΒҾ͘
    

    View Slide

32. Ұ൪ύϑΥʔϚϯεͷग़ΔϦʔδϣϯʹ͢Δ
    • ͜ΕΛϦϦʔεͨ࣌͠͸ Firestore ͷ౦ژϦʔδϣϯ͕ͳ͔ͬͨ
    • ݁Ռͦ΋ͦ΋ϨΠςϯγ͕͋Δ͔ΒͰ Functions Λڐ༰ͨ͠ܦҢ΋
    • ͷͪ(2019/03)ʹ׬શҠߦΛ࣮ࢪ
    • ࠓ΋ global ͳΒ౦ژϦʔδϣϯͷϓϩδΣΫτʹҠߦਪ঑
    • ϓϩδΣΫτ͔Β৽͘͠࡞Γ௚͢ඞཁ͕͋ΓɺAuth Ҡߦ͕ͭΒ͍ͷͰ஫ҙ
    • ౰࣌͸ Google Cloud ͷϓϩδΣΫτʹมߋ → GCS ʹు͖ग़͢ → GCS
    ͔ΒΠϯϙʔτͷඞཁ༗(࠷৽ͷঢ়گ͸ະΩϟονΞοϓ)
    

    View Slide

33. Ұ൪ύϑΥʔϚϯεͷग़ΔϦʔδϣϯʹ͢Δ
    ଞͷӡӦϝϯόʔ͕ؒҧ͑ͳ͍Α͏ʹࠓ΋ͻͲ͘ࡶͳ໊લͰଘ໋த
    

    View Slide

34. Agenda
    1. ࠓ೔࿩͢Ϟϊͱίτͷ঺հ
    2. 1st release ʹ࠷దԽͨ͠։ൃͱ Firebase Β͘͠ͳ͞ɾͦͷ՝୊
    3. Cloud Firestore ͱ Cloud Functions ͷ࢖͍෼͚έʔεελσΟ
    4. ࠓ࡞ΔͳΒࣄલʹ΍͓ͬͯ͘΂͖͜ͱɾ଍ճΓέʔεελσΟ
    5. ·ͱΊ
    

    View Slide

35. ·ͱΊ
    • ॳظ։ൃʹ͓͍ͯ͸ Functions ʹد͖ͤΔ΋ͷ͸ଥ౰ੑ͕͋ͬͨ
    • ࣮ࡍʹ Firestore ʹҠߦ࣌͸ϧʔϧͷߟྀ࿙ΕͷσάϨͰҰॠμ΢ϯ
    ϩʔυ͠์୊ʹͳΓ͔͚ͨ͜ͱ΋
    • ݁ߏ Firestore ͷςετ͸൥ࡶ͔ͭ؆୯Ͱ͸ͳ͍……
    • ҰํͰ Functions པΓ͸ ͷͪͷଥ౰ੑ΍ύϑΥʔϚϯεʹ՝୊
    • Web ͷ৔߹͸ΦϑϥΠϯͷ Firestore ʹ͍ͭͯߟ͑ͳ͍͍ͯ͘ͷ͕ٹ͍
    • ͱ͸͍͑ Firestore Ͱ׬݁Ͱ͖Δͱ͜Ζ͸ॱ࣍Ҡߦ͠Α͏
    

    View Slide

36. ·ͱΊ
    • ؅ཧը໘ͷ Web UI Λ࡞ΔετʔϦʔ͸ग़ͯ͘ΔͷͰߟྀ͢Δ
    • RDB ͳͲͱҧͬͯγεςϜͷϢʔβʔͰݖݶΛ؅ཧͰ͖ͳ͍ͷͰ͸͡Ί
    ͔Βઃܭ͓ͯ͘͜͠ͱ
    • ࠷௿ݶ member / admin ͘Β͍͸࡞͓ͬͯ͘ͱָ
    • DX Λ޲্ͤ͞Δ౔৕͕͋Δͷ͸εϜʔζͳҠߦʹܨ͕ΔͷͰ ˕
    • CI / CD ؀ڥ͕Ͱ͖͍ͯΔͱվળָ͕ ΍
    • Functions ͕ TypeScript Ͱॻ͔Ε͍ͯΔͱҠߦָ͕ ͳͲ
    

    View Slide