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

2018 年は Firebase を使ったけど 2019 年は AWS Amplify を使おうと思う / AWS Amplify 2019 #kyotojs

2018 年は Firebase を使ったけど 2019 年は AWS Amplify を使おうと思う / AWS Amplify 2019 #kyotojs

2019/01/12 に #kyotojs で発表したスライドです

Potato4d(Hanatani Takuma)

January 12, 2019
Tweet

More Decks by Potato4d(Hanatani Takuma)

Other Decks in Programming

Transcript

  1. 2018 ೥͸ Firebase Λ࢖͚ͬͨͲ
    2019 ೥͸ AWS Amplify Λ࢖͓͏ͱࢥ͏
    2019.01.12 #kyotojs HANATANI Takuma(@potato4d)

    View Slide

  2. HANATANI Takuma
    (@potato4d)
    • p. at Elevenback / engineer at LINE corp.
    • Maintainer at
    • Vue.js JP Docs (Core maintainer) / Nuxt.js JP Docs (maintainer)
    • Web Application Developer
    • — Vue.js, Nuxt.js, Node.js(with TypeScript), Serverless
    • — User Interface, Micro Interaction, Product Development

    View Slide

  3. ࠓ೔࿩͍ͨ͜͠ͱ

    View Slide

  4. Firebase ͸ศར

    View Slide

  5. Firebase ͸؆୯

    View Slide

  6. Firebase ͸ ָ
    .

    View Slide

  7. Firebase ͸࠷ߴ

    View Slide

  8. े෼ମݧ͔ͨ͠Βࠓ೥͸
    AWS Amplify Ͱ΋࠷ߴʹͳΖ͏

    View Slide

  9. Agenda
    1. جຊ࠷ߴͳ Firebase ͷ࠷ߴ͡Όͳ͍ͱ͜Ζ
    2. AWS ͷ Firebase ର߅അͱͳΔ "AWS Amplify"
    3. Ұ൪खܰʹ࢖͑Δ Amplify Console ͚ͩͰ΋ಋೖͯ͠ΈΑ͏

    View Slide

  10. جຊ࠷ߴͳ Firebase ͷ
    ࠷ߴ͡Όͳ͍ͱ͜Ζ

    View Slide

  11. Firebase ͷࠔͬͨ࿩
    • ෳ਺؀ڥ΁ͷαϙʔτ໘͕Ͳ͏ͯ͠΋ऑ͍
    • ϗεςΟϯά΋ຊ൪؀ڥͱͯ͠͸ Fastly Ͱศར͚ͩͲ Deploy
    Preview ͕ͳ͔ͬͨΓͱෆศ
    • ͦ΋ͦ΋ෳ਺ͷ environment Λ؅ཧ͢ΔͨΊʹ͸ϓϩδΣΫτ
    Λ environment ͷ਺͚ͩ༻ҙ͢Δඞཁ͕͋Δ
    • RTDB / Firestore Λ dev ؀ڥͰ͸ςετϞʔυʹͰ͖ͨΓศར
    ͳ෦෼΋ଟগ͸͋Δ͕……ɻ

    View Slide

  12. Firebase ͷࠔͬͨ࿩
    • Dev ͷαϙʔτ͸खް͍΋ͷͷ Ops पΓ͕Ͳ͏ͯ͠΋ශऑ
    • CI / CD ؀ڥ͸ଘࡏ͠ͳ͍(ࣗ෼͸ CircleCI ʹҕͶ͍ͯΔ)
    • গ͠લ·Ͱ Firestore ͷόοΫΞοϓػೳ͕ͳ͔ͬͨ
    • ͦͷଞ΋ӡ༻্ͷ໰୊͕ੜͨ͡৔߹ͷରॲࡦ͕ऑ͔ͬͨ
    • ࠷ۙ͸ೝূ৘ใ΋ు͖ग़ͤΔΑ͏ʹͳ͓ͬͯΓվળͷ܏޲༗

    View Slide

  13. Firebase ͷࠔͬͨ࿩

    View Slide

  14. Firebase ͷࠔͬͨ࿩
    https://medium.com/google-cloud-jp/firestore-backup-67327a74cd54

    View Slide

  15. Firebase ͷࠔͬͨ࿩
    • Cloud Functions Ͱ࿫͑ͳ͍ʗ΍Γͨ͘ͳ͍΋ͷͷಀ͛ઌ͕ͳ͍
    • ࣮͸ Cloud Functions ͸ ࠷௿Ұճ ࣮ߦ͞ΕΔ
    • ೋճ࣮ߦ͞ΕΔՄೳੑ͕͋Δ͜ͱΛߟ͑ͯ΍Δඞཁੑ
    • (جຊBlazeϓϥϯͩͱࢥ͏͕) Blaze Ҏ֎ͩͱ OutBound ੍ݶ
    • Node ͔ͭ FaaS or Express ίʔυʹݶఆ
    • Google Β͘͠ Custom Runtime ͸͓Ζ͔ 1 ݴޠ

    View Slide

  16. Firebase ͷࠔͬͨ࿩
    • ΋ͱ΋ͱ Mobile App ෼٭ͳͷͰ Web ޲͚͸ऑ͍
    • ΞφϦςΟΫεܥ͢΂ͯ / ML Kit / ςεςΟϯά / ϨϙʔςΟϯ
    ά / Ad ͳͲ
    • શମͰ͍͏ͱ൒෼ఔ౓ͷػೳ͕ Web ʹ͸ͳ͍
    • ϝΠϯػೳ͸͋Δ͕ɺϫϯετοϓͱ͸ݴ͑ͳ͍

    View Slide

  17. खૣ͘࡞Δͱ͖ʹ΋͏ͪΐͬͱॊೈͳ
    Alternative ͕΄͍͠

    View Slide

  18. AWS ͷ Firebase ର߅അͱͳΔ
    "AWS Amplify"

    View Slide

  19. AWS Amplify
    • AWS ϞόΠϧ޲͚ϓϥοτϑΥʔϜͱɺͦͷͨΊͷ։ൃϑϨʔϜϫʔΫ
    • ΋ͱ΋ͱ͸ aws-sdk(2MB) + Cognito SDK Έ͍ͨʹཚཱ & ංେԽ͢
    Δ AWS ͷ JavaScript SDK Λ౷߹͢ΔͨΊʹ͸͡·ͬͨ JavaScript
    ϥΠϒϥϦͱͯ͠ͷϓϩδΣΫτ
    • ϥΠϒϥϦ͸ݱࡏͰ͸ Web / React Native / iOS / Android ʹରԠ͢
    ΔϚϧνϓϥοτϑΥʔϜͳ Amplify Framework ΁ͱมԽͨ͠
    • ͦͷޙखΛ޿͛ɺݱࡏͰ͸ AWS ͷϞόΠϧ޲͚ϓϥοτϑΥʔϜશ
    ମΛࢦ͢Α͏ʹมԽ͍ͯ͘͠

    View Slide

  20. AWS Amplify
    • ఏڙ͍ͯ͠Δػೳ܈ʢҰྫʣ
    • API ࿈ܞ(AppSync GraphQL / REST API Gateway)
    • Authentification (Cognito)
    • Hosting (CloudFront / S3)
    • File Storage (S3)
    • Analytics (Pinpoint & Kinesiss)
    • etc ...

    View Slide

  21. AWS Amplify
    ͍͍ͩͨ Firebase ͷϑϧ൛ + α

    View Slide

  22. AWS Amplify ͷྑ͞
    • JavaScript ϑϨʔϜϫʔΫͱͷγʔϜϨεͳ࿈ܞ
    • React / Vue / Angular ͦΕͧΕͷઐ༻ SDK ͕ଘࡏ
    • ͦΕͧΕͷจԽʹ߹Θͤͨ API ͷެࣜͰͷఏڙ
    • ໪࿦ SDK Λ௚઀৮ͬͯͰ͖Δ͜ͱ͸શ࣮ͯݱՄೳ
    • αʔυύʔςΟ΍ϑϨʔϜϫʔΫଆͷ࿈ܞϥΠϒϥϦ͸ශऑͳ
    ͜ͱׂ͕ͱଟ͍தɺAWSଆ͔ΒدΓఴ͍ͬͯΔͷͰڠྗ

    View Slide

  23. AWS Amplify ͷྑ͞

    View Slide

  24. AWS Amplify ͷྑ͞

    View Slide

  25. AWS Amplify ͷྑ͞

    View Slide

  26. AWS Amplify ͷྑ͞
    • DynamoDB On-Demand ͷొ৔ʹΑΔ࿈ܞͷ͠΍͢͞
    • ͜Ε·ͰAWS ಠࣗͷࢼࢉ(ಛʹDynamo)͕Ͳ͏ͯ͠΋ωοΫ
    • Φʔτεέʔϧ͸͋Δ͕ίετ໘ʗ୹ظͰΞΫηε͕௓Ͷͨ࣌
    ͷ͜ͱͳͲ
    • ڈ೥ͷय़͸͜ΕͰۤ࿑ͯ͠ Firebase Ͱ΋ྑ͔ͬͨ࢓ࣄ΋͋ͬͨ
    • 2018 ೥ͷ re:invent Ͱ࢖ͬͨ෼͚ͩͷ DynamoDB ͕ొ৔
    • Firebase ϨϕϧͷϥΠτ͞Ͱ AWS Πϯϑϥͱͷ઀ଓ͕༰қʹ

    View Slide

  27. AWS Amplify ͷྑ͞
    https://aws.amazon.com/jp/blogs/news/amazon-dynamodb-on-demand-no-capacity-planning-and-pay-per-request-pricing/

    View Slide

  28. AWS Amplify ͷྑ͞
    • ޙΖ͕ී௨ͷ AWS ͳͷͰॊೈੑ͕͋Δ
    • Amplify Framework ͔Β઀ଓ͍ͯ͠Δ΋ͷ͸࠷ऴతʹͲ͜ʹଐ
    ͢Δ͔͕໌ه͞Ε͍ͯΔ
    • (ಛʹAPIͳͲ͸) Amplify ͔ͩΒͱ͍ͬͯಛʹԿ੍͔ݶ͕͋ΔΘ
    ͚Ͱ͸ͳ͍ͷͰ෯Λ΋ͨͤͨ͘ͳͬͨ࣌ʹศར
    • ͦͷ෼ Firebase ΑΓ͸஌͕ࣝඞཁͳؾ͕͢Δ

    View Slide

  29. AWS Amplify ͷྑ͞
    https://aws-amplify.github.io/docs/js/analytics

    View Slide

  30. AWS Amplify ͷྑ͞
    https://aws-amplify.github.io/docs/js/analytics

    View Slide

  31. AWS Amplify ͷྑ͞
    • ࠷ۙ CI / CD ͱϗεςΟϯά͕Ͱ͖Δ Amplify Console ͕Ͱͨ
    • Amplify Framework Λར༻͍ͯ͠Δ͔Ͳ͏͔ʹؔΘΒͣ࢖͑Δ
    • Ϗϧυ → σϓϩΠ → ໰୊͕͋Ε͹ࠩ͠໭͠ͷجຊ͕Մೳ
    • Route 53 > CloudFront (w/ ACM) > S3 ͷఆܗ࡞ۀ͕Ϙλϯ1ͭ
    • ϒϥϯν͝ͱͷෳ਺؀ڥσϓϩΠΛαϙʔτ(؀ڥม਺΋)
    • ೝূΛ෇༩͢Δ͜ͱ͕Ͱ͖ɺ2019/01࣌఺Ͱ Basic ೝূΛαϙʔτ

    View Slide

  32. AWS Amplify ͷྑ͞
    https://aws-amplify.github.io/docs/js/analytics

    View Slide

  33. AWS Amplify ͷྑ͞
    • Multi Environment ΁ͷରԠ
    • શମతʹෳ਺؀ڥʹ͸ྗ͕ೖ͍ͬͯΔ
    • Console ͸໪࿦ɺ Amplify Framework ΋ϕʔλͰ͸͋Δ͕ෳ
    ਺؀ڥΛҙࣝͨ͠มߋ͕ಋೖ͞Ε͍ͯΔ
    • ॳճϦϦʔεΑΓઌ΋͔ͬ͠Γͱߟ͑ͭͭ։ൃ͢ΔͨΊͷ౔৕
    ͕ Firebase ൺͰἧ͍ͬͯΔҹ৅

    View Slide

  34. ମݧ Amplify Console

    View Slide

  35. Amplify Console ͓͞Β͍
    • Amplify αʔϏεͷதͷҰͭͰ͋ΓɺσϓϩΠपΓ
    • ݱঢ়͸ CI / CD ࣮ߦͱϗεςΟϯά͕ҰͭʹͳͬͨαʔϏε
    • Circle CI + Firebase ͋Δ͍͸ Netlify ͷڧԽ൛
    • ϒϥϯνࢦఆͰͷσϓϩΠϓϨϏϡʔ
    • 1෼ͰͰ͖Δ TLS ରԠ / CloudFront ʹΑΔΤοδΩϟογϡ
    • σϓϩΠϓϨϏϡʔ͝ͱͷΞΫηεೝূ෇༩

    View Slide

  36. खॱ
    1. AWS ΞΧ΢ϯτͰϩάΠϯ ← ࠓ͙͢։ઃʂʂʂʂʂʂʂ
    2. https://aws.amazon.com/jp/amplify/console/ ʹΞΫηε
    3. ΞϝϦΧਓʹͳΔʢ೔ຊʹϦʔδϣϯ͕ͳ͍ͷͰʣ
    4. ద౰ʹαΠτΛ্ཱͪ͛ͯద౰ͳ Git ϒϥϯνʹ push ͢Δ
    5. CI / CD ͕উखʹߦΘΕͯϒϥϯν͝ͱʹσϓϩΠ͞ΕΔ
    6. ϕʔγοΫೝূͳͲΛؾܰʹ෇༩Ͱ͖Δ(ϒϥϯν͝ͱ΋Մ)

    View Slide

  37. σϞͯ͠ΈΔ

    View Slide

  38. Α͋͘Δ࣭໰
    • ๚໰ऀΞϝϦΧਓ͡Όͳ͍Μ͚ͩͲ
    • ࡞Δਓ͕ΞϝϦΧਓͳΒ CloudFront ͕ࣗಈͰט·͞ΕΔͷ
    Ͱɺ೔ຊਓ޲͚ʹշదʹίϯςϯπΛఏڙͰ͖Δ
    • Netlify ͰΑ͘ͳ͍ʁ
    • Deploy Preview ʹ҆ՁͰϕʔγοΫೝূ΄͘͠ͳ͍……ʁ
    • ͦΕҎલʹ Production ͳΒ࠷େݶ҆ఆͯ͠΄͘͠ͳ͍……ʁ

    View Slide

  39. Α͋͘Δ࣭໰
    • Firebase Hosting ͸ Fastly ͚ͩͲ
    • Θ͔Δ
    • ͜Ε͋Μ·Γ Amplify ຊମͱؔ܎ͳ͘ͳ͍ʁ
    • AWS ͷϞόΠϧ(Web)ΞϓϦέʔγϣϯ޲͚ͷαʔϏεू߹ମ
    ͕ͦ͜ Amplify ͳͷͰ……
    • Ұ൪͙͢ʹҠߦͰ͖ͦ͏ͳ෦෼ͱͯ͠ɺ·ͨ Amplify ʹೖͬͯ
    ΋Β͏ͱ͖ͬͭʹ͸Ұ൪ྑ͍ͱࢥ͏

    View Slide

  40. Α͋͘Δ࣭໰
    • ݁ہ Amplify ࣗମ͸ීஈ࢖ͬͯΔͷʁ
    • ϑϧ Amplify ΞϓϦέʔγϣϯͷ Production-in ͸·ͩɻ Console
    ୯ମ͸͙͢ಋೖͰ͖ΔͷͰ Production ࢖͍ͬͯ·͢ɻ
    • Hobby Use ͩͱׂͱ࢖͍ͬͯΔͷͰ 2019 ೥͸ಋೖ͍ͨ͠
    • AmplifyɺFirebase ͰΑ͘ͳ͍ʁ
    • FirebaseͰ͍͍ͳΒFirebaseͰྑ͍ɻΑ͘ͳ͍࣌ͷબ୒ࢶͱͯ͠ॏཁ
    • AWS ͷձࣾʗGCP ͷձࣾ͸໌֬ʹ͋ΔͷͰɺͦͷҙຯͰ΋

    View Slide

  41. Α͋͘Δ࣭໰
    • Firebase Λ࢖Θͳ͘ͳΓͦ͏ʁ
    • ͦΜͳ͜ͱ͸ͳ͍ɻґવͱͯܰ͠ྔͳ Web ΞϓϦέʔγϣϯ
    ͷ։ൃ͸ Firebase Λ࢖͍͍ͨ͠ɺ DB ͸ Firestore ͕༏ल
    • ҎԼͷγνϡΤʔγϣϯͰ࢖͍͍ͨ
    • େ͖Ίͷ API Λ։ൃͯ͠ΨοπϦ࡞ΓࠐΈ͍ͨͱ͖
    • Firebase Hosting ͸ࣺͯͯ Amplify Console ʹ͍ͨ͠
    • Firebase Auth ͸ MFA ͕ͳ͍ͷͰηΩϡΞͳೝূ͸ Amplify

    View Slide

  42. ઈର࢖͏ͧ AWS Amplify 2019

    View Slide