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.2k
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.6k
Other Decks in Programming
See All in Programming
PHPはいつから死んでいるかの調査
chiroruxx
1
400
Fragment Composition of GraphQL
quramy
12
1.3k
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
AppRouter Panel Talk
yosuke_furukawa
PRO
1
240
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
2
190
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
960
Deep Dive into React Stream/Serialize
mugi_uno
1
200
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
570
見た目から始める生産性向上
ikumatadokoro
8
1.1k
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
470
Featured
See All Featured
Writing Fast Ruby
sferik
622
60k
RailsConf 2023
tenderlove
7
550
Side Projects
sachag
451
41k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
222
21k
YesSQL, Process and Tooling at Scale
rocio
165
13k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
GraphQLとの向き合い方2022年版
quramy
33
12k
Product Roadmaps are Hard
iamctodd
45
9.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
46k
Statistics for Hackers
jakevdp
790
220k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
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
хࢎפ