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

by potato4d(Hanatani Takuma)

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ࠓ೔࿩͍ͨ͜͠ͱ

Slide 4

Slide 4 text

Firebase ͸ศར

Slide 5

Slide 5 text

Firebase ͸؆୯

Slide 6

Slide 6 text

Firebase ͸ ָ .

Slide 7

Slide 7 text

Firebase ͸࠷ߴ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Firebase ͷࠔͬͨ࿩

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

AWS Amplify ͷྑ͞

Slide 24

Slide 24 text

AWS Amplify ͷྑ͞

Slide 25

Slide 25 text

AWS Amplify ͷྑ͞

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

ମݧ Amplify Console

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

σϞͯ͠ΈΔ

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

ઈର࢖͏ͧ AWS Amplify 2019