Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AWS Amplify と Nuxt.js で始めるコンテナ生活
Search
Yuji Takayama
March 30, 2022
Technology
0
490
AWS Amplify と Nuxt.js で始めるコンテナ生活
at JAWS-UG 名古屋 コンテナを語ろう!! (2022-03-30)
Yuji Takayama
March 30, 2022
Tweet
Share
More Decks by Yuji Takayama
See All by Yuji Takayama
re:Invent で感じた AWS のメッセージ
swordbreaker
0
71
俺たちのプロトタイプ
swordbreaker
0
680
さぁ、ブログをはじめようどこで?どうやって?
swordbreaker
0
470
実践 Movable Type 7
swordbreaker
0
2.9k
できる Movable Type 7
swordbreaker
0
400
トフでもわかるコンテンツタイプ講座
swordbreaker
0
1.5k
Movable Type 7 のすべて
swordbreaker
2
1.6k
Other Decks in Technology
See All in Technology
shake-upを科学する
rsakata
7
910
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
180
TLSから見るSREの未来
atpons
2
200
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
130
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
290
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4.1k
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
300
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
140
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
470
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
260
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
270
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
A better future with KSS
kneath
238
17k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Become a Pro
speakerdeck
PRO
29
5.4k
Code Reviewing Like a Champion
maltzj
524
40k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Site-Speed That Sticks
csswizardry
10
690
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Music & Morning Musume
bryan
46
6.7k
Transcript
2022.3.30 - YUJI Takayama AWS AMPLIFY ͱ NUXT.JS Ͱ࢝ΊΔίϯςφੜ׆ JAWS-UG
໊ݹ ίϯςφΛޠΖ͏!!
τϨϊέʔτגࣜձࣾ ͔ͨ·ɹΏ͏͡ ߴࢁɹ༟࢘ )JTUPSZ ͔Β"84ೝఆΠϯετϥΫλʔʢ""*ʣͱͯ͠ "84ೝఆΫϥεϧʔϜτϨʔχϯάΛ୲ લ৬ɺγοΫεɾΞύʔτͰ.PWBCMF5ZQFͷ ϦʔυΤϯδχΞ݉ϓϩμΫτϚωʔδϝϯτΛ୲ 'BWPSJUF"844FSWJDFT "84-BNCEB
"84"NQMJGZ
ίϯςφͬͯ ࣗͰ࡞Δͷʁ
Introduction Contentful Nuxt.JS Nuxt.JS + Contentful Amplify Amplify + Nuxt.JS
+ Contentful Conclusion AWS AMPLIFY ͱ NUXT.JS Ͱ࢝ΊΔίϯςφੜ׆
ίʔεͰ͏ϦϯΫू ؆୯ʹαΠτߏஙɾӡ༻͍ͨ͠ [BEFORE] EC2 + ELB + Movable Type ->
S3 + CloudFront ੩తϑΝΠϧੜ࣌Ҏ֎্ཱͪ͛Δඞཁͳ͍ EC2 ࢭΊΔͱ ύϒϦοΫ IP มΘΔ͔Β ELB ཉ͍͠ ͰɺීஈΘͳ͍ͷʹ ELB ͱ͔Ϝμ INTRODUCTION
Headless CMS REST API ʹΑΔσʔλऔಘ ίϯςϯπߋ৽࣌ʹ Webhook ݺͼग़͠Մೳ CONTENTFUL
Server Side Rendering Server Side Generation Vue.JS on Node NUXT.JS
Server Side Generation Contentful ͷίϯςϯπߋ৽Ͱ webhook ͔Β nuxt generate ಈ͔͍ͨ͠
NUXT.JS + CONTENTFUL
EC2 ֎ ECS ίϯςφΠϝʔδΛಈ͔ͯ͠Ϗϧυ͢Δҙຯ͕ͳ͍ SSR ͳΒ͍͍͚ͲɺͦΕͳΒ Lambda
Ͱ͍͍ Lambda SSR ͳΒ࠷༗ྗ͚ͩͲɺࠓճ SSG ͍ͨ͠ CodeBuild + CodePipeline ѱ͘ͳ͍͚Ͳ৭ʑઃఆ͠ͳ͍ͱ͍͚ͳ͍ NUXT.JS ON AWS
Hosting environment / Backend environment Git ϨϙδτϦͱ࿈ܞͨ͠ CI/CD ύΠϓϥΠϯͷ࣮ߦ ड৴ΣϒϑοΫ
Basic ೝূ CloudFron + S3 ΧελϜυϝΠϯରԠ AWS AMPLIFY
Hosting environment / Backend environment Git ϨϙδτϦͱ࿈ܞͨ͠ CI/CD ύΠϓϥΠϯͷ࣮ߦ ड৴ΣϒϑοΫ
Basic ೝূ CloudFron + S3 ΧελϜυϝΠϯରԠ AMPLIFY + NUXT.JS + CONTENTFUL
ARCHITECTURE
ίϯςφڥศརͩΑͶ ίϯςφΠϝʔδΛ࡞Βͳͯ͘ྑ͍αʔϏε͕࣮͍Ζ͍Ζ͋Δ App Runner Amplify ίϯςφΛϥΫ͢ΔαʔϏε࣮͍Ζ͍Ζ͋Δ App2Container Copilot CONCLUSION
THANK YOU FOR LISTENING