Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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