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

AWS Amplify Serverless Framework Next.js Deploy

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
リバースエンジニアリング新時代へ！
GhidraとClaude DesktopをMCPで繋ぐ/findy202507
Avatar for @tkmru tkmru
7
1.7k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
Avatar for Takuto Wada twada
PRO
36
11k
Reactの歴史を振り返る
Avatar for つちのこ tutinoko
1
170
Go製CLIツールをnpmで配布するには
Avatar for syumai syumai
2
1.1k
AIコーディングエージェント全社導入とセキュリティ対策
Avatar for hikae hikaruegashira
15
9.3k
実践 Dev Containers × Claude Code
Avatar for Yuto Akiba touyu
1
120
ZeroETLで始めるDynamoDBとS3の連携
Avatar for afooooil afooooil
0
150
Flutterと Vibe Coding で個人開発！
Avatar for Hayami Shuhei hyshu
1
220
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
Avatar for Takuma Kajikawa kajitack
3
520
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
Avatar for のんちゃん non0113
2
250
ソフトウェア設計とAI技術の活用
Avatar for 増田 亨 masuda220
PRO
25
7.3k
実践！App Intents対応
Avatar for 野瀬田　裕樹 yuukiw00w
0
110

Featured

See All Featured
Side Projects
Avatar for Sacha Greif sachag
455
43k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
21
1.4k
Fireside Chat
Avatar for paigeccino paigeccino
38
3.6k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.8k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.3k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
332
22k

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. хࢎ೤פ׮