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)
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