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

Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran...

Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo

2019.09.05 に開催された awswakaran.tokyo #2 の登壇スライドです。

Avatar for potato4d(Takuma HANATANI)

potato4d(Takuma HANATANI)

September 25, 2019
Tweet

More Decks by potato4d(Takuma HANATANI)

Other Decks in Technology

Transcript

  1. HANATANI Takuma (@potato4d) • Organizations • Senior Front-End Engineer at

    LINE Corp. • Founder at ElevenBack LLC. • Contributions • Vue.js and React.js Japanese document maintainer • I — • Front-End, TypeScript Node.js, Serverless solutions • User Interface, Product Development, Public Cloud
  2. Topics 1. AWS Amplify ͱ Amplify Console 2. S3 +

    CloudFront + ACM ͱൺֱͨ͠ Amplify Console ͷར఺ 3. Amplify Console ಛ༗ͷخ͠͞ͱ೰Έ 4. ݱ࣌఺Ͱͷ੩తαΠτϗεςΟϯάͷબఆͷ݁࿦ 5. ·ͱΊ
  3. Topics 1. AWS Amplify ͱ Amplify Console 2. S3 +

    CloudFront + ACM ͱൺֱͨ͠ Amplify Console ͷར఺ 3. Amplify Console ಛ༗ͷخ͠͞ͱ೰Έ 4. ݱ࣌఺Ͱͷ੩తαΠτϗεςΟϯάͷબఆͷ݁࿦ 5. ·ͱΊ
  4. AWS Amplify • AWS ͷ֤αʔϏεΛϥοϓͨ͠ AWS Mobile Hub ͷޙܧ •

    AppSync / Lambda ΍ɺ Cognito ͳͲͱ઀ଓͰ͖Δ BaaS • ཁ͸ AWS ൛ͷ Firebase • ެࣜͱͯ͠΋ Mobile Hub ͔ΒͷҠߦΛਪ঑͍ͯ͠Δ • https://aws.amazon.com/jp/amplify/faqs/ • iOS, Android, Web ʹରԠ • Web Ͱ΋ React, Vue ͱ΋࿈ܞͰ͖Δઐ༻ͷϑϨʔϜϫʔΫ͕ଘࡏ
  5. Amplify Console • Amplify ͷϑΝϛϦʔαʔϏεͱͳΔ੩తαΠτϗεςΟϯά • 2018೥12݄ʹϦϦʔεɺ4݄ʹ౦ژϦʔδϣϯೖΓ • S3 +

    CloudFront + ACM + Route53 ͷϥούʔ • Firebase Hosting ΍ Netlify ͷΑ͏ͳ΋ͷ • Amplify ͷઃఆϑΝΠϧΛྲྀ༻ͯ͠੩తαΠτͷ CI / CD ͕Մೳ • Git ϗεςΟϯά͔Βͷ࿈ܞͱ YAML ϑΝΠϧ͚ͩͰӡ༻·Ͱ • ͦͷଞ Amplify Console ͳΒͰ͸ͷઃఆ΋ଟ਺ଘࡏ
  6. Topics 1. AWS Amplify ͱ Amplify Console 2. S3 +

    CloudFront + ACM ͱൺֱͨ͠ Amplify Console ͷར఺ 3. Amplify Console ಛ༗ͷخ͠͞ͱ೰Έ 4. ݱ࣌఺Ͱͷ੩తαΠτϗεςΟϯάͷબఆͷ݁࿦ 5. ·ͱΊ
  7. S3/CF/ACM/Route53 ͱൺֱͨ͠ར఺ • Amplify Console ͸੩తαΠτϗεςΟϯάʹϑΥʔΧε͍ͯ͠Δ • Amplify Console ಛ༗ͷศརͳػೳ͕๛෋ʹଘࡏ

    • ϒϥϯν͝ͱͷσϓϩΠͱυϝΠϯׂΓৼΓ • ϒϥϯν͝ͱͷϕʔγοΫೝূͷઃఆ • ؀ڥม਺ͷઃఆ • ϝʔϧϕʔεͷσϓϩΠ௨஌ͷઃఆ • etc…
  8. S3/CF/ACM/Route53 ͱൺֱͨ͠ར఺ • Amplify Console ͸੩తαΠτϗεςΟϯάʹϑΥʔΧε͍ͯ͠Δ • AWS αʔϏε܈ͷ໘౗ͳϝϯςφϯε࡞ۀ͕ෆཁ •

    ͨͱ͑͹ S3 ͷόέοτͷ૟আͳͲ͕ෆཁ • CI / CD ؀ڥ͸ Amplify Console Ͱ୲อ͞Ε͍ͯΔ • CircleCI ΍ CodeBuild Ͱߏங͢Δඞཁ͕ͳ͍ • ͦ΋ͦ΋ਓ͕ؒखಈͰσϓϩΠͰ͖ͳ͍ • ͦ΋ͦ΋Կ΋खಈͰߏஙͨ͠Γ IaC Λॻ͘ඞཁ͢Βͳ͍
  9. Topics 1. AWS Amplify ͱ Amplify Console 2. S3 +

    CloudFront + ACM ͱൺֱͨ͠ Amplify Console ͷར఺ 3. Amplify Console ಛ༗ͷخ͠͞ͱ೰Έ 4. ݱ࣌఺Ͱͷ੩తαΠτϗεςΟϯάͷબఆͷ݁࿦ 5. ·ͱΊ
  10. Amplify Console ಛ༗ͷخ͠͞ͱ೰Έ • Amplify Console ͷخ͠͞ • ݖݶ΍ΞΫηείϯτϩʔϧ؅ཧͷॊೈੑ •

    ϕʔγοΫೝূ͕࢖͑Δ੩తαΠτϗεςΟϯά͕ͳ͍ • ଞͷखஈͷ৔߹ɺ CDN + FaaS ͔͠બ୒ࢶ͕ͳ͍ • CloudFront + Lambda@Edge • Firebase + Functions • ӡ༻ଆͱͯ͠΋ AWS ͷ IAM ͱඥ෇͍͍ͯΔͷ͸خ͍͠
  11. Amplify Console ಛ༗ͷخ͠͞ͱ೰Έ • Amplify Console ͷخ͠͞ • ෳ਺ͷ؀ڥͷ౷߹؅ཧ •

    ϒϥϯνຖʹυϝΠϯ͕ඥ͖ͮɺຊ൪ͱεςʔδϯάΛಉ࣌؅ཧՄೳ • ͞Βʹࠓ೥7݄ʹϒϥϯνͷࣗಈݕग़ɾσϓϩΠ·ͰϦϦʔε • ϑϩϯτΤϯυΤϯδχΞతʹݴ͏ͱ Netlify ͷ Deploy Preview ͷ Α͏ͳػೳ • https://dev.to/kkemple/branch-based-deployment-strategies- with-aws-amplify-console-1n3c
  12. Amplify Console ಛ༗ͷخ͠͞ͱ೰Έ • Amplify Console ʹલʹ͚͋ͬͨͲղܾ͞Εͨ೰Έ • ϒϥϯν͝ͱͷσϓϩΠ͕ࣗಈͰඥ෇͔ͳ͍ •

    → ઌड़ͷ௨Γࠓ೥7݄ʹରԠͨ͠ͷͰղফࡁΈ • ւ֎Ϧʔδϣϯͷ͍ͤͰ CF ࠐͰ΋ Origin ͷϨΠςϯγ͕ͭΒ͍ • → ઌड़ͷ௨Γࠓ೥4݄ʹରԠͨ͠ͷͰղফࡁΈ • → ࢲͷ৔߹͸౦ژʹ͘Δ·Ͱ͸؅ཧը໘ SPA ͚ͩͰ࢖ͬͯ·ͨ͠ • ͜ΕΒ͕ਏ͔ͬͨਓ͸࠶νϟϨϯδΛ͓͢͢Ί • → άϩʔόϧͰ͸ͳ͍ͷͰϦʔδϣϯ͝ͱʹ৽ن࡞੒͸ඞཁ
  13. Amplify Console ಛ༗ͷخ͠͞ͱ೰Έ • Amplify Console ͷ೰Έ • σϓϩΠ݁Ռͷ௨஌ಋઢ͕ශऑ •

    ϒϥϯν Preview ͕͋Δ͕ GitHub ͱ࿈ܞ͍ͯ͠ΔΘ͚Ͱ΋ͳ͍ • ϝʔϧ௨஌Ҏ֎ͷσϑΥϧτͷσϓϩΠ Integration ͕ͳ͍ • Webhook ػೳ͸ϏϧυൃՐͷͨΊͷ΋ͷ(Incoming) • Slack ௨஌͍ͤͨ͞ͳΒϝʔϧ௨஌ + SES + Lambda ͳͲ • Production Build ͷ݁ՌΛશһ͕೺Ѳ͍͍ͯͨ͠৔߹ͳͲ͸ෆ޲͖
  14. Amplify Console ಛ༗ͷخ͠͞ͱ೰Έ • Amplify Console ͷ೰Έ • Deploy Preview

    ͷ௨஌΋ශऑ • ͪ͜Β΋ಉ༷ʹ branch auto detect ͸͋ΕͲ PR ʹίϝϯτ͕ͭ ͘Α͏ͳΘ͚Ͱ΋ͳ͍ • AWS ʹ͋Γ͕ͪͳѱ͍ҙຯͰͷΒ͠͞ɺCodeCommit ͕͋Δ͜ ͱ΋ؚΊͯڝ߹αʔϏεͱൺֱ͢Δͱ࿈ܞͷऑ͞͸ҰఆҎ্ଘࡏ ͢Δ
  15. Topics 1. AWS Amplify ͱ Amplify Console 2. S3 +

    CloudFront + ACM ͱൺֱͨ͠ Amplify Console ͷར఺ 3. Amplify Console ಛ༗ͷخ͠͞ͱ೰Έ 4. ݱ࣌఺Ͱͷ੩తαΠτϗεςΟϯάͷબఆͷ݁࿦ 5. ·ͱΊ
  16. ੩తαΠτϗεςΟϯάͷબఆج४ • Amplify Console ʹ໌֬ʹ༏Ґੑ͕͋Δ • S3 + CF +

    α • S3 ͕Χόʔ͢Δ༻్ʹ͍ͭͯ੩తϗεςΟϯά͸ too much • Web αΠτͳΒҰ࣌ΞΫηε༻ϦϯΫͷൃߦཁΒͳ͍ • Web αΠτͳΒͲͷΈͪશͯ Public ͳͷͰ Object ΁ͷϦιʔε ϩάΛ On ʹ͢Δ͜ͱ΋ͳ͍ • Web αΠτͳΒϑΝΠϧͷόʔδϣϯ͸ Git ͳΓͰ؅ཧ͞ΕͯΔ
  17. ੩తαΠτϗεςΟϯάͷબఆج४ • Amplify Console ʹ໌֬ʹ༏Ґੑ͕͋Δ • Firebase Hosting • σϓϩΠ·ͰҰؾ௨؏Ͱݟͯ͘ΕΔΘ͚Ͱ͸ͳ͍

    • ύϑΥʔϚϯε͸ཪ͕ Fastly ͳͷͰ͋·ΓมΘΒͳ͍ • ७ਮͳ੩తαΠτ͚ͩͰͳ͍ FaaS ࿈ܞ͕ඞཁͳΒ༗ޮ • Functions ͕ Lambda@Edge ΑΓ੍ݶ͕গͳ͍ͨΊ
  18. ੩తαΠτϗεςΟϯάͷબఆج४ • Amplify Console ͕ྼΔ෦෼΋͋Δ • Netlify • Netlify ͷத਎͸

    AWS ͳͷͰΠϯϑϥߏ੒ͱͯ͠͸ಉ͡ • ελʔτΞοϓ͚ͩ͋ͬͯ GitHub ͱͷ࿈ܞ΍௨஌ͳͲ Amplify Console ๊͕͍͑ͯΔܽ఺͸ղফ͞Ε͍ͯΔ • AWS ΞΧ΢ϯτͱ઀ଓͯ͠ Lambda ؔ਺Λݺͼग़ͤΔͷͰ Lambda@Edge Έ͍ͨͳ͜ͱΛ͍ͨ͠৔߹ʹ΋ରԠ • ͨͩ͠೔ຊ͔ΒͩͱϦʔδϣϯϨΠςϯγ͕ଟগਏ͍
  19. Topics 1. AWS Amplify ͱ Amplify Console 2. S3 +

    CloudFront + ACM ͱൺֱͨ͠ Amplify Console ͷར఺ 3. Amplify Console ಛ༗ͷخ͠͞ͱ೰Έ 4. ݱ࣌఺Ͱͷ੩తαΠτϗεςΟϯάͷબఆͷ݁࿦ 5. ·ͱΊ
  20. ·ͱΊ 1 • Amplify ʹ͸ଟ͘ͷछྨ͕͋Δ • MobileHub ޙܧͱͯ͠ͷ AWS Amplify

    • iOS, Android, Web ༻։ൃϑϨʔϜϫʔΫ Amplify Framework • Amplify ϑΝϛϦʔͷϗεςΟϯάαʔϏε Amplify Console • Amplify Console • S3 + CloudFront + ACM + Route53 ͷϥούʔ + α • ͦΕͧΕͷαʔϏε୯ମͰ͸ඇྗͳ෦෼Λ݁߹ͯͯ͠خ͍͠
  21. ·ͱΊ 2 • خ͍͠ Amplify Console ಠࣗػೳ • ϕʔγοΫೝূʹΑΔ؆қతͳΞΫηε੍ݶ •

    ϒϥϯνΛࣗಈݕग़ͨ͠σϓϩΠػೳ • Amplify Console ͷࠔΓͲ͜Ζ • ݱঢ়͸Ͳ͏ͯ͠΋௨஌ػೳ͕ශऑ • ιϦϡʔγϣϯͱͯ͠ • ଞͷϗεςΟϯάαʔϏε΋ߟ͑ͭͭ΋ AWS ͳΒ Amplify Console Ұ୒ʹͳΓͭͭ͋Δ