๐Ÿ“˜ ๊ธฐ๋ก ๋‚จ๊ธฐ๊ธฐ - NextJS ๋ฐฐํฌ POC

๊ธฐ๋ก์ผ๊ธฐ๐Ÿ“ซยท2022๋…„ 5์›” 16์ผ
7
post-thumbnail

์ตœ๊ทผ ํšŒ์‚ฌ์—์„œ ๋””์ž์ด๋„ˆ ๋ถ„๋“ค๊ณผ์˜ ์›ํ™œํ•œ ํ˜‘์—…์„ ๋ชฉ์ ์œผ๋กœ ์Šคํ…Œ์ด์ง• ๋ฐฐํฌ ํ™˜๊ฒฝ์„ ์ž„์‹œ๋กœ ๊ตฌ์„ฑํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ๋ฐฐํฌ ํ”Œ๋žซํผ์„ ์„ ํƒํ•˜๋Š” ๊ณผ์ •์—์„œ ์—ฌ๋Ÿฌ ํ”Œ๋žซํผ์„ ์‚ฌ์šฉํ•ด๋ณด๋ฉฐ POC๋ฅผ ์ง„ํ–‰ํ–ˆ๋Š”๋ฐ, ๊ธฐ๋ก ์ฐจ์›์—์„œ ํฌ์ŠคํŒ…์œผ๋กœ ๋‚จ๊ฒจ๋‘๊ธฐ๋กœ ํ–ˆ๋‹ค!

NextJS ๋ฐฐํฌ ํ™˜๊ฒฝ

NextJS๋Š” SSR์„ ์ง€์›ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฐฐํฌ์‹œ ์„œ๋ฒ„๊ฐ€ ํ•„์š”ํ•˜๋‹ค. ์„œ๋ฒ„ ํ™˜๊ฒฝ์„ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค์–‘ํ•˜์ง€๋งŒ ๊ฒฐ๊ตญ ์„œ๋ฒ„ ํ™˜๊ฒฝ์— ๋”ฐ๋ผ ์•„๋ž˜์™€ ๊ฐ™์€ ๋‘๊ฐ€์ง€๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋‹ค.

  • ํด๋ผ์šฐ๋“œ(AWS, Azure๋“ฑ) ํ™˜๊ฒฝ์—์„œ ์ง์ ‘ ์„œ๋ฒ„ ํ™˜๊ฒฝ ๊ตฌ์„ฑ
  • Vercel, Netlify, Amplify, Cloudflare, Netlify, Serverless๋“ฑ๊ณผ ๊ฐ™์€ zero configration ๋ฐฐํฌ ํ”Œ๋ ›ํผ ์‚ฌ์šฉ

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๋ฐฐํฌ ํ™˜๊ฒฝ์„ ๊ตฌ์„ฑํ•˜๋ฉฐ ๊ฒ€ํ† ํ–ˆ๋˜ ๊ธฐ์ˆ ๋“ค๊ณผ ๋„์ž…์‹œ ๊ณ ๋ ค์‚ฌํ•ญ์— ๋Œ€ํ•ด ๊ฐ„๋‹จํžˆ ์ •๋ฆฌํ•ด๋ณด๋ ค ํ•œ๋‹ค.

ํ”Œ๋žซํผ ๋ณ„ ์‚ดํŽด๋ณด๊ธฐ

Vercel

๊ฐ€์žฅ ๋จผ์ € ์‚ดํŽด๋ณธ ์„ ํƒ์ง€๋Š” Vercel์ด๋‹ค. Vercel์˜ ๊ฐ€์žฅ ํฐ ์žฅ์ ์€ ์—ญ์‹œ NextJS์—์„œ ์ œ๊ณตํ•˜๋Š” ๋ชจ๋“  ๊ธฐ๋Šฅ + ์•ž์œผ๋กœ ์ถ”๊ฐ€๋  ๊ธฐ๋Šฅ์„ ๊ฐ€์žฅ ๋จผ์ €, ๊ฐ€์žฅ ์™„๋ฒฝํ•˜๊ฒŒ ์ง€์›ํ•œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

zero configuration์„ ์ง€ํ–ฅํ•˜๋Š” Vercel๋‹ต๊ฒŒ ํด๋ฆญ ๋ช‡๋ฒˆ์œผ๋กœ ๊ฐ„๋‹จํžˆ ๋ฐฐํฌ๋ฅผ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ๋„ ํฐ ์žฅ์ ์ด๋‹ค.

๋˜ ๋ณ„๋„์˜ ๊ตฌ์„ฑ ์—†์ด ๋ชจ๋“  push์— ๋Œ€ํ•œ ๋ฐฐํฌ๊ฐ€ ์ง„ํ–‰๋˜๋Š” preview ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š”๋ฐ, ์ด๊ฒŒ ์ƒ๋‹นํžˆ ํŽธ๋ฆฌํ•˜๋‹ค.
Vercel์— Github Repository๋ฅผ ์—ฐ๊ฒฐ ํ•˜๊ณ  ํ•ด๋‹น ์›๊ฒฉ ์ €์žฅ์†Œ์— push๋ฅผ ํ•˜๋ฉด ๋ฐฐํฌ๋œ ํ™”๋ฉด์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š” preview url์ด ๋ฐœ๊ธ‰๋œ๋‹ค. ์ด๋Ÿฐ ๋ฐฉ์‹์œผ๋กœ ๋งค ์ปค๋ฐ‹์— ๋Œ€ํ•œ ๋ฐฐํฌ ๊ฒฐ๊ณผ๋ฌผ์„ ํ™•์ธํ•ด๋ณผ ์ˆ˜ ์žˆ๋‹ค.

