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
510
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
81
俺たちのプロトタイプ
swordbreaker
0
710
さぁ、ブログをはじめようどこで?どうやって?
swordbreaker
0
480
実践 Movable Type 7
swordbreaker
0
2.9k
できる Movable Type 7
swordbreaker
0
400
トフでもわかるコンテンツタイプ講座
swordbreaker
0
1.5k
Movable Type 7 のすべて
swordbreaker
2
1.7k
Other Decks in Technology
See All in Technology
データエンジニアがこの先生きのこるには...?
10xinc
0
450
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
1k
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
2
900
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
130
SOC2取得の全体像
shonansurvivors
1
410
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
610
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
150
実装で解き明かす並行処理の歴史
zozotech
PRO
1
540
「Verify with Wallet API」を アプリに導入するために
hinakko
1
250
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
150
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
500
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Cult of Friendly URLs
andyhume
79
6.6k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The World Runs on Bad Software
bkeepers
PRO
71
11k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
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