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 Serverless Framework Next.js Deploy
Search
leebyonghun
November 18, 2020
Programming
1
1.4k
AWS Amplify Serverless Framework Next.js Deploy
Deploy Next.js for making serverless application by AWS Amplify and Serverless Framework
leebyonghun
November 18, 2020
Tweet
Share
More Decks by leebyonghun
See All by leebyonghun
Amplify CI/CD
leebyonghun
1
1.9k
Other Decks in Programming
See All in Programming
AI時代に必須!状況言語化スキル / ai-context-verbalization
minodriven
2
120
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
190
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
120
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.5k
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
200
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
360
三者三様 宣言的UI
kkagurazaka
0
270
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
10
1.7k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
680
AI Agent 時代的開發者生存指南
eddie
4
2.2k
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
450
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
66k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Bash Introduction
62gerente
615
210k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Automating Front-end Workflow
addyosmani
1371
200k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
100
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Making Projects Easy
brettharned
120
6.4k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Transcript
ӝࣗѐ 2020֙ 4ਘ Classmethod ੑࢎ ೠҴীࢲ Ӕޖ  ۽ ۿূ٘,
ࢲߡܻझ ଃী ҙब
ݾର - SPAীࢲ SSR - SEO - Rendering - Next.js
- Demo - ࢲߡܻझ ߓನ - AWS Amplify - Serverless Framework
SPAীࢲ SSRਸ ৵?
SEO
Googlebot Rendering on the Web: Performance Implications of Application Architecture
(Google I/O ’19) ୭न JSܳ ਗೞৈࢲ CSRਸ ࢎਊೞח SPAب оמ
Google Search Console https://search.google.com/search-console/welcome URL Inspection Toolਸ ࢎਊ೧ࢲ पઁ ੜ
زغҊ ח ഛੋ
ఋ Ѩ࢝ূ SEO https://searchadvisor.naver.com/guide/seo-advanced-javascript ఋ Ѩ࢝ূٜ ই SPAܳ ৮ ਗೞҊ
ח ঋ
Ҵղ Ѩ࢝ূ ࠺ਯ https://gs.statcounter.com/search-engine-market-share/all/south-korea http://www.internettrend.co.kr/trendForward.tsp Ҵղীࢲ ݽٚ ࢲ࠺झী ೠ Ѩ࢝ূ
࠺ਯ Ҵղীࢲ Ҵղ ࢲ࠺झী ೠ Ѩ࢝ূ ࠺ਯ
Googleীࢲ ֢݅ ਃೞݶ CSRੋ SPAܳ ࢎਊ೧ب оמ ܲ Ѩ࢝ূীࢲ ֢ب
Ҋ۰ೠݶ SSRਸ ࢎਊೞৈ SEO ೱ࢚
Rendering
Rendering on the Web: Performance Implications of Application Architecture (Google
I/O ’19) ࢚ੋ ۪؊݂ SSR, CSR݅ ࢎਊೞח Ѫ ইפۄ ಕী যܻח ۪؊݂ ਃ
۪؊݂ ߹ ର https://developers.google.com/web/updates/2019/02/rendering-on-the-web
۪؊݂ ߹ ର https://developers.google.com/web/updates/2019/02/rendering-on-the-web
Next.js React ਵ۽ب SSR оמೞ݅ SSR, Hydration, Pre-renderingਸ ખ ؊
औѱೞӝ ਤ೧ Next.jsܳ ࢎਊ
Demo
AWSীࢲ SPA SSRਸ ࢲߡܻझ۽ যڌѱ?
AWS Amplify৬ Serverless Framework
যڃ ഋక۽ ߓನ غਸөਃ?
ইఃఫ
Next.js জ ࢤࢿ ߂ Amplify ࢤࢿ Next.js ۽ં ࢤࢿ Next.js
۽ંী Amplify ୶о npm install aws-amplify @aws-amplify/ui-react ۽ંী was-amplify ୶о
API ୶о Amplify cli۽ API ୶о झః݃ ࢿ
Amplifyী ݅ٚ APIܳ AWSী ಹए, ࢿೠ झః݃۽ ٘о زࢤࢿ ؽ
src/graphql/
nextjsaws: component: “@sls-next/
[email protected]
" ࢲߡܻझ ۨਕ۽ ߓನ మ݁ ࢤࢿ serverless.yml ੌ
ղਊਸ   റ ਤ ٘ ࢿ ߓನ 
Ѿҗ ഛੋ
റ Gtihub Actions ١ਸ ࢎਊೞৈ CI/CD ө ࢸ೧فݶ ݒ рಞ
ଵҊ https://youtu.be/k-A2VfuUROg AWS Amplify Next.js ౚషܻ https://docs.amplify.aws/start/getting-started/data-model/q/integration/next#api-with-server-side-rendering-ssr https://tinyurl.com/y43q9rjx
хࢎפ