๋” ๋†€๋ผ์šด ์ ์€ ํ•ด๋‹น ๊ธฐ๋Šฅ์€ ๋ฌด๋ฃŒ ์š”๊ธˆ์ œ์ธ Hobby ํ”Œ๋žœ์—์„œ๋„ ์ง€์›ํ•œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

๊ฐœ์ธ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” Vercel์ด ์ตœ๊ณ ์ธ ๊ฒƒ ๊ฐ™๋‹ค. ํ•˜์ง€๋งŒ ์•„์‰ฝ๊ฒŒ๋„ Github Team ๊ณ„์ • ๋ ˆํฌ์˜ ๊ฒฝ์šฐ Pro ํ”Œ๋žœ์„ ์ด์šฉํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์—, Vercel์— ์—ฐ๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด 1์ธ๋‹น 20๋‹ฌ๋Ÿฌ๊ฐ€ ํ•„์š”ํ•˜๋‹ค.

Amplify

Amplify๋Š” AWS์—์„œ ์ œ๊ณตํ•˜๋Š” ์„œ๋น„์Šค๋กœ AWS๋‚ด์˜ ๋ฆฌ์†Œ์Šค๋“ค์„ ์‚ฌ์šฉํ•˜์—ฌ ์†์‰ฝ๊ฒŒ ํ”„๋ก ํŠธ์—”๋“œ, ๋ฐฑ์—”๋“œ, ํ˜ธ์ŠคํŒ…, ๋ฐฐํฌ๊นŒ์ง€ ํ’€์Šคํƒ์œผ๋กœ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•˜๋„๋ก ๋„์™€์ฃผ๋Š” ์™„์ „ ๊ด€๋ฆฌํ˜• ์„œ๋น„์Šค์ด๋‹ค. Vercel๊ณผ ๋น„์Šทํ•œ ์ปจ์…‰์— AWS ์„œ๋น„์Šค๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค.

ํ˜„ ์‹œ์ ์—์„œ(22๋…„ 7์›”) Vercel์„ ์ œ์™ธํ•˜๊ณ  NextJS์˜ ๊ฐ€์žฅ ๋งŽ์€ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. NextJS 12๋ฒ„์ „์˜ middleware, i18n ๊ด€๋ จ ํ”ผ์ฒ˜๋ฅผ ์ œ์™ธํ•œ ๋ชจ๋“  ๊ธฐ๋Šฅ์„ ์ง€์›ํ•œ๋‹ค.

๋‹จ์ ์œผ๋กœ๋Š” ๋ฐฐํฌ ๊ณผ์ •์ด Vercel์— ๋น„ํ•ด ๊นŒ๋‹ค๋กญ๋‹ค. IAM ์„ค์ •๋ถ€ํ„ฐ Amplify CLI ์„ค์ •๊นŒ์ง€ ์ถ”๊ฐ€์ ์œผ๋กœ ์„ค์ •ํ•ด ์ฃผ์–ด์•ผ ํ• ๊ฒŒ ๊ฝค ๋งŽ์ง€๋งŒ, ๋น„์šฉ ์ธก๋ฉด์—์„œ๋Š” Vercel๋ณด๋‹ค ๋” ์ €๋ ดํ•˜๋‹ค.

๊ถ๊ธˆํ•œ ๋ถ„๋“ค์€ ์ž˜ ์ •๋ฆฌํ•ด ๋†“์€ ๋ธ”๋กœ๊ทธ๊ฐ€ ์žˆ์œผ๋‹ˆ ์ฐธ์กฐํ•ด๋ณด์‹œ๊ธธ!

AWS Elastic BeanStalk

AWS์˜ Elastic BeanStalk(์ดํ•˜ EB) ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•˜์—ฌ ์„œ๋ฒ„ ํ™˜๊ฒฝ์„ ์ง์ ‘ ๊ตฌ์„ฑํ• ์ˆ˜๋„ ์žˆ๋‹ค. ๋ฌผ๋ก  EC2์—์„œ ์ง์ ‘ ์„œ๋ฒ„ ํ™˜๊ฒฝ์„ ๊ตฌ์„ฑํ•  ์ˆ˜๋„ ์žˆ์œผ๋‚˜, EB์˜ ์žฅ์ ์€ ๋กœ๋“œ ๋ฐธ๋Ÿฐ์‹ฑ ๋ฐ Auto Scaling๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ ๋ชจ๋‹ˆํ„ฐ๋ง, ๋ฌด์ค‘๋‹จ ๋ฐฐํฌ ๋“ฑ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ ๋” ์ง€์›ํ•ด์ค€๋‹ค๋Š” ์ ์ด๋‹ค.

