$30 off During Our Annual Pro Sale. View Details »

AWS Amplify と Nuxt.js で始めるコンテナ生活

AWS Amplify と Nuxt.js で始めるコンテナ生活

at JAWS-UG 名古屋 コンテナを語ろう!! (2022-03-30)

Yuji Takayama

March 30, 2022
Tweet

More Decks by Yuji Takayama

Other Decks in Technology

Transcript

  1. 2022.3.30 - YUJI Takayama
    AWS AMPLIFY ͱ NUXT.JS
    Ͱ࢝ΊΔίϯςφੜ׆
    JAWS-UG ໊ݹ԰ ίϯςφΛޠΖ͏!!

    View Slide

  2. τϨϊέʔτגࣜձࣾ
    ͔ͨ΍·ɹΏ͏͡
    ߴࢁɹ༟࢘
    )JTUPSZ
    ೥͔Β"84ೝఆΠϯετϥΫλʔʢ""*ʣͱͯ͠
    "84ೝఆΫϥεϧʔϜτϨʔχϯάΛ୲౰
    લ৬͸ɺγοΫεɾΞύʔτͰ.PWBCMF5ZQFͷ
    ϦʔυΤϯδχΞ݉ϓϩμΫτϚωʔδϝϯτΛ୲౰
    'BWPSJUF"844FSWJDFT
    "84-BNCEB
    "84"NQMJGZ

    View Slide

  3. ίϯςφͬͯ


    ࣗ෼Ͱ࡞Δͷʁ

    View Slide

  4. Introduction


    Contentful


    Nuxt.JS


    Nuxt.JS + Contentful


    Amplify


    Amplify + Nuxt.JS + Contentful


    Conclusion
    AWS AMPLIFY ͱ NUXT.JS


    Ͱ࢝ΊΔίϯςφੜ׆

    View Slide

  5. ίʔεͰ࢖͏ϦϯΫू


    ؆୯ʹαΠτߏஙɾӡ༻͍ͨ͠


    [BEFORE] EC2 + ELB + Movable Type -> S3 + CloudFront

    ੩తϑΝΠϧੜ੒࣌Ҏ֎͸্ཱͪ͛Δඞཁͳ͍

    EC2 ࢭΊΔͱ ύϒϦοΫ IP มΘΔ͔Β ELB ཉ͍͠

    Ͱ΋ɺීஈ࢖Θͳ͍ͷʹ ELB ͱ͔Ϝμ
    INTRODUCTION

    View Slide

  6. Headless CMS


    REST API ʹΑΔσʔλऔಘ


    ίϯςϯπߋ৽࣌ʹ Webhook ݺͼग़͠Մೳ
    CONTENTFUL

    View Slide

  7. Server Side Rendering


    Server Side Generation


    Vue.JS on Node
    NUXT.JS

    View Slide

  8. Server Side Generation


    Contentful ͷίϯςϯπߋ৽Ͱ webhook ͔Β nuxt generate ಈ͔͍ͨ͠
    NUXT.JS + CONTENTFUL

    View Slide

  9. EC2

    ࿦֎


    ECS

    ίϯςφΠϝʔδΛಈ͔ͯ͠Ϗϧυ͢Δҙຯ͕ͳ͍

    SSR ͳΒ͍͍͚ͲɺͦΕͳΒ Lambda Ͱ͍͍


    Lambda

    SSR ͳΒ࠷༗ྗ͚ͩͲɺࠓճ͸ SSG ͍ͨ͠


    CodeBuild + CodePipeline

    ѱ͘͸ͳ͍͚Ͳ৭ʑઃఆ͠ͳ͍ͱ͍͚ͳ͍
    NUXT.JS ON AWS

    View Slide

  10. Hosting environment / Backend environment


    Git ϨϙδτϦͱ࿈ܞͨ͠ CI/CD ύΠϓϥΠϯͷ࣮ߦ


    ड৴΢ΣϒϑοΫ


    Basic ೝূ


    CloudFron + S3


    ΧελϜυϝΠϯରԠ
    AWS AMPLIFY

    View Slide

  11. Hosting environment / Backend environment


    Git ϨϙδτϦͱ࿈ܞͨ͠ CI/CD ύΠϓϥΠϯͷ࣮ߦ


    ड৴΢ΣϒϑοΫ


    Basic ೝূ


    CloudFron + S3


    ΧελϜυϝΠϯରԠ
    AMPLIFY + NUXT.JS + CONTENTFUL

    View Slide

  12. ARCHITECTURE

    View Slide

  13. ίϯςφ؀ڥ͸ศརͩΑͶ


    ίϯςφΠϝʔδΛ࡞Βͳͯ͘΋ྑ͍αʔϏε͕࣮͸͍Ζ͍Ζ͋Δ


    App Runner


    Amplify


    ίϯςφΛϥΫ͢ΔαʔϏε΋࣮͸͍Ζ͍Ζ͋Δ


    App2Container


    Copilot
    CONCLUSION

    View Slide

  14. THANK YOU FOR LISTENING

    View Slide