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

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

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

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

Potato4d(Hanatani Takuma)

September 25, 2019
Tweet

More Decks by Potato4d(Hanatani Takuma)

Other Decks in Technology

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