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

by potato4d(Takuma HANATANI)

Slide 1

Slide 1 text

Amplify Console ஀ੜҎདྷ ຊ൪ӡ༻͚ͭͮͯ͠Θ͔ͬͨ͜ͱ 2019.09.25 #awswakaran_tokyo Takuma HANATANI(@potato4d)

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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 ͱ΋࿈ܞͰ͖Δઐ༻ͷϑϨʔϜϫʔΫ͕ଘࡏ

Slide 6

Slide 6 text

AWS Amplify (https://aws.amazon.com/jp/amplify/)

Slide 7

Slide 7 text

Amplify Framework (https://aws.amazon.com/jp/amplify/framework/)

Slide 8

Slide 8 text

Amplify Console • Amplify ͷϑΝϛϦʔαʔϏεͱͳΔ੩తαΠτϗεςΟϯά • 2018೥12݄ʹϦϦʔεɺ4݄ʹ౦ژϦʔδϣϯೖΓ • S3 + CloudFront + ACM + Route53 ͷϥούʔ • Firebase Hosting ΍ Netlify ͷΑ͏ͳ΋ͷ • Amplify ͷઃఆϑΝΠϧΛྲྀ༻ͯ͠੩తαΠτͷ CI / CD ͕Մೳ • Git ϗεςΟϯά͔Βͷ࿈ܞͱ YAML ϑΝΠϧ͚ͩͰӡ༻·Ͱ • ͦͷଞ Amplify Console ͳΒͰ͸ͷઃఆ΋ଟ਺ଘࡏ

Slide 9

Slide 9 text

AWS Amplify Console (https://aws.amazon.com/jp/amplify/console/)

Slide 10

Slide 10 text

Slide 11

Slide 11 text

S3/CF/ACM/Route53 ͱൺֱͨ͠ར఺ • Amplify Console ͸੩తαΠτϗεςΟϯάʹϑΥʔΧε͍ͯ͠Δ • Amplify Console ಛ༗ͷศརͳػೳ͕๛෋ʹଘࡏ • ϒϥϯν͝ͱͷσϓϩΠͱυϝΠϯׂΓৼΓ • ϒϥϯν͝ͱͷϕʔγοΫೝূͷઃఆ • ؀ڥม਺ͷઃఆ • ϝʔϧϕʔεͷσϓϩΠ௨஌ͷઃఆ • etc…

Slide 12

Slide 12 text

S3/CF/ACM/Route53 ͱൺֱͨ͠ར఺ • Amplify Console ͸੩తαΠτϗεςΟϯάʹϑΥʔΧε͍ͯ͠Δ • AWS αʔϏε܈ͷ໘౗ͳϝϯςφϯε࡞ۀ͕ෆཁ • ͨͱ͑͹ S3 ͷόέοτͷ૟আͳͲ͕ෆཁ • CI / CD ؀ڥ͸ Amplify Console Ͱ୲อ͞Ε͍ͯΔ • CircleCI ΍ CodeBuild Ͱߏங͢Δඞཁ͕ͳ͍ • ͦ΋ͦ΋ਓ͕ؒखಈͰσϓϩΠͰ͖ͳ͍ • ͦ΋ͦ΋Կ΋खಈͰߏஙͨ͠Γ IaC Λॻ͘ඞཁ͢Βͳ͍

Slide 13

Slide 13 text

࠷৽Ϗϧυͷঢ়ଶ͕τοϓϖʔδͷεΫϦʔϯγϣοτ͖ͭͰࡉ͔͘දࣔ͞ΕΔ

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Amplify Console ಛ༗ͷخ͠͞ͱ೰Έ • Amplify Console ͷخ͠͞ • ݖݶ΍ΞΫηείϯτϩʔϧ؅ཧͷॊೈੑ • ϕʔγοΫೝূ͕࢖͑Δ੩తαΠτϗεςΟϯά͕ͳ͍ • ଞͷखஈͷ৔߹ɺ CDN + FaaS ͔͠બ୒ࢶ͕ͳ͍ • CloudFront + Lambda@Edge • Firebase + Functions • ӡ༻ଆͱͯ͠΋ AWS ͷ IAM ͱඥ෇͍͍ͯΔͷ͸خ͍͠

Slide 16

Slide 16 text

S3 ͰϕʔγοΫೝূ͍͚ͨͩ͠ͳͷʹ Lambda@Edge ܥͷ࿩͹͔ΓʹͳͬͯͭΒ͍

Slide 17

Slide 17 text

Amplify Console Ͱͷೝূઃఆը໘

Slide 18

Slide 18 text

Amplify Console ಛ༗ͷخ͠͞ͱ೰Έ • Amplify Console ͷخ͠͞ • ෳ਺ͷ؀ڥͷ౷߹؅ཧ • ϒϥϯνຖʹυϝΠϯ͕ඥ͖ͮɺຊ൪ͱεςʔδϯάΛಉ࣌؅ཧՄೳ • ͞Βʹࠓ೥7݄ʹϒϥϯνͷࣗಈݕग़ɾσϓϩΠ·ͰϦϦʔε • ϑϩϯτΤϯυΤϯδχΞతʹݴ͏ͱ Netlify ͷ Deploy Preview ͷ Α͏ͳػೳ • https://dev.to/kkemple/branch-based-deployment-strategies- with-aws-amplify-console-1n3c

Slide 19

Slide 19 text

Amplify Console ಛ༗ͷخ͠͞ͱ೰Έ • Amplify Console ʹલʹ͚͋ͬͨͲղܾ͞Εͨ೰Έ • ϒϥϯν͝ͱͷσϓϩΠ͕ࣗಈͰඥ෇͔ͳ͍ • → ઌड़ͷ௨Γࠓ೥7݄ʹରԠͨ͠ͷͰղফࡁΈ • ւ֎Ϧʔδϣϯͷ͍ͤͰ CF ࠐͰ΋ Origin ͷϨΠςϯγ͕ͭΒ͍ • → ઌड़ͷ௨Γࠓ೥4݄ʹରԠͨ͠ͷͰղফࡁΈ • → ࢲͷ৔߹͸౦ژʹ͘Δ·Ͱ͸؅ཧը໘ SPA ͚ͩͰ࢖ͬͯ·ͨ͠ • ͜ΕΒ͕ਏ͔ͬͨਓ͸࠶νϟϨϯδΛ͓͢͢Ί • → άϩʔόϧͰ͸ͳ͍ͷͰϦʔδϣϯ͝ͱʹ৽ن࡞੒͸ඞཁ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

੩తαΠτϗεςΟϯάͷબఆج४ • Amplify Console ʹ໌֬ʹ༏Ґੑ͕͋Δ • Firebase Hosting • σϓϩΠ·ͰҰؾ௨؏Ͱݟͯ͘ΕΔΘ͚Ͱ͸ͳ͍ • ύϑΥʔϚϯε͸ཪ͕ Fastly ͳͷͰ͋·ΓมΘΒͳ͍ • ७ਮͳ੩తαΠτ͚ͩͰͳ͍ FaaS ࿈ܞ͕ඞཁͳΒ༗ޮ • Functions ͕ Lambda@Edge ΑΓ੍ݶ͕গͳ͍ͨΊ

Slide 25

Slide 25 text

੩తαΠτϗεςΟϯάͷબఆج४ • Amplify Console ͕ྼΔ෦෼΋͋Δ • Netlify • Netlify ͷத਎͸ AWS ͳͷͰΠϯϑϥߏ੒ͱͯ͠͸ಉ͡ • ελʔτΞοϓ͚ͩ͋ͬͯ GitHub ͱͷ࿈ܞ΍௨஌ͳͲ Amplify Console ๊͕͍͑ͯΔܽ఺͸ղফ͞Ε͍ͯΔ • AWS ΞΧ΢ϯτͱ઀ଓͯ͠ Lambda ؔ਺Λݺͼग़ͤΔͷͰ Lambda@Edge Έ͍ͨͳ͜ͱΛ͍ͨ͠৔߹ʹ΋ରԠ • ͨͩ͠೔ຊ͔ΒͩͱϦʔδϣϯϨΠςϯγ͕ଟগਏ͍

Slide 26

Slide 26 text

Slide 27

Slide 27 text

·ͱΊ 1 • Amplify ʹ͸ଟ͘ͷछྨ͕͋Δ • MobileHub ޙܧͱͯ͠ͷ AWS Amplify • iOS, Android, Web ༻։ൃϑϨʔϜϫʔΫ Amplify Framework • Amplify ϑΝϛϦʔͷϗεςΟϯάαʔϏε Amplify Console • Amplify Console • S3 + CloudFront + ACM + Route53 ͷϥούʔ + α • ͦΕͧΕͷαʔϏε୯ମͰ͸ඇྗͳ෦෼Λ݁߹ͯͯ͠خ͍͠

Slide 28

Slide 28 text

·ͱΊ 2 • خ͍͠ Amplify Console ಠࣗػೳ • ϕʔγοΫೝূʹΑΔ؆қతͳΞΫηε੍ݶ • ϒϥϯνΛࣗಈݕग़ͨ͠σϓϩΠػೳ • Amplify Console ͷࠔΓͲ͜Ζ • ݱঢ়͸Ͳ͏ͯ͠΋௨஌ػೳ͕ශऑ • ιϦϡʔγϣϯͱͯ͠ • ଞͷϗεςΟϯάαʔϏε΋ߟ͑ͭͭ΋ AWS ͳΒ Amplify Console Ұ୒ʹͳΓͭͭ͋Δ