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

Transcript

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

2. HANATANI Takuma (@potato4d) • Ֆ୩୓ຏ / @potato4d • Web Application

   Developer • Work at... • LINE Corp: UIT dept. Frontend Engineer / Developer Relations • ElevenBack: President, Technical Advisor, Web Engineer • ౦ژࡏॅ͚ͩͲؔ੢ग़਎ͳͷͰ͸ͳ͠ʹདྷ·ͨ͠

3. Agenda 1. ࠓ೔࿩͢Ϟϊͱίτͷ঺հ 2. Firebase ʹدͤ͗͢ͳ͍ 1st release ʹ޲͚ͨ։ൃํ๏ʹ͍ͭͯ 3.

   Firebase ΛʮΒ͘͠ʯ࢖Θͳ͍͜ͱʹΑΔ՝୊఺ʹ͍ͭͯ 4. ঃʑʹ Firebase Λ׆༻͢Δํ๏΁Ҡߦ͢ΔதͰ΍ͬͨ͜ͱ 5. ·ͱΊ

4. Agenda 1. ࠓ೔࿩͢Ϟϊͱίτͷ঺հ 2. Firebase ʹدͤ͗͢ͳ͍ 1st release ʹ޲͚ͨ։ൃํ๏ʹ͍ͭͯ 3.

   Firebase ΛʮΒ͘͠ʯ࢖Θͳ͍͜ͱʹΑΔ՝୊఺ʹ͍ͭͯ 4. ঃʑʹ Firebase Λ׆༻͢Δํ๏΁Ҡߦ͢ΔதͰ΍ͬͨ͜ͱ 5. ·ͱΊ

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

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

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

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

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

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

11. Agenda 1. ࠓ೔࿩͢Ϟϊͱίτͷ঺հ 2. 1st release ʹ࠷దԽͨ͠։ൃͱ Firebase Β͘͠ͳ͞ɾͦͷ՝୊ 3.

    Cloud Firestore ͱ Cloud Functions ͷ࢖͍෼͚έʔεελσΟ 4. ࠓ࡞ΔͳΒࣄલʹ΍͓ͬͯ͘΂͖͜ͱɾ଍ճΓέʔεελσΟ 5. ·ͱΊ

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

13. 1st release ͷͱ͖ͷঢ়ଶ • ࣮࣭తͳ 2 day ϋοΧιϯ੡඼ • ʮϋϯζΦϯͷڭࡐΛΦϯϥΠϯֶशʹ΋ར༻Ͱ͖Δମݧʯ͕ΰʔϧ

    • SPA / API + Firebase ߏ੒ • SPA ͸ Nuxt.js Ͱ API ͸ Firebase Cloud Functions, ೝূ͸ Firebase Auth • ܾࡁ͕ؔΘΔγεςϜͷͨΊɺશମతʹ҆શʹ౗͢ํ޲ʹ • ෆ੔߹͕ى͜Βͳ͍ɺى͖ͨ৔߹͸ӡӦଆ͕ෆརӹΛඃΔܗͰͷઃܭ • ͦͷͨΊ Firestore ͷ௚઀ΞΫηεΛ෧ҹ Ͱ࣮૷

14. 1st release ͷͱ͖ͷঢ়ଶ • MVP Λߴ଎ʹಧ͚ΔͨΊͷ DX ؀ڥʹ͸ࣄલ౤ࢿ • CircleCI

    ʹΑΔ CI / CD • TypeScript Ͱهड़͞Εͨ Functions ͷιʔείʔυ • ͦͷଞࡉ͔ͳٕज़બఆʹΑΔվળ͠΍͍͢౔৕ • ҰํͰύϑΥʔϚϯε͸ Firebase ͰͷϦϦʔεʹ޲͚ͯଥڠ • Firestore ͸ Regional ͳ US Region (໪࿦αʔϏε͸೔ຊ޲͚) • ҰԠҰճషͬͨίωΫγϣϯΛ࠶ར༻͢ΔͳͲͰ͖Δख͸ଧ͓ͬͯ͘

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

16. Cloud Functions ͷ HTTP ϑοΫ ࢖͍͗͢໰୊ • ͍͍ͩͨ Functions ͳͷ΋ͦΕ͸ͦΕͰͭΒ͍

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

