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.5k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
AWS Amplify Serverless Framework Next.js Deploy
Deploy Next.js for making serverless application by AWS Amplify and Serverless Framework
leebyonghun
November 18, 2020
More Decks by leebyonghun
See All by leebyonghun
Amplify CI/CD
leebyonghun
1
2k
Other Decks in Programming
See All in Programming
ソフトウェアエンジニアにとっての生成AI - 特性を知って使い倒す / generative ai for software enginner
kishida
7
2.2k
tsc.rip を支える技術 / Kyoto.なんか #8
susisu
0
3.8k
go-spidermonkeyでAIエージェントのCode Modeを実装する
syumai
3
1.3k
Go 1.27 における memory allocation の高速化
andpad
0
340
Pythonの実行はどこまで賢くなったのか? CPythonとPyPyから見る最適化のしくみ
curekoshimizu
3
2.2k
異なる設計思想のフレームワークを経験して得た学び
amekuhideki
1
830
Hono + Inertia + React で LP を構築した話
oukayuka
2
180
いまどきの Codex で開発する visionOS アプリの開発スタイルについて
karad
0
170
Oxlintはいいぞ(続)
yug1224
1
480
Deep dive into the select statement (GopherCon UK)
jespino
0
150
[PyCon KR 2026] More Variants, More Diversity for AI Accelerators
achimnol
0
120
Loosening the Reins: Go Generics Get More Flexible
kuro_kurorrr
0
350
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.8k
Build your cross-platform service in a week with App Engine
jlugia
234
19k
Google's AI Overviews - The New Search
badams
0
1.6k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
2.4k
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
670
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
What does AI have to do with Human Rights?
axbom
PRO
1
2.3k
Rebuilding a faster, lazier Slack
samanthasiow
85
9.6k
Art, The Web, and Tiny UX
lynnandtonic
304
22k
Navigating Weather and Climate Data
rabernat
0
490
Paper Plane (Part 1)
katiecoart
PRO
1
10k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
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
хࢎפ