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

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

Transcript

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