Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Potato4d(Hanatani Takuma)

August 01, 2019
Tweet

More Decks by Potato4d(Hanatani Takuma)

Other Decks in Programming

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