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

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

Transcript

1. 2022.3.30 - YUJI Takayama AWS AMPLIFY ͱ NUXT.JS Ͱ࢝ΊΔίϯςφੜ׆ JAWS-UG ໊ݹ԰ ίϯςφΛޠΖ͏!!
2. τϨϊέʔτגࣜձࣾ
   ͔ͨ΍·ɹΏ͏͡
   ߴࢁɹ༟࢘ )JTUPSZ
   ೥͔Β
   "84
   ೝఆΠϯετϥΫλʔʢ""*ʣͱͯ͠
   "84
   ೝఆΫϥεϧʔϜτϨʔχϯάΛ୲౰
   લ৬͸ɺγοΫεɾΞύʔτͰ
   .PWBCMF
   5ZQF
   ͷ
   ϦʔυΤϯδχΞ݉ϓϩμΫτϚωʔδϝϯτΛ୲౰
   'BWPSJUF
   "84
   4FSWJDFT
   
   
   
   
   
   "84
   -BNCEB
   
   
   
   
   
   "84
   "NQMJGZ
3. ίϯςφͬͯ ࣗ෼Ͱ࡞Δͷʁ
4. Introduction Contentful Nuxt.JS Nuxt.JS + Contentful Amplify Amplify + Nuxt.JS + Contentful Conclusion AWS AMPLIFY ͱ NUXT.JS Ͱ࢝ΊΔίϯςφੜ׆
5. ίʔεͰ࢖͏ϦϯΫू ؆୯ʹαΠτߏஙɾӡ༻͍ͨ͠ [BEFORE] EC2 + ELB + Movable Type -> S3 + CloudFront 
 ੩తϑΝΠϧੜ੒࣌Ҏ֎͸্ཱͪ͛Δඞཁͳ͍ 
 EC2 ࢭΊΔͱ ύϒϦοΫ IP มΘΔ͔Β ELB ཉ͍͠ 
 Ͱ΋ɺීஈ࢖Θͳ͍ͷʹ ELB ͱ͔Ϝμ INTRODUCTION
6. Headless CMS REST API ʹΑΔσʔλऔಘ ίϯςϯπߋ৽࣌ʹ Webhook ݺͼग़͠Մೳ CONTENTFUL
7. Server Side Rendering Server Side Generation Vue.JS on Node NUXT.JS
8. Server Side Generation Contentful ͷίϯςϯπߋ৽Ͱ webhook ͔Β nuxt generate ಈ͔͍ͨ͠ NUXT.JS + CONTENTFUL
9. EC2 
 ࿦֎ ECS 
 ίϯςφΠϝʔδΛಈ͔ͯ͠Ϗϧυ͢Δҙຯ͕ͳ͍ 
 SSR ͳΒ͍͍͚ͲɺͦΕͳΒ Lambda Ͱ͍͍ Lambda 
 SSR ͳΒ࠷༗ྗ͚ͩͲɺࠓճ͸ SSG ͍ͨ͠ CodeBuild + CodePipeline 
 ѱ͘͸ͳ͍͚Ͳ৭ʑઃఆ͠ͳ͍ͱ͍͚ͳ͍ NUXT.JS ON AWS
10. Hosting environment / Backend environment Git ϨϙδτϦͱ࿈ܞͨ͠ CI/CD ύΠϓϥΠϯͷ࣮ߦ ड৴΢ΣϒϑοΫ Basic ೝূ CloudFron + S3 ΧελϜυϝΠϯରԠ AWS AMPLIFY
11. Hosting environment / Backend environment Git ϨϙδτϦͱ࿈ܞͨ͠ CI/CD ύΠϓϥΠϯͷ࣮ߦ ड৴΢ΣϒϑοΫ Basic ೝূ CloudFron + S3 ΧελϜυϝΠϯରԠ AMPLIFY + NUXT.JS + CONTENTFUL
12. ARCHITECTURE
13. ίϯςφ؀ڥ͸ศརͩΑͶ ίϯςφΠϝʔδΛ࡞Βͳͯ͘΋ྑ͍αʔϏε͕࣮͸͍Ζ͍Ζ͋Δ App Runner Amplify ίϯςφΛϥΫ͢ΔαʔϏε΋࣮͸͍Ζ͍Ζ͋Δ App2Container Copilot CONCLUSION
14. THANK YOU FOR LISTENING