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

2018 年は Firebase を使ったけど 2019 年は AWS Amplify を使お...

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

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

potato4d(Takuma HANATANI)

January 12, 2019
Tweet

More Decks by potato4d(Takuma HANATANI)

Other Decks in Programming

Transcript

  1. 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
  2. Agenda 1. جຊ࠷ߴͳ Firebase ͷ࠷ߴ͡Όͳ͍ͱ͜Ζ 2. AWS ͷ Firebase ର߅അͱͳΔ

    "AWS Amplify" 3. Ұ൪खܰʹ࢖͑Δ Amplify Console ͚ͩͰ΋ಋೖͯ͠ΈΑ͏
  3. Firebase ͷࠔͬͨ࿩ • ෳ਺؀ڥ΁ͷαϙʔτ໘͕Ͳ͏ͯ͠΋ऑ͍ • ϗεςΟϯά΋ຊ൪؀ڥͱͯ͠͸ Fastly Ͱศར͚ͩͲ Deploy Preview

    ͕ͳ͔ͬͨΓͱෆศ • ͦ΋ͦ΋ෳ਺ͷ environment Λ؅ཧ͢ΔͨΊʹ͸ϓϩδΣΫτ Λ environment ͷ਺͚ͩ༻ҙ͢Δඞཁ͕͋Δ • RTDB / Firestore Λ dev ؀ڥͰ͸ςετϞʔυʹͰ͖ͨΓศར ͳ෦෼΋ଟগ͸͋Δ͕……ɻ
  4. Firebase ͷࠔͬͨ࿩ • Dev ͷαϙʔτ͸खް͍΋ͷͷ Ops पΓ͕Ͳ͏ͯ͠΋ශऑ • CI /

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

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

    ΞφϦςΟΫεܥ͢΂ͯ / ML Kit / ςεςΟϯά / ϨϙʔςΟϯ ά / Ad ͳͲ • શମͰ͍͏ͱ൒෼ఔ౓ͷػೳ͕ Web ʹ͸ͳ͍ • ϝΠϯػೳ͸͋Δ͕ɺϫϯετοϓͱ͸ݴ͑ͳ͍
  7. AWS Amplify • AWS ϞόΠϧ޲͚ϓϥοτϑΥʔϜͱɺͦͷͨΊͷ։ൃϑϨʔϜϫʔΫ • ΋ͱ΋ͱ͸ aws-sdk(2MB) + Cognito

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

    API Gateway) • Authentification (Cognito) • Hosting (CloudFront / S3) • File Storage (S3) • Analytics (Pinpoint & Kinesiss) • etc ...
  9. AWS Amplify ͷྑ͞ • JavaScript ϑϨʔϜϫʔΫͱͷγʔϜϨεͳ࿈ܞ • React / Vue

    / Angular ͦΕͧΕͷઐ༻ SDK ͕ଘࡏ • ͦΕͧΕͷจԽʹ߹Θͤͨ API ͷެࣜͰͷఏڙ • ໪࿦ SDK Λ௚઀৮ͬͯͰ͖Δ͜ͱ͸શ࣮ͯݱՄೳ • αʔυύʔςΟ΍ϑϨʔϜϫʔΫଆͷ࿈ܞϥΠϒϥϦ͸ශऑͳ ͜ͱׂ͕ͱଟ͍தɺAWSଆ͔ΒدΓఴ͍ͬͯΔͷͰڠྗ
  10. AWS Amplify ͷྑ͞ • DynamoDB On-Demand ͷొ৔ʹΑΔ࿈ܞͷ͠΍͢͞ • ͜Ε·ͰAWS ಠࣗͷࢼࢉ(ಛʹDynamo)͕Ͳ͏ͯ͠΋ωοΫ

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

    ͔Β઀ଓ͍ͯ͠Δ΋ͷ͸࠷ऴతʹͲ͜ʹଐ ͢Δ͔͕໌ه͞Ε͍ͯΔ • (ಛʹAPIͳͲ͸) Amplify ͔ͩΒͱ͍ͬͯಛʹԿ੍͔ݶ͕͋ΔΘ ͚Ͱ͸ͳ͍ͷͰ෯Λ΋ͨͤͨ͘ͳͬͨ࣌ʹศར • ͦͷ෼ Firebase ΑΓ͸஌͕ࣝඞཁͳؾ͕͢Δ
  12. AWS Amplify ͷྑ͞ • ࠷ۙ CI / CD ͱϗεςΟϯά͕Ͱ͖Δ Amplify

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

    Console ͸໪࿦ɺ Amplify Framework ΋ϕʔλͰ͸͋Δ͕ෳ ਺؀ڥΛҙࣝͨ͠มߋ͕ಋೖ͞Ε͍ͯΔ • ॳճϦϦʔεΑΓઌ΋͔ͬ͠Γͱߟ͑ͭͭ։ൃ͢ΔͨΊͷ౔৕ ͕ Firebase ൺͰἧ͍ͬͯΔҹ৅
  14. Amplify Console ͓͞Β͍ • Amplify αʔϏεͷதͷҰͭͰ͋ΓɺσϓϩΠपΓ • ݱঢ়͸ CI /

    CD ࣮ߦͱϗεςΟϯά͕ҰͭʹͳͬͨαʔϏε • Circle CI + Firebase ͋Δ͍͸ Netlify ͷڧԽ൛ • ϒϥϯνࢦఆͰͷσϓϩΠϓϨϏϡʔ • 1෼ͰͰ͖Δ TLS ରԠ / CloudFront ʹΑΔΤοδΩϟογϡ • σϓϩΠϓϨϏϡʔ͝ͱͷΞΫηεೝূ෇༩
  15. खॱ 1. AWS ΞΧ΢ϯτͰϩάΠϯ ← ࠓ͙͢։ઃʂʂʂʂʂʂʂ 2. https://aws.amazon.com/jp/amplify/console/ ʹΞΫηε 3.

    ΞϝϦΧਓʹͳΔʢ೔ຊʹϦʔδϣϯ͕ͳ͍ͷͰʣ 4. ద౰ʹαΠτΛ্ཱͪ͛ͯద౰ͳ Git ϒϥϯνʹ push ͢Δ 5. CI / CD ͕উखʹߦΘΕͯϒϥϯν͝ͱʹσϓϩΠ͞ΕΔ 6. ϕʔγοΫೝূͳͲΛؾܰʹ෇༩Ͱ͖Δ(ϒϥϯν͝ͱ΋Մ)
  16. Α͋͘Δ࣭໰ • ๚໰ऀΞϝϦΧਓ͡Όͳ͍Μ͚ͩͲ • ࡞Δਓ͕ΞϝϦΧਓͳΒ CloudFront ͕ࣗಈͰט·͞ΕΔͷ Ͱɺ೔ຊਓ޲͚ʹշదʹίϯςϯπΛఏڙͰ͖Δ • Netlify

    ͰΑ͘ͳ͍ʁ • Deploy Preview ʹ҆ՁͰϕʔγοΫೝূ΄͘͠ͳ͍……ʁ • ͦΕҎલʹ Production ͳΒ࠷େݶ҆ఆͯ͠΄͘͠ͳ͍……ʁ
  17. Α͋͘Δ࣭໰ • Firebase Hosting ͸ Fastly ͚ͩͲ • Θ͔Δ •

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

    ͸·ͩɻ Console ୯ମ͸͙͢ಋೖͰ͖ΔͷͰ Production ࢖͍ͬͯ·͢ɻ • Hobby Use ͩͱׂͱ࢖͍ͬͯΔͷͰ 2019 ೥͸ಋೖ͍ͨ͠ • AmplifyɺFirebase ͰΑ͘ͳ͍ʁ • FirebaseͰ͍͍ͳΒFirebaseͰྑ͍ɻΑ͘ͳ͍࣌ͷબ୒ࢶͱͯ͠ॏཁ • AWS ͷձࣾʗGCP ͷձࣾ͸໌֬ʹ͋ΔͷͰɺͦͷҙຯͰ΋
  19. Α͋͘Δ࣭໰ • Firebase Λ࢖Θͳ͘ͳΓͦ͏ʁ • ͦΜͳ͜ͱ͸ͳ͍ɻґવͱͯܰ͠ྔͳ Web ΞϓϦέʔγϣϯ ͷ։ൃ͸ Firebase

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