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

Transcript

1. 2018 ೥͸ Firebase Λ࢖͚ͬͨͲ 2019 ೥͸ AWS Amplify Λ࢖͓͏ͱࢥ͏ 2019.01.12

   #kyotojs HANATANI Takuma(@potato4d)

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

3. ࠓ೔࿩͍ͨ͜͠ͱ

4. Firebase ͸ศར

5. Firebase ͸؆୯

6. Firebase ͸ ָ .

7. Firebase ͸࠷ߴ

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

9. Agenda 1. جຊ࠷ߴͳ Firebase ͷ࠷ߴ͡Όͳ͍ͱ͜Ζ 2. AWS ͷ Firebase ର߅അͱͳΔ

   "AWS Amplify" 3. Ұ൪खܰʹ࢖͑Δ Amplify Console ͚ͩͰ΋ಋೖͯ͠ΈΑ͏

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

11. Firebase ͷࠔͬͨ࿩ • ෳ਺؀ڥ΁ͷαϙʔτ໘͕Ͳ͏ͯ͠΋ऑ͍ • ϗεςΟϯά΋ຊ൪؀ڥͱͯ͠͸ Fastly Ͱศར͚ͩͲ Deploy Preview

    ͕ͳ͔ͬͨΓͱෆศ • ͦ΋ͦ΋ෳ਺ͷ environment Λ؅ཧ͢ΔͨΊʹ͸ϓϩδΣΫτ Λ environment ͷ਺͚ͩ༻ҙ͢Δඞཁ͕͋Δ • RTDB / Firestore Λ dev ؀ڥͰ͸ςετϞʔυʹͰ͖ͨΓศར ͳ෦෼΋ଟগ͸͋Δ͕……ɻ

12. Firebase ͷࠔͬͨ࿩ • Dev ͷαϙʔτ͸खް͍΋ͷͷ Ops पΓ͕Ͳ͏ͯ͠΋ශऑ • CI /

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

13. Firebase ͷࠔͬͨ࿩

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

15. Firebase ͷࠔͬͨ࿩ • Cloud Functions Ͱ࿫͑ͳ͍ʗ΍Γͨ͘ͳ͍΋ͷͷಀ͛ઌ͕ͳ͍ • ࣮͸ Cloud Functions

    ͸ ࠷௿Ұճ ࣮ߦ͞ΕΔ • ೋճ࣮ߦ͞ΕΔՄೳੑ͕͋Δ͜ͱΛߟ͑ͯ΍Δඞཁੑ • (جຊBlazeϓϥϯͩͱࢥ͏͕) Blaze Ҏ֎ͩͱ OutBound ੍ݶ • Node ͔ͭ FaaS or Express ίʔυʹݶఆ • Google Β͘͠ Custom Runtime ͸͓Ζ͔ 1 ݴޠ

16. Firebase ͷࠔͬͨ࿩ • ΋ͱ΋ͱ Mobile App ෼٭ͳͷͰ Web ޲͚͸ऑ͍ •

    ΞφϦςΟΫεܥ͢΂ͯ / ML Kit / ςεςΟϯά / ϨϙʔςΟϯ ά / Ad ͳͲ • શମͰ͍͏ͱ൒෼ఔ౓ͷػೳ͕ Web ʹ͸ͳ͍ • ϝΠϯػೳ͸͋Δ͕ɺϫϯετοϓͱ͸ݴ͑ͳ͍

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

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

19. AWS Amplify • AWS ϞόΠϧ޲͚ϓϥοτϑΥʔϜͱɺͦͷͨΊͷ։ൃϑϨʔϜϫʔΫ • ΋ͱ΋ͱ͸ aws-sdk(2MB) + Cognito

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

20. AWS Amplify • ఏڙ͍ͯ͠Δػೳ܈ʢҰྫʣ • API ࿈ܞ(AppSync GraphQL / REST

    API Gateway) • Authentification (Cognito) • Hosting (CloudFront / S3) • File Storage (S3) • Analytics (Pinpoint & Kinesiss) • etc ...

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

22. AWS Amplify ͷྑ͞ • JavaScript ϑϨʔϜϫʔΫͱͷγʔϜϨεͳ࿈ܞ • React / Vue

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

23. AWS Amplify ͷྑ͞

24. AWS Amplify ͷྑ͞

25. AWS Amplify ͷྑ͞

26. AWS Amplify ͷྑ͞ • DynamoDB On-Demand ͷొ৔ʹΑΔ࿈ܞͷ͠΍͢͞ • ͜Ε·ͰAWS ಠࣗͷࢼࢉ(ಛʹDynamo)͕Ͳ͏ͯ͠΋ωοΫ

    • Φʔτεέʔϧ͸͋Δ͕ίετ໘ʗ୹ظͰΞΫηε͕௓Ͷͨ࣌ ͷ͜ͱͳͲ • ڈ೥ͷय़͸͜ΕͰۤ࿑ͯ͠ Firebase Ͱ΋ྑ͔ͬͨ࢓ࣄ΋͋ͬͨ • 2018 ೥ͷ re:invent Ͱ࢖ͬͨ෼͚ͩͷ DynamoDB ͕ొ৔ • Firebase ϨϕϧͷϥΠτ͞Ͱ AWS Πϯϑϥͱͷ઀ଓ͕༰қʹ

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

