Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AWS Amplify Serverless Framework Next.js Deploy

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for leebyonghun 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

Avatar for leebyonghun

leebyonghun

November 18, 2020
Tweet

More Decks by leebyonghun

See All by leebyonghun
Amplify CI/CD
Avatar for leebyonghun leebyonghun
1
1.9k

Other Decks in Programming

See All in Programming
CDIの誤解しがちな仕様とその対処TIPS
Avatar for futokiyo futokiyo
0
220
SourceGeneratorのマーカー属性問題について
Avatar for tkym htkym
0
200
Vuetify 3 → 4 何が変わった？差分と移行ポイント10分まとめ
Avatar for kouki.miura koukimiura
0
150
Symfony + NelmioApiDocBundle を使った スキーマ駆動開発 / Schema Driven Development with NelmioApiDocBundle
Avatar for Shohei Okada okashoi
0
170
へんな働き方
Avatar for Yusuke Wada yusukebe
5
2.6k
AHC061解説
Avatar for Shun_PI shun_pi
0
400
AI時代のシステム設計：ドメインモデルで変更しやすさを守る設計戦略
Avatar for 増田 亨 masuda220
PRO
6
1.1k
Everything Claude Code OSS詳細 — 5層構造の中身と導入方法
Avatar for techs-targe targe
0
130
OTP を自動で入力する裏技
Avatar for Megabits_mzq megabitsenmzq
0
120
メタプログラミングで実現する「コードを仕様にする」仕組み/nikkei-tech-talk43
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
200
Rで始めるML・LLM活用入門
Avatar for wakama1994 wakamatsu_takumu
0
190
GC言語のWasm化とComponent Modelサポートの実践と課題 - Scalaの場合
Avatar for Rikito Taniguchi tanishiking
0
120

Featured

See All Featured
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
140
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
260
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
300
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
760
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.3k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.1k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
78
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
180
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
760

Transcript

  1. ੗ӝࣗѐ 2020֙ 4ਘ Classmethod ੑࢎ ೠҴীࢲ Ӕޖ ઺ ઱۽ ೐ۿ౟ূ٘,

    ࢲߡܻझ ଃী ҙब

  2. ݾର - SPAীࢲ੄ SSR - SEO - Rendering - Next.js

    - Demo - ࢲߡܻझ ߓನ - AWS Amplify - Serverless Framework

  3. SPAীࢲ SSRਸ ৵?

  4. SEO

  5. Googlebot Rendering on the Web: Performance Implications of Application Architecture

    (Google I/O ’19) ୭न JSܳ ૑ਗೞৈࢲ CSRਸ ࢎਊೞח SPAب оמ

  6. Google Search Console https://search.google.com/search-console/welcome URL Inspection Toolਸ ࢎਊ೧ࢲ पઁ ੜ

    ੘زغҊ ੓ח૑ ഛੋ

  7. ఋ Ѩ࢝ূ૓੄ SEO https://searchadvisor.naver.com/guide/seo-advanced-javascript ఋ Ѩ࢝ূ૓ٜ਷ ই૒ SPAܳ ৮੹൤ ૑ਗೞҊ

    ੓૑ח ঋ਺

  8. Ҵղ Ѩ࢝ূ૓ ࠺ਯ https://gs.statcounter.com/search-engine-market-share/all/south-korea http://www.internettrend.co.kr/trendForward.tsp Ҵղীࢲ੄ ݽٚ ࢲ࠺झী ؀ೠ Ѩ࢝ূ૓

    ࠺ਯ Ҵղীࢲ੄ Ҵղ ࢲ࠺झী ؀ೠ Ѩ࢝ূ૓ ࠺ਯ

  9. Googleীࢲ੄ ֢୹݅ ೙ਃೞ׮ݶ CSRੋ SPAܳ ࢎਊ೧ب оמ ׮ܲ Ѩ࢝ূ૓ীࢲ੄ ֢୹ب

    Ҋ۰ೠ׮ݶ SSRਸ ࢎਊೞৈ SEO ೱ࢚

  10. Rendering

  11. Rendering on the Web: Performance Implications of Application Architecture (Google

    I/O ’19) ੉࢚੸ੋ ۪؊݂ SSR, CSR݅ ࢎਊೞח Ѫ੉ ইפۄ ಕ੉૑ী য਎ܻח ۪؊݂੉ ೙ਃ

  12. ۪؊݂ ߹ ର੉ https://developers.google.com/web/updates/2019/02/rendering-on-the-web

  13. ۪؊݂ ߹ ର੉ https://developers.google.com/web/updates/2019/02/rendering-on-the-web

  14. Next.js React ੗୓੸ਵ۽ب SSR੉ оמೞ૑݅ SSR, Hydration, Pre-renderingਸ ખ ؊

    औѱೞӝ ਤ೧ Next.jsܳ ࢎਊ

  15. Demo

  16. AWSীࢲ SPA੄ SSRਸ ࢲߡܻझ۽ যڌѱ?

  17. AWS Amplify৬ Serverless Framework

  18. যڃ ഋక۽ ߓನ غ঻ਸөਃ?

  19. ইఃఫ୊

  20. Next.js জ ࢤࢿ ߂ Amplify ࢤࢿ Next.js ೐۽ં౟ ࢤࢿ Next.js

    ೐۽ં౟ী Amplify ୶о npm install aws-amplify @aws-amplify/ui-react ೐۽ં౟ী was-amplify ୶о

  21. API ୶о Amplify cli۽ API ୶о झః݃ ੘ࢿ

  22. Amplifyী ݅ٚ APIܳ AWSী ಹए, ੘ࢿೠ झః݃۽ ௏٘о ੗زࢤࢿ ؽ

    src/graphql/

  23. nextjsaws: component: “@sls-next/[email protected]" ࢲߡܻझ ೐ۨ੔ਕ௼۽ ߓನ మ೒݁ ࢤࢿ serverless.yml ౵ੌ੄

    ղਊਸ ׮ ૑਍ റ ਤ ௏٘ ੘ࢿ ߓನ ઺

  24. Ѿҗ ഛੋ

  25. ੉റ Gtihub Actions ١ਸ ࢎਊೞৈ CI/CD ө૑ ࢸ੿೧فݶ ݒ਋ рಞ

  26. ଵҊ 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

  27. хࢎ೤פ׮