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

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

Transcript

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

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. Amplify Console Ͱͷೝূઃఆը໘
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide