at JAWS-UG 名古屋 コンテナを語ろう!! (2022-03-30)
2022.3.30 - YUJI TakayamaAWS AMPLIFY ͱ NUXT.JSͰ࢝ΊΔίϯςφੜ׆JAWS-UG ໊ݹ ίϯςφΛޠΖ͏!!
View Slide
τϨϊέʔτגࣜձ͔ࣾͨ·ɹΏ͏͡ߴࢁɹ༟࢘)JTUPSZ͔Β"84ೝఆΠϯετϥΫλʔʢ""*ʣͱͯ͠"84ೝఆΫϥεϧʔϜτϨʔχϯάΛ୲લ৬ɺγοΫεɾΞύʔτͰ.PWBCMF5ZQFͷϦʔυΤϯδχΞ݉ϓϩμΫτϚωʔδϝϯτΛ୲'BWPSJUF"844FSWJDFT"84-BNCEB"84"NQMJGZ
ίϯςφͬͯࣗͰ࡞Δͷʁ
IntroductionContentfulNuxt.JSNuxt.JS + ContentfulAmplifyAmplify + Nuxt.JS + ContentfulConclusionAWS AMPLIFY ͱ NUXT.JSͰ࢝ΊΔίϯςφੜ׆
ίʔεͰ͏ϦϯΫू؆୯ʹαΠτߏஙɾӡ༻͍ͨ͠[BEFORE] EC2 + ELB + Movable Type -> S3 + CloudFront ੩తϑΝΠϧੜ࣌Ҏ֎্ཱͪ͛Δඞཁͳ͍ EC2 ࢭΊΔͱ ύϒϦοΫ IP มΘΔ͔Β ELB ཉ͍͠ ͰɺීஈΘͳ͍ͷʹ ELB ͱ͔ϜμINTRODUCTION
Headless CMSREST API ʹΑΔσʔλऔಘίϯςϯπߋ৽࣌ʹ Webhook ݺͼग़͠ՄೳCONTENTFUL
Server Side RenderingServer Side GenerationVue.JS on NodeNUXT.JS
Server Side GenerationContentful ͷίϯςϯπߋ৽Ͱ webhook ͔Β nuxt generate ಈ͔͍ͨ͠NUXT.JS + CONTENTFUL
EC2 ֎ECS ίϯςφΠϝʔδΛಈ͔ͯ͠Ϗϧυ͢Δҙຯ͕ͳ͍ SSR ͳΒ͍͍͚ͲɺͦΕͳΒ Lambda Ͱ͍͍Lambda SSR ͳΒ࠷༗ྗ͚ͩͲɺࠓճ SSG ͍ͨ͠CodeBuild + CodePipeline ѱ͘ͳ͍͚Ͳ৭ʑઃఆ͠ͳ͍ͱ͍͚ͳ͍NUXT.JS ON AWS
Hosting environment / Backend environmentGit ϨϙδτϦͱ࿈ܞͨ͠ CI/CD ύΠϓϥΠϯͷ࣮ߦड৴ΣϒϑοΫBasic ೝূCloudFron + S3ΧελϜυϝΠϯରԠAWS AMPLIFY
Hosting environment / Backend environmentGit ϨϙδτϦͱ࿈ܞͨ͠ CI/CD ύΠϓϥΠϯͷ࣮ߦड৴ΣϒϑοΫBasic ೝূCloudFron + S3ΧελϜυϝΠϯରԠAMPLIFY + NUXT.JS + CONTENTFUL
ARCHITECTURE
ίϯςφڥศརͩΑͶίϯςφΠϝʔδΛ࡞Βͳͯ͘ྑ͍αʔϏε͕࣮͍Ζ͍Ζ͋ΔApp RunnerAmplifyίϯςφΛϥΫ͢ΔαʔϏε࣮͍Ζ͍Ζ͋ΔApp2ContainerCopilotCONCLUSION
THANK YOU FOR LISTENING