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
330
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
9
俺たちのプロトタイプ
swordbreaker
0
510
さぁ、ブログをはじめようどこで?どうやって?
swordbreaker
0
340
実践 Movable Type 7
swordbreaker
0
2.5k
できる Movable Type 7
swordbreaker
0
380
トフでもわかるコンテンツタイプ講座
swordbreaker
0
1.3k
Movable Type 7 のすべて
swordbreaker
2
1.3k
Other Decks in Technology
See All in Technology
こんなに簡単!AWSマルチアカウント
takuya_terada
0
120
AFTを運用していたらAWS Configの課金が急増していた件
msato
0
110
SREsのためのSRE定着ガイド
netmarkjp
10
1.7k
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
340
大規模なアジャイル開発の現場と技術負債 / Technical Debt
yoshiitaka
21
4.1k
2023 Japan AWS Jr.Championsに選出されての振り返りとこれから
hiropy877
1
130
OpenTelemetry実践 はじめの一歩
taxin
0
330
Introducing Pkl
enomotok
0
290
LLMの現在
pfn
PRO
4
3k
GitHub最新情報キャッチアップ 2024年3月
dzeyelid
17
3.2k
あらゆる商品を扱う商品データベースを再設計した話 / product db re-architecture
rince
8
3.9k
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
120
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
Practical Orchestrator
shlominoach
180
9.7k
The Cult of Friendly URLs
andyhume
73
5.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
58
14k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Making Projects Easy
brettharned
106
5.4k
How to train your dragon (web standard)
notwaldorf
71
5.1k
In The Pink: A Labor of Love
frogandcode
137
21k
Facilitating Awesome Meetings
lara
39
5.5k
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