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

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

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