17. Cloud Functions ͷ HTTP ϑοΫ ࢖͍͗͢໰୊ • ͨͩҰ఺ɺͨͩͨͩແବ͕ଟ͍ • ͦ΋ͦ΋ಈ࡞͕ॏ͍

    • ਓ͕ଟ͔ͬͨΓίʔϧυελʔτͻ͍ͨͱ͖ • ඇಉظͰྑ͍৔ॴ͕ಉظతʹͳͬͯ͠·͏ • Functions ಺Ͱ Promise.all ඦ྾ݓ΍ͬͯ΋ඍົ • ੹຿͕σΧ͍ • ૄ݁߹Ͱͳ͍ܗͰͷػೳఏڙ͸ FaaS ʹ΍ΒͤΔ͜ͱͰ͸ͳ͍

18. ٯʹ Firestore ͷϧʔϧ͕ࡶ͗͢໰୊ service cloud.firestore { match /databases/{database}/documents { }

    } ຊ౰ʹԿ΋ڐՄ͍ͯ͠ͳ͍ঢ়ଶ͔Βελʔτ

19. ٯʹ Firestore ͷϧʔϧ͕ࡶ͗͢໰୊ • Admin SDK Ҏ֎ͩͱԿ΋ͱΕͳ͍ • ઌఔͷϧʔϧΛࢀর •

    Firebase Admin SDK Λ࢖͑ͳ͍έʔε͕ग़͖ͯͨ • ͷͪʹ؅ཧը໘ SPA ͕ര஀ • ݁Ռ؅ཧऀͨͪͷ uid ͷϋʔυίʔσΟϯάΛ͢Δ͜ͱʹ • Firestore ͔ΒऔΕ͹ྑ͍৘ใΛऔΒͣɺٯʹແବ͕૿͍͑ͯΔ • ී௨ʹ΍Ί͍ͨ

20. ͦͷଞଟ͘ͷ೰Έ΋ঃʑʹղফ…… ࣮͸ Admin SDK ͷ TS ͷܕ͕ҧ͏ ࢥͬͨΑΓਓ͕͖ͨΒ Functions ͸΍͸ΓଟগؾʹͳΔ

    ͦ΋ͦ΋৘ใͷऔಘΛશ෦ೝূલఏʹ͚ͯͨ͠ͲγΣΞ URL ࡞ͬͨ ෺ཧγϦΞϧΩʔͱͷඥ෇͚΋؅ཧ͍ͨ͠

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

22. Agenda 1. ࠓ೔࿩͢Ϟϊͱίτͷ঺հ 2. 1st release ʹ࠷దԽͨ͠։ൃͱ Firebase Β͘͠ͳ͞ɾͦͷ՝୊ 3.

    Cloud Firestore ͱ Cloud Functions ͷ࢖͍෼͚έʔεελσΟ 4. ࠓ࡞ΔͳΒࣄલʹ΍͓ͬͯ͘΂͖͜ͱɾ଍ճΓέʔεελσΟ 5. ·ͱΊ

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

24. Ϣʔβʔ৘ใΛ෼ׂͯ͠ Functions ͷར༻ΛݮΒ͢ • ೝূࡁϢʔβʔ͕ࣗ਎ͷ৘ใΛऔΔ࣌ʹ௚઀ Firestore ͔ΒऔΔ • ઌड़ͷ௨Γܾࡁσʔλͷ౎߹Ͱ Functions

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

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

26. ͪͳΈʹ ܾࡁͷ෦෼͸ Functions ʹՄೳͳݶΓཔΔ • ݁Ռతʹେ෦෼͸ Firestore ʹ͕ͨ͠ɺܾࡁίʔυ͸ Functions •

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

27. Agenda 1. ࠓ೔࿩͢Ϟϊͱίτͷ঺հ 2. 1st release ʹ࠷దԽͨ͠։ൃͱ Firebase Β͘͠ͳ͞ɾͦͷ՝୊ 3.

    Cloud Firestore ͱ Cloud Functions ͷ࢖͍෼͚έʔεελσΟ 4. ࠓ࡞ΔͳΒࣄલʹ΍͓ͬͯ͘΂͖͜ͱɾ଍ճΓέʔεελσΟ 5. ·ͱΊ

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

29. ؅ཧը໘ͷݖݶ؅ཧΛϚελσʔλ͔ΒҾ͘ • ։ൃॳظͷ CLI ؅ཧʹݶք͕དྷΔ • ΪϦΪϦ·ͰGit ؅ཧͨ͠ JSON Λॻ͖·ͬͯ͘͸

    sync ͢Δӡ༻Λͨ͠ • ӡ༻͢ΔʹͭΕͯ DB Λ৮Εͯཉ͍͠ਓ͕ෳ਺ਓʹͳͬͨ • ͦΕʹ൐ͬͯ؅ཧը໘Λ༻ҙ͢Δ͜ͱʹ • ݱ࣮ͷϋϯζΦϯͱ࿈ಈ͢ΔͨΊʹγϦΞϧΩʔͷൃߦݖݶ͕ཉ͍͠ • ࣗ෼Ҏ֎͕ߨࢣΛ΍Δ࣌ʹڭࡐσʔλ͚ͩॻ͖ࠐΈݖݶΛ౉͍ͨ͠

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

31. • ઐ༻ͷ masterdata/permissions Λ࡞੒ • string[] ͳ editor ͱ string[]

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

32. Ұ൪ύϑΥʔϚϯεͷग़ΔϦʔδϣϯʹ͢Δ • ͜ΕΛϦϦʔεͨ࣌͠͸ Firestore ͷ౦ژϦʔδϣϯ͕ͳ͔ͬͨ • ݁Ռͦ΋ͦ΋ϨΠςϯγ͕͋Δ͔ΒͰ Functions Λڐ༰ͨ͠ܦҢ΋ •

    ͷͪ(2019/03)ʹ׬શҠߦΛ࣮ࢪ • ࠓ΋ global ͳΒ౦ژϦʔδϣϯͷϓϩδΣΫτʹҠߦਪ঑ • ϓϩδΣΫτ͔Β৽͘͠࡞Γ௚͢ඞཁ͕͋ΓɺAuth Ҡߦ͕ͭΒ͍ͷͰ஫ҙ • ౰࣌͸ Google Cloud ͷϓϩδΣΫτʹมߋ → GCS ʹు͖ग़͢ → GCS ͔ΒΠϯϙʔτͷඞཁ༗(࠷৽ͷঢ়گ͸ະΩϟονΞοϓ)

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

34. Agenda 1. ࠓ೔࿩͢Ϟϊͱίτͷ঺հ 2. 1st release ʹ࠷దԽͨ͠։ൃͱ Firebase Β͘͠ͳ͞ɾͦͷ՝୊ 3.

    Cloud Firestore ͱ Cloud Functions ͷ࢖͍෼͚έʔεελσΟ 4. ࠓ࡞ΔͳΒࣄલʹ΍͓ͬͯ͘΂͖͜ͱɾ଍ճΓέʔεελσΟ 5. ·ͱΊ

35. ·ͱΊ • ॳظ։ൃʹ͓͍ͯ͸ Functions ʹد͖ͤΔ΋ͷ͸ଥ౰ੑ͕͋ͬͨ • ࣮ࡍʹ Firestore ʹҠߦ࣌͸ϧʔϧͷߟྀ࿙ΕͷσάϨͰҰॠμ΢ϯ ϩʔυ͠์୊ʹͳΓ͔͚ͨ͜ͱ΋

    • ݁ߏ Firestore ͷςετ͸൥ࡶ͔ͭ؆୯Ͱ͸ͳ͍…… • ҰํͰ Functions པΓ͸ ͷͪͷଥ౰ੑ΍ύϑΥʔϚϯεʹ՝୊ • Web ͷ৔߹͸ΦϑϥΠϯͷ Firestore ʹ͍ͭͯߟ͑ͳ͍͍ͯ͘ͷ͕ٹ͍ • ͱ͸͍͑ Firestore Ͱ׬݁Ͱ͖Δͱ͜Ζ͸ॱ࣍Ҡߦ͠Α͏

36. ·ͱΊ • ؅ཧը໘ͷ Web UI Λ࡞ΔετʔϦʔ͸ग़ͯ͘ΔͷͰߟྀ͢Δ • RDB ͳͲͱҧͬͯγεςϜͷϢʔβʔͰݖݶΛ؅ཧͰ͖ͳ͍ͷͰ͸͡Ί ͔Βઃܭ͓ͯ͘͜͠ͱ

    • ࠷௿ݶ member / admin ͘Β͍͸࡞͓ͬͯ͘ͱָ • DX Λ޲্ͤ͞Δ౔৕͕͋Δͷ͸εϜʔζͳҠߦʹܨ͕ΔͷͰ ˕ • CI / CD ؀ڥ͕Ͱ͖͍ͯΔͱվળָ͕ ΍ • Functions ͕ TypeScript Ͱॻ͔Ε͍ͯΔͱҠߦָ͕ ͳͲ