๋˜ํ•œ ์ด๋Ÿฐ ์ž๋™์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ์— ๋Œ€ํ•œ ์ถ”๊ฐ€ ๋น„์šฉ ์—†์ด ์‚ฌ์šฉํ•œ AWS ๋ฆฌ์†Œ์Šค์— ๋Œ€ํ•ด์„œ๋งŒ ์š”๊ธˆ์„ ์ง€๋ถˆํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ๋„ ์žฅ์ ์ด๋‹ค.

๋ฐฐํฌ ํ™˜๊ฒฝ ๊ตฌ์„ฑ์ด ํฌ๊ฒŒ ์–ด๋ ต์ง€ ์•Š๊ณ (ํด๋ฆญ ๋ช‡๋ฒˆ์ด๋ฉด ๊ฐ€๋Šฅ) Github Action/Jenkins์™€ ๊ฐ™์€ CI/CD๋„ ์‰ฝ๊ฒŒ ๋ถ™์ผ ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ์•„๋ฌด๋ž˜๋„ ๋‹ค๋ฅธ Zero Config ํ”Œ๋žซํผ๋“ค์— ๋น„ํ•ด์„œ๋Š” ์กฐ๊ธˆ ๋” ์„ค์ •ํ•ด ์ฃผ์–ด์•ผ ํ•˜๋Š” ๋ถ€๋ถ„๋“ค์ด ๋งŽ๋‹ค.

Serverless

Serverless Framework๋Š”, AWS ๋žŒ๋‹ค์™€ Azure ํ•จ์ˆ˜ ์„œ๋ฒ„๋ฆฌ์Šค์™€ ๊ฐ™์€ Serverless ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•ด ์ฝ”๋“œ๋ฅผ ์‰ฝ๊ฒŒ ๋ฐฐํฌํ•ด ์ฃผ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์ด๋‹ค.

Serverless Framework๋Š” ๋‹ค์–‘ํ•œ ์„œ๋น„์Šค๋“ค์„ serverless ๋ฐฉ์‹์œผ๋กœ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ๋„๋ก ํ”Œ๋Ÿฌ๊ทธ์ธ๋“ค์„ ์ œ๊ณตํ•˜๋ฉฐ, ์‚ฌ์šฉ์ž๋“ค์€ ์›ํ•˜๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์„ค์น˜ํ•˜์—ฌ ๋ฐฐํฌ๋ฅผ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค.

Serverless-NextJS-plugin์€ AWS ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•ด์„œ ๋ฐฐํฌ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉฐ ์•„ํ‚คํ…์ณ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ๊ตฌ์„ฑ๋œ๋‹ค.

๊ธฐ๋ณธ์ ์œผ๋กœ ๋ชจ๋“  ๋ฐฐํฌ ํ™˜๊ฒฝ์€ Cloudfront์— ๊ตฌ์„ฑ๋˜๊ฒŒ ๋œ๋‹ค. ํ•„์š”ํ•œ ์ •์  ํŒŒ์ผ์€ S3 ๋ฒ„ํ‚ท์„ ํ†ตํ•ด ์ƒ์„ฑํ•˜๊ณ , SSR๊ณผ API ๋ฐฑ์—”๋“œ์— ํ•„์š”ํ•œ ํ•จ์ˆ˜๋Š” lambda@edge์— ๊ตฌ์„ฑ๋˜์–ด ๋ฐฐํฌ๋œ๋‹ค.

ํ•„์š”ํ•œ ๋ชจ๋“  ์ž์›์€ Cloudformation์„ ํ†ตํ•ด ์ž๋™์œผ๋กœ ์ƒ์„ฑ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์ž๋Š” ๋ฐฐํฌ ์„ค์ •์„ ๋‹ด์€ YAMLํŒŒ์ผ๋งŒ ์ž˜ ๋งŒ๋“ค์–ด์ฃผ๋ฉด ๋œ๋‹ค.

์ถ”๊ฐ€๋กœ Serverless๋„ ์•„์ง์€ NextJS 12๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š์ง€๋งŒ, ๊ณง ์ง€์› ์˜ˆ์ •์ด๋ผ๊ณ  ํ•œ๋‹ค!

๋งˆ์น˜๋ฉฐ

์‚ฌ๋‚ด์—์„œ ๋ฐฐํฌ POC๋ฅผ ์ง„ํ–‰ํ•˜๋ฉฐ ํšŒ์‚ฌ ๋ธ”๋กœ๊ทธ์— ๊ธ€์„ ์ž‘์„ฑํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. AWS์˜ Elastic Beanstalk์™€ Serverless Framework์˜ ๋ฐฐํฌ ๊ณผ์ •์— ๋Œ€ํ•ด ๊ถ๊ธˆํ•˜์‹  ๋ถ„๋“ค์€ ์ฐธ๊ณ ํ•˜์…”๋„ ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.

์‹์Šค์ƒต ๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ : NextJS ๋ฐฐํฌ ์–ด๋–ป๊ฒŒ ํ•˜์‹œ๋‚˜์š”?

0๊ฐœ์˜ ๋Œ“๊ธ€