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.3k
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.8k
Other Decks in Programming
See All in Programming
sappoRo.R #12 初心者セッション
kosugitti
0
280
ML.NETで始める機械学習
ymd65536
0
230
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
200
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
41
16k
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
520
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
260
React 19アップデートのために必要なこと
uhyo
8
1.5k
SwiftUI Viewの責務分離
elmetal
PRO
2
270
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
Ruby on cygwin 2025-02
fd0
0
180
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
830
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Unsuck your backbone
ammeep
669
57k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
We Have a Design System, Now What?
morganepeng
51
7.4k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Music & Morning Musume
bryan
46
6.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Why Our Code Smells
bkeepers
PRO
336
57k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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
хࢎפ