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

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

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