2019.09.05 に開催された awswakaran.tokyo #2 の登壇スライドです。
Amplify Console ੜҎདྷຊ൪ӡ༻͚ͭͮͯ͠Θ͔ͬͨ͜ͱ2019.09.25 #awswakaran_tokyo Takuma HANATANI(@potato4d)
View Slide
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
Topics1. AWS Amplify ͱ Amplify Console2. S3 + CloudFront + ACM ͱൺֱͨ͠ Amplify Console ͷར3. Amplify Console ಛ༗ͷخ͠͞ͱΈ4. ݱ࣌Ͱͷ੩తαΠτϗεςΟϯάͷબఆͷ݁5. ·ͱΊ
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 ͱ࿈ܞͰ͖Δઐ༻ͷϑϨʔϜϫʔΫ͕ଘࡏ
AWS Amplify (https://aws.amazon.com/jp/amplify/)
Amplify Framework (https://aws.amazon.com/jp/amplify/framework/)
Amplify Console• Amplify ͷϑΝϛϦʔαʔϏεͱͳΔ੩తαΠτϗεςΟϯά• 201812݄ʹϦϦʔεɺ4݄ʹ౦ژϦʔδϣϯೖΓ• S3 + CloudFront + ACM + Route53 ͷϥούʔ• Firebase Hosting Netlify ͷΑ͏ͳͷ• Amplify ͷઃఆϑΝΠϧΛྲྀ༻ͯ͠੩తαΠτͷ CI / CD ͕Մೳ• Git ϗεςΟϯά͔Βͷ࿈ܞͱ YAML ϑΝΠϧ͚ͩͰӡ༻·Ͱ• ͦͷଞ Amplify Console ͳΒͰͷઃఆଟଘࡏ
AWS Amplify Console (https://aws.amazon.com/jp/amplify/console/)
S3/CF/ACM/Route53 ͱൺֱͨ͠ར• Amplify Console ੩తαΠτϗεςΟϯάʹϑΥʔΧε͍ͯ͠Δ• Amplify Console ಛ༗ͷศརͳػೳ͕๛ʹଘࡏ• ϒϥϯν͝ͱͷσϓϩΠͱυϝΠϯׂΓৼΓ• ϒϥϯν͝ͱͷϕʔγοΫೝূͷઃఆ• ڥมͷઃఆ• ϝʔϧϕʔεͷσϓϩΠ௨ͷઃఆ• etc…
S3/CF/ACM/Route53 ͱൺֱͨ͠ར• Amplify Console ੩తαΠτϗεςΟϯάʹϑΥʔΧε͍ͯ͠Δ• AWS αʔϏε܈ͷ໘ͳϝϯςφϯε࡞ۀ͕ෆཁ• ͨͱ͑ S3 ͷόέοτͷআͳͲ͕ෆཁ• CI / CD ڥ Amplify Console Ͱ୲อ͞Ε͍ͯΔ• CircleCI CodeBuild Ͱߏங͢Δඞཁ͕ͳ͍• ͦͦਓ͕ؒखಈͰσϓϩΠͰ͖ͳ͍• ͦͦԿखಈͰߏஙͨ͠Γ IaC Λॻ͘ඞཁ͢Βͳ͍
࠷৽Ϗϧυͷঢ়ଶ͕τοϓϖʔδͷεΫϦʔϯγϣοτ͖ͭͰࡉ͔͘දࣔ͞ΕΔ
Amplify Console ಛ༗ͷخ͠͞ͱΈ• Amplify Console ͷخ͠͞• ݖݶΞΫηείϯτϩʔϧཧͷॊೈੑ• ϕʔγοΫೝূ͕͑Δ੩తαΠτϗεςΟϯά͕ͳ͍• ଞͷखஈͷ߹ɺ CDN + FaaS ͔͠બࢶ͕ͳ͍• CloudFront + Lambda@Edge• Firebase + Functions• ӡ༻ଆͱͯ͠ AWS ͷ IAM ͱඥ͍͍ͯΔͷخ͍͠
S3 ͰϕʔγοΫೝূ͍͚ͨͩ͠ͳͷʹ Lambda@Edge ܥͷ͔ΓʹͳͬͯͭΒ͍
Amplify Console Ͱͷೝূઃఆը໘
Amplify Console ಛ༗ͷخ͠͞ͱΈ• Amplify Console ͷخ͠͞• ෳͷڥͷ౷߹ཧ• ϒϥϯνຖʹυϝΠϯ͕ඥ͖ͮɺຊ൪ͱεςʔδϯάΛಉ࣌ཧՄೳ• ͞Βʹࠓ7݄ʹϒϥϯνͷࣗಈݕग़ɾσϓϩΠ·ͰϦϦʔε• ϑϩϯτΤϯυΤϯδχΞతʹݴ͏ͱ Netlify ͷ Deploy Preview ͷΑ͏ͳػೳ• https://dev.to/kkemple/branch-based-deployment-strategies-with-aws-amplify-console-1n3c
Amplify Console ಛ༗ͷخ͠͞ͱΈ• Amplify Console ʹલʹ͚͋ͬͨͲղܾ͞ΕͨΈ• ϒϥϯν͝ͱͷσϓϩΠ͕ࣗಈͰඥ͔ͳ͍• → ઌड़ͷ௨Γࠓ7݄ʹରԠͨ͠ͷͰղফࡁΈ• ւ֎Ϧʔδϣϯͷ͍ͤͰ CF ࠐͰ Origin ͷϨΠςϯγ͕ͭΒ͍• → ઌड़ͷ௨Γࠓ4݄ʹରԠͨ͠ͷͰղফࡁΈ• → ࢲͷ߹౦ژʹ͘Δ·Ͱཧը໘ SPA ͚ͩͰͬͯ·ͨ͠• ͜ΕΒ͕ਏ͔ͬͨਓ࠶νϟϨϯδΛ͓͢͢Ί• → άϩʔόϧͰͳ͍ͷͰϦʔδϣϯ͝ͱʹ৽ن࡞ඞཁ
Amplify Console ಛ༗ͷخ͠͞ͱΈ• Amplify Console ͷΈ• σϓϩΠ݁Ռͷ௨ಋઢ͕ශऑ• ϒϥϯν Preview ͕͋Δ͕ GitHub ͱ࿈ܞ͍ͯ͠ΔΘ͚Ͱͳ͍• ϝʔϧ௨Ҏ֎ͷσϑΥϧτͷσϓϩΠ Integration ͕ͳ͍• Webhook ػೳϏϧυൃՐͷͨΊͷͷ(Incoming)• Slack ௨͍ͤͨ͞ͳΒϝʔϧ௨ + SES + Lambda ͳͲ• Production Build ͷ݁ՌΛશһ͕Ѳ͍͍ͯͨ͠߹ͳͲෆ͖
Amplify Console ಛ༗ͷخ͠͞ͱΈ• Amplify Console ͷΈ• Deploy Preview ͷ௨ශऑ• ͪ͜Βಉ༷ʹ branch auto detect ͋ΕͲ PR ʹίϝϯτ͕ͭ͘Α͏ͳΘ͚Ͱͳ͍• AWS ʹ͋Γ͕ͪͳѱ͍ҙຯͰͷΒ͠͞ɺCodeCommit ͕͋Δ͜ͱؚΊͯڝ߹αʔϏεͱൺֱ͢Δͱ࿈ܞͷऑ͞ҰఆҎ্ଘࡏ͢Δ
੩తαΠτϗεςΟϯάͷબఆج४• Amplify Console ʹ໌֬ʹ༏Ґੑ͕͋Δ• S3 + CF + α• S3 ͕Χόʔ͢Δ༻్ʹ͍ͭͯ੩తϗεςΟϯά too much• Web αΠτͳΒҰ࣌ΞΫηε༻ϦϯΫͷൃߦཁΒͳ͍• Web αΠτͳΒͲͷΈͪશͯ Public ͳͷͰ Object ͷϦιʔεϩάΛ On ʹ͢Δ͜ͱͳ͍• Web αΠτͳΒϑΝΠϧͷόʔδϣϯ Git ͳΓͰཧ͞ΕͯΔ
੩తαΠτϗεςΟϯάͷબఆج४• Amplify Console ʹ໌֬ʹ༏Ґੑ͕͋Δ• Firebase Hosting• σϓϩΠ·ͰҰؾ௨؏Ͱݟͯ͘ΕΔΘ͚Ͱͳ͍• ύϑΥʔϚϯεཪ͕ Fastly ͳͷͰ͋·ΓมΘΒͳ͍• ७ਮͳ੩తαΠτ͚ͩͰͳ͍ FaaS ࿈ܞ͕ඞཁͳΒ༗ޮ• Functions ͕ Lambda@Edge ΑΓ੍ݶ͕গͳ͍ͨΊ
੩తαΠτϗεςΟϯάͷબఆج४• Amplify Console ͕ྼΔ෦͋Δ• Netlify• Netlify ͷத AWS ͳͷͰΠϯϑϥߏͱͯ͠ಉ͡• ελʔτΞοϓ͚ͩ͋ͬͯ GitHub ͱͷ࿈ܞ௨ͳͲ AmplifyConsole ๊͕͍͑ͯΔܽղফ͞Ε͍ͯΔ• AWS ΞΧϯτͱଓͯ͠ Lambda ؔΛݺͼग़ͤΔͷͰLambda@Edge Έ͍ͨͳ͜ͱΛ͍ͨ͠߹ʹରԠ• ͨͩ͠ຊ͔ΒͩͱϦʔδϣϯϨΠςϯγ͕ଟগਏ͍
·ͱΊ 1• Amplify ʹଟ͘ͷछྨ͕͋Δ• MobileHub ޙܧͱͯ͠ͷ AWS Amplify• iOS, Android, Web ༻։ൃϑϨʔϜϫʔΫ Amplify Framework• Amplify ϑΝϛϦʔͷϗεςΟϯάαʔϏε Amplify Console• Amplify Console• S3 + CloudFront + ACM + Route53 ͷϥούʔ + α• ͦΕͧΕͷαʔϏε୯ମͰඇྗͳ෦Λ݁߹ͯͯ͠خ͍͠
·ͱΊ 2• خ͍͠ Amplify Console ಠࣗػೳ• ϕʔγοΫೝূʹΑΔ؆қతͳΞΫηε੍ݶ• ϒϥϯνΛࣗಈݕग़ͨ͠σϓϩΠػೳ• Amplify Console ͷࠔΓͲ͜Ζ• ݱঢ়Ͳ͏ͯ͠௨ػೳ͕ශऑ• ιϦϡʔγϣϯͱͯ͠• ଞͷϗεςΟϯάαʔϏεߟ͑ͭͭ AWS ͳΒ Amplify ConsoleҰʹͳΓͭͭ͋Δ