28. AWS Amplify ͷྑ͞ • ޙΖ͕ී௨ͷ AWS ͳͷͰॊೈੑ͕͋Δ • Amplify Framework

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

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

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

31. AWS Amplify ͷྑ͞ • ࠷ۙ CI / CD ͱϗεςΟϯά͕Ͱ͖Δ Amplify

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

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

33. AWS Amplify ͷྑ͞ • Multi Environment ΁ͷରԠ • શମతʹෳ਺؀ڥʹ͸ྗ͕ೖ͍ͬͯΔ •

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

34. ମݧ Amplify Console

35. Amplify Console ͓͞Β͍ • Amplify αʔϏεͷதͷҰͭͰ͋ΓɺσϓϩΠपΓ • ݱঢ়͸ CI /

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

36. खॱ 1. AWS ΞΧ΢ϯτͰϩάΠϯ ← ࠓ͙͢։ઃʂʂʂʂʂʂʂ 2. https://aws.amazon.com/jp/amplify/console/ ʹΞΫηε 3.

    ΞϝϦΧਓʹͳΔʢ೔ຊʹϦʔδϣϯ͕ͳ͍ͷͰʣ 4. ద౰ʹαΠτΛ্ཱͪ͛ͯద౰ͳ Git ϒϥϯνʹ push ͢Δ 5. CI / CD ͕উखʹߦΘΕͯϒϥϯν͝ͱʹσϓϩΠ͞ΕΔ 6. ϕʔγοΫೝূͳͲΛؾܰʹ෇༩Ͱ͖Δ(ϒϥϯν͝ͱ΋Մ)

37. σϞͯ͠ΈΔ

38. Α͋͘Δ࣭໰ • ๚໰ऀΞϝϦΧਓ͡Όͳ͍Μ͚ͩͲ • ࡞Δਓ͕ΞϝϦΧਓͳΒ CloudFront ͕ࣗಈͰט·͞ΕΔͷ Ͱɺ೔ຊਓ޲͚ʹշదʹίϯςϯπΛఏڙͰ͖Δ • Netlify

    ͰΑ͘ͳ͍ʁ • Deploy Preview ʹ҆ՁͰϕʔγοΫೝূ΄͘͠ͳ͍……ʁ • ͦΕҎલʹ Production ͳΒ࠷େݶ҆ఆͯ͠΄͘͠ͳ͍……ʁ

39. Α͋͘Δ࣭໰ • Firebase Hosting ͸ Fastly ͚ͩͲ • Θ͔Δ •

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

40. Α͋͘Δ࣭໰ • ݁ہ Amplify ࣗମ͸ීஈ࢖ͬͯΔͷʁ • ϑϧ Amplify ΞϓϦέʔγϣϯͷ Production-in

    ͸·ͩɻ Console ୯ମ͸͙͢ಋೖͰ͖ΔͷͰ Production ࢖͍ͬͯ·͢ɻ • Hobby Use ͩͱׂͱ࢖͍ͬͯΔͷͰ 2019 ೥͸ಋೖ͍ͨ͠ • AmplifyɺFirebase ͰΑ͘ͳ͍ʁ • FirebaseͰ͍͍ͳΒFirebaseͰྑ͍ɻΑ͘ͳ͍࣌ͷબ୒ࢶͱͯ͠ॏཁ • AWS ͷձࣾʗGCP ͷձࣾ͸໌֬ʹ͋ΔͷͰɺͦͷҙຯͰ΋

41. Α͋͘Δ࣭໰ • Firebase Λ࢖Θͳ͘ͳΓͦ͏ʁ • ͦΜͳ͜ͱ͸ͳ͍ɻґવͱͯܰ͠ྔͳ Web ΞϓϦέʔγϣϯ ͷ։ൃ͸ Firebase

    Λ࢖͍͍ͨ͠ɺ DB ͸ Firestore ͕༏ल • ҎԼͷγνϡΤʔγϣϯͰ࢖͍͍ͨ • େ͖Ίͷ API Λ։ൃͯ͠ΨοπϦ࡞ΓࠐΈ͍ͨͱ͖ • Firebase Hosting ͸ࣺͯͯ Amplify Console ʹ͍ͨ͠ • Firebase Auth ͸ MFA ͕ͳ͍ͷͰηΩϡΞͳೝূ͸ Amplify

42. ઈର࢖͏ͧ AWS Amplify 2019