๐Ÿš€ nextJS ๋ญ˜๋กœ ๋ฐฐํฌํ• ๊นŒ? (Netlify, Vercel, Github page)

๐Ÿš€ nextJS ๋ญ˜๋กœ ๋ฐฐํฌํ• ๊นŒ? (Netlify, Vercel, Github page)

์ตœ์ข… ํŽธ์ง‘ ์ผ์‹œ
Last updated June 22, 2022
ํƒœ๊ทธ
Infra
๋ฐฐํฌ์ผ์ž
Apr 22, 2020
์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” , ์„œ๋ฒ„๋ฆฌ์Šค์— ๋Œ€ํ•œ ๊ฐœ๋…์„ ์•Œ์•„๋ณด๊ณ  ๋Œ€ํ‘œ์ ์ธ 3๊ฐœ์˜ ๋ฐฐํฌ ํ”Œ๋žซํผ์„ย Netlify,ย Vercel,ย Github pageย ๋ชจ๋‘ ์‚ฌ์šฉํ•ด๋ณด๋ฉฐ ๋น„๊ตํ•ด๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค.
Vercel์€ ๊ธฐ์กด์—๋Š” zeit now์˜€์—ˆ๋Š”๋ฐ, โ€˜2020๋…„ 4์›” 21์ผโ€™๋ถ€ํ„ฐย zeit์—์„œ Vercel๋กœ ๋ธŒ๋žœ๋“œ ๋„ค์ž„์„ ๋ฐ”๊ฟจ๋‹ค.

TL;DR

์กฐ๊ธˆ๋” ๋ฐฑ์—”๋“œ url์ด๋‚˜ ๋นŒ๋“œ(๋ฒˆ๋“ค๋ง)์„ ๊ด€์—ฌํ•˜๊ณ  ์‹ถ์œผ๋ฉดย github page๋ฅผ,
์‰ฝ๊ฒŒ ๋ฐฐํฌํ•˜๊ณ  ์‹ถ์€๋ฐ ๋ฐฐํฌํ•  ํŽ˜์ด์ง€๊ฐ€ ํฌ๊ธฐ๊ฐ€ ํฌ๋‹ค๋ฉดย vercel
์‰ฝ๊ฒŒ ๋ฐฐํฌํ•˜๊ณ  ์‹ถ์€๋ฐ ๋ฐฐํฌํ•  ํŽ˜์ด์ง€๊ฐ€ ๋ณ„๋กœ ํฌ์ง€ ์•Š๋‹ค๋ฉดย netlify๋ฅผ ์ถ”์ฒœํ•œ๋‹ค.
์™œ๋ƒํ•˜๋ฉด ๋ฌด๋ฃŒ๊ธฐ์ค€์œผ๋กœ vercel์€ ํ•˜๋ฃจ์— ๋นŒ๋“œํ•  ์ˆ˜ ์žˆ๋Š” ์ตœ๋Œ€๊ฐฏ์ˆ˜๋กœ ์ œํ•œํ•˜๊ณ , netlify๋Š” ํ•œ๋‹ฌ์— ๋นŒ๋“œํ•  ์ˆ˜ ์žˆ๋Š” ์ตœ๋Œ€์‹œ๊ฐ„์œผ๋กœ ์ œํ•œํ•œ๋‹ค.
๊ฐœ์ธ์ ์ธ ์ƒ๊ฐ์ž…๋‹ˆ๋‹ค! ๐Ÿ˜…

1. nextJS๋ž€?

nextJS๋Š”ย ๋ฆฌ์•กํŠธ ํ”„๋ ˆ์ž„์›Œํฌย ๋กœ ๋งค์šฐ ํŽธ๋ฆฌํ•œ ๋ผ์šฐํŒ…์‹œ์Šคํ…œ๊ณผ ์„œ๋ฒ„์‚ฌ์ด๋“œ๋ Œ๋”๋ง(SSR)์„ ์ง€์›ํ•œ๋‹ค.
๋‚˜๋Š” ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•  ๋•Œ, ๋ผ์šฐํŒ…์ด ํ•„์š”์—†๋Š” ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ด์–ด๋„ ํ”„๋กœ์ ํŠธ๊ฐ€ ํ™•์žฅ๋  ๊ฒฝ์šฐ๋ฅผ ๋ฏธ๋ฆฌ ๋Œ€๋น„ํ•˜์—ฌย nextJSย ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.
nextJS์˜ Routing system์€ ํ”„๋กœ์ ํŠธ pages ๋””๋ ‰ํ† ๋ฆฌ์—์„œ ์ด๋ฃจ์–ด์ง„๋‹ค.
root โ”œโ”€โ”€ components โ”œโ”€โ”€ pages โ”‚ โ”œโ”€โ”€ _app.jsx โ”‚ โ”œโ”€โ”€ _document.jsx โ”‚ โ”œโ”€โ”€ index.jsx โ”‚ โ”œโ”€โ”€ page1.jsx โ”‚ โ”œโ”€โ”€ page2.jsx โ”‚ โ”œโ”€โ”€ page3.jsx โ”‚ โ”œโ”€โ”€ page4.jsx ...
next ํ”„๋ ˆ์ž„์›Œํฌ์˜ ์ฃผ์†Œ ์ฒด๊ณ„์—์„œย '/'ย ์ฆ‰, ํ•ด๋‹น ํ”„๋กœ๊ทธ๋žจ์˜ homepage๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœย index.js๋ฅผ ์‹คํ–‰ํ•œ๋‹ค.
๊ทธ๋ฆฌ๊ณ  pages ์•ˆ์— ๋””๋ ‰ํ† ๋ฆฌ๋ฅผ ๋„ฃ๊ฑฐ๋‚˜ jsx ํŒŒ์ผ (์ •ํ™•ํžˆ๋Š” ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ)์„ ๋„ฃ์œผ๋ฉด next ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ ์ด๋ฅผ ๋ฐ˜์˜ํ•ด ์ž๋™์œผ๋กœ routing system์„ ๊ตฌ์ถ•ํ•ด์ค€๋‹ค.
pages/page1.jsx => sitename.com/page1
pages/page2.jsx => sitename.com/page2
์ด์ฒ˜๋Ÿผ nextJS ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ํ”„๋กœ์ ํŠธ์˜ ๋ผ์šฐํŒ…์„ ์ง๊ด€์ ์ด๊ณ  ํŽธ๋ฆฌํ•˜๊ฒŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.

2. ์„œ๋ฒ„๋ฆฌ์Šค ๋ฐฐํฌํ”Œ๋žซํผ

๊ทธ๋Ÿผ ์ด๋Ÿฌํ•œ nextJS๋กœ ๋งŒ๋“ค์–ด์ง„ ์›น์‚ฌ์ดํŠธ๋ฅผ ์–ด๋–ป๊ฒŒ ๋ฐฐํฌํ• ๊นŒ?
๊ณผ๊ฑฐ์—๋Š” ์›น์‚ฌ์ดํŠธ๋ฅผ ๋ฐฐํฌํ•  ๋•Œ, ์ž‘์„ฑ๋œ ํ”„๋กœ๊ทธ๋žจ์„ ๋Œ๋ฆฌ๋Š” ์„œ๋ฒ„๋ฅผ ๋‘๊ณ , ์ง์ ‘ ํ•˜๋“œ์›จ์–ด๋‚˜ ์šด์˜์ฒด์ œ ๊ทธ์™ธ์˜ ๋ชจ๋“  ๋ถ€๋ถ„๋“ค์„ ์ง์ ‘ ๊ด€๋ฆฌํ–ˆ์–ด์•ผ ํ–ˆ๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ„๋‹จํ•œ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋ฐฐํฌํ•˜๊ธฐ ์œ„ํ•ด์„œ๋„ ๋น„์šฉ๊ณผ ์‹œ๊ฐ„์ด ๋งŽ์ด ๋“ค์—ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‹ค AWS๋‚˜ Azure๊ฐ™์€ ํด๋ผ์šฐ๋“œ ์ปดํ“จํŒ… ์„œ๋น„์Šค๊ฐ€ ๋“ฑ์žฅํ•˜๊ฒŒ ๋˜๊ณ  ์„œ๋ฒ„ ์ธํ”„๋ผ๋“ค์„ ๊ณต๊ธ‰์—…์ฒด์—์„œ ๊ด€๋ฆฌํ•˜๊ณ  ์‚ฌ์šฉ์ž๋Š” ๋ณด๋‹ค ์‰ฝ๊ฒŒ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฐฉ์‹์„ย IaaSย (Infrastructure as a Service)๋ผ๊ณ  ํ•œ๋‹ค.
๋” ๋‚˜์•„๊ฐ€ ์„œ๋ฒ„๋ฆฌ์Šค๋ผ๋Š” ๊ฐœ๋…๋„ ๋“ฑ์žฅํ–ˆ๋Š”๋ฐ, ์œ„์˜ IaaS์ฒ˜๋Ÿผ ์„œ๋ฒ„๋ฅผ ๊ด€๋ฆฌํ•  ํ•„์š”๋„ ์—†์ด ํด๋ผ์šฐ๋“œ ์ œ๊ณต์—…์ฒด์— ๋ฆฌ์†Œ์Šค(ํ”„๋กœ๊ทธ๋žจ)๋งŒ ํ• ๋‹นํ•˜๋ฉด ๋ฐ”๋กœ ํ”„๋กœ๋•์…˜ ํ™˜๊ฒฝ์œผ๋กœ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค. ์„œ๋ฒ„๋ฆฌ์Šค๋Š”ย ์„œ๋ฒ„๊ฐ€ ์—†๋‹ค๋Š” ์˜๋ฏธ๊ฐ€ ์•„๋‹ˆ๋ผ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์„œ๋ฒ„ ์ธํ”„๋ผ ๊ตฌ์„ฑ์˜ ๋ถ€๋‹ด์„ ๋œ๊ณ  ์ฝ”๋“œ์— ์ง‘์ค‘ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—ย ์„œ๋ฒ„๋ฅผ ์ƒ๊ฐํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค๋Š” ์˜๋ฏธ๋กœ์„œ ์“ฐ์ด๋Š” ๊ฒƒ ๊ฐ™๋‹ค.
Netlify ์™€ Vercel ๊ฐ€ ๋ฐ”๋กœ ์„œ๋ฒ„๋ฆฌ์Šค ํ”Œ๋žซํผ์ด๋‹ค. ์ •ํ™•ํžˆ ๋งํ•˜๋ฉด AWS lambda๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๋Š”ย FaaSย (Functions as a Service) ํ”Œ๋žซํผ์ด๋‹ค. IaaS์˜ ๊ฒฝ์šฐ์—๋Š” ์„œ๋ฒ„ ์ธํ”„๋ผ๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ  ์›น์‚ฌ์ดํŠธ๋ฅผ ๋ฐฐํฌํ•˜๋ฉด 24์‹œ๊ฐ„ ๊ทธ ์ฝ”๋“œ๊ฐ€ ๋Œ์•„๊ฐ€์ง€๋งŒ, FaaS ๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ์—ฌ๋Ÿฌ๊ฐœ์˜ ํ•จ์ˆ˜๋กœ ์ชผ๊ฐœ์„œ ๋งค์šฐ ๊ฑฐ๋Œ€ํ•˜๊ณ  ๋ถ„์‚ฐ๋œ ์ปดํ“จํŒ… ์ž์›์— ํ•จ์ˆ˜๋ฅผ ๋“ฑ๋กํ•˜๊ณ , ์ด ํ•จ์ˆ˜๋“ค์ด ์‹คํ–‰๋˜๋Š” ํšŸ์ˆ˜ (๊ทธ๋ฆฌ๊ณ  ์‹คํ–‰๋œ ์‹œ๊ฐ„) ๋งŒํผ ๋น„์šฉ์„ ๋‚ด๋Š” ๋ฐฉ์‹์„ ๋งํ•œ๋‹ค.ย ์„œ๋ฒ„๋ฆฌ์Šค ์•„ํ‚คํ…์ณ๋ž€?
โœ๏ธ ์ถ”๊ฐ€๋กœ Netlify ์™€ Vercel์€ Lambda ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋ฐฑ์—”๋“œ ๊ธฐ๋Šฅ๋„ ์ œ๊ณตํ•ด์„œ ๋ฆฌ์†Œ์Šค๋ฅผ ์ ‘๊ทผํ•˜๊ธฐ๋„ ์‰ฝ๋‹ค.
๊ทธ๋Ÿผ ๋‘ ๊ฐœ์˜ ์„œ๋ฒ„๋ฆฌ์Šค ํ”Œ๋žซํผ๊ณผ ์ถ”๊ฐ€๋กœ ๊นƒํ—™ํŽ˜์ด์ง€๊นŒ์ง€ ์–ด๋–ค ์ฐจ์ด์ ์ด ์žˆ์„๊นŒ?

3. Netlify vs Vercel

Overview (๋ฌด๋ฃŒ ๊ธฐ์ค€)
Netlify
Vercel
100GB/month
100GB/month
$20/100GB
Pro ๋“ฑ๋ก(์›”๋ณ„์š”๊ธˆ)
์ œํ•œ์—†์Œ
100๊ฐœ
์ œํ•œ์—†์Œ
Pro ๋“ฑ๋ก(์›”๋ณ„์š”๊ธˆ)
300m/month
์ œํ•œ์—†์Œ
$7/500m
์ œํ•œ์—†์Œ
์ œํ•œ์—†์Œ
50 MB.
์•„์ง ํ•™์ƒ์ธ ๋‚˜๋Š” ๊ณผ๊ธˆ์ด ๋“ค์–ด๊ฐ€๋Š” ๋ถ€๋ถ„์€ ์ณ๋‹ค๋„๋ณด์ง€ ์•Š๊ณ  ๋ฌด๋ฃŒ ์‚ฌ์šฉ์ž ๊ธฐ์ค€์˜ ์ŠคํŽ™,์ œํ•œ๋งŒ ๋น„๊ตํ•ด๋ณด์•˜๋‹ค.
๊ณต๋ถ€์šฉ์œผ๋กœ ๋งŒ๋“  AWS ๊ณ„์ •์—์„œ ์ด๊ฒƒ์ €๊ฒƒ ๋ˆŒ๋Ÿฌ๋ณด๋‹ค 1๋งŒ 5์ฒœ์›์„ ๋นผ์•—๊ธด ์•„ํ”ˆ ๊ธฐ์–ต์ด ์žˆ๋‹ค..
ํ•ด๋‹น ์ŠคํŽ™์€ ๋ณ€๊ฒฝ๋  ์ˆ˜ ์žˆ๋‹ค. (ํ˜„์žฌ 2020.4.24 ๊ธฐ์ค€)

๋ฉ”๋ชจ๋ฆฌ ์ œํ•œ / ์‹คํ–‰์‹œ๊ฐ„ ์ œํ•œ / ํŽ˜์ด๋กœ๋“œ

๋ฉ”๋ชจ๋ฆฌ, ์‹คํ–‰์‹œ๊ฐ„, ํŽ˜์ด๋กœ๋“œ๋Š” ๋‘ ํ”Œ๋žซํผ์ด ๋น„์Šทํ•œ ์ œํ•œ์„ ๋‘๊ณ  ์žˆ์—ˆ๋‹ค. AWS lambda๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜๋Š” FaaS ํ”Œ๋žซํผ์ด๊ธฐ ๋•Œ๋ฌธ์— lambdaํ•จ์ˆ˜์˜ ํ˜•ํƒœ๋กœ ๊ณ„์‚ฐ๋œ๋‹ค.

bandwidth

bandwidth ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ๋‘ ํ”Œ๋žซํผ ๋ชจ๋‘ 100GB/month ์ด์ง€๋งŒ, Netlify์˜ ๊ฒฝ์šฐ 100GB๋‹น $20๋กœ ์ถ”๊ฐ€ ๊ตฌ๋งค๋ฅผ ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, Vercel์˜ ๊ฒฝ์šฐ ์›”๋ณ„ ์š”๊ธˆ์ œ๋กœ ๋“ฑ๋กํ•ด์•ผ๋งŒ ์ œํ•œ์„ ๋Š˜๋ฆด ์ˆ˜ ์žˆ๋‹ค.

Builds/day

ํ•˜๋ฃจ ๋‹น ๋นŒ๋“œ ๊ฐœ์ˆ˜ ์ œํ•œ์€ย Vercel์—๋งŒ ์žˆ๋Š” ์กฐ๊ฑด์ธ๋ฐ, ๋ฌด๋ฃŒ ์‚ฌ์šฉ์ž์˜ ๊ฒฝ์šฐ ํ•˜๋ฃจ์˜ 100๊ฐœ ์ดํ•˜์˜ ๋นŒ๋“œ๋ฅผ ํ•  ์ˆ˜ ์žˆ๋‹ค.

Build minutes

๋นŒ๋“œ ์‹œ๊ฐ„์€ย Netlify์—๋งŒ ์žˆ๋Š” ์กฐ๊ฑด์ด๋‹ค. ํ•œ๋‹ฌ์— ๋นŒ๋“œ์— ๊ฑธ๋ฆฐ ์‹œ๊ฐ„ 300๋ถ„ ์ œํ•œ์ด ์žˆ๋‹ค.
notion image
์ด ๋ธ”๋กœ๊ทธ๋„ Netlify๋ฅผ ์ด์šฉํ–‡๋Š”๋ฐ, ๋‚ด ๊ณ„์ •์„ ๋“ค์–ด๊ฐ€ ํ™•์ธํ•ด๋ณด๋‹ˆ ํ˜„์žฌ๊นŒ์ง€ 79๋ถ„ ์‚ฌ์šฉํ–ˆ๋‹ค๊ณ  ๋‚˜์™€์žˆ์—ˆ๋‹ค.

Serverless Functions ๊ฐœ์ˆ˜/ํฌ๊ธฐ์ œํ•œ

serverless function์€ ์‹ค์ œ ์„œ๋ฒ„์‚ฌ์ด๋“œ์—์„œ ๋ Œ๋”๋ง ๋˜๋Š” ํ•จ์ˆ˜๋ฅผ ์˜๋ฏธํ•œ๋‹ค. ์ฆ‰, nextJS์—์„œ์˜ pages๋“ค์„ ์˜๋ฏธํ•œ๋‹ค.ย Vercel์˜ ๊ฒฝ์šฐ, ์ด๋Ÿฌํ•œ serverless function์„ 12๊ฐœ๋กœ ์ œํ•œํ•œ๋‹ค. ๋˜ํ•œ 50MB๋ฅผ ๋„˜์–ด์„œ๋Š” ์•ˆ๋œ๋‹ค.
notion image
vercel์ด ๋นŒ๋“œ ๋กœ๊ทธ์ธ๋ฐ ฮป ์š”๊ฒŒ serverless function๋ฅผ ์˜๋ฏธํ•œ๋‹ค.
notion image
12๊ฐœ๋ฅผ ๋„˜์œผ๋ฉด ๋นŒ๋“œ๋ฅผ ์‹คํŒจํ•œ๋‹ค.

โœ๏ธ Serverless Functions ๊ด€๋ จ ์ถ”๊ฐ€

vercelย ์—์„œ ์œ„์˜ ์‚ฌ์ง„ ์ฒ˜๋Ÿผ nextJS ํŽ˜์ด์ง€๊ฐ€ 11๊ฐœ(404ํŽ˜์ด์ง€๊นŒ์ง€ 12๊ฐœ)๋ฅผ ๋„˜์–ด๊ฐ€๋ฉด Serverless Functions ์ œํ•œ์œผ๋กœ ์ธํ•ด ๋นŒ๋“œ๊ฐ€ ์•ˆ๋˜์—ˆ๋‹ค. ๊ทผ๋ฐ Vercel์€ nextJS๋กœ exportํ•œ Static HTML์—์„œ ๋Œ€ํ•ด์„œ๋Š” Serverless Functions๋กœ ์นด์šดํŠธ ํ•˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ๊ณต์‹๋ฌธ์„œ์— ์–ธ๊ธ‰์ด ๋˜์–ด์žˆ์—ˆ๋‹ค.
notion image
ํ˜ธ์ŠคํŒ…์˜ต์…˜์„ node ๋กœ ํ• ์‹œ,ย next start๋ฅผ ์‚ฌ์šฉํ•˜์ง€๋งŒ, static HTML ๋ฐฐํฌ์‹œ์—๋Š”ย next export๋ฅผ ํ•ด์•ผํ•œ๋‹ค. ์ฆ‰ vercel ๋ฐฐํฌ์‹œ, ๋ฐฐํฌ ๋ช…๋ น์–ด ์ปค๋งจ๋“œ๋ฅผย next buildย ๋Œ€์‹ ย next export๋ฅผ ํ•ด์ฃผ์–ด์•ผํ•œ๋‹ค.
์ฆ‰, ๋žŒ๋‹ค๋ฐฉ์‹์ด ์•„๋‹ˆ๋ผ ์ •์ html ๋ฐฉ์‹์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ์–ด์•ผ 12๊ฐœ ์ด์ƒ์˜ ํŽ˜์ด์ง€๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
vercel Sourceํƒญ์—์„œ lambda ๋ฐฉ์‹์˜ ํŽ˜์ด์ง€์ธ์ง€ ์ •์  html ํƒ€์ž…์˜ ํŽ˜์ด์ง€์ธ์ง€ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๋‹ค.
๋žŒ๋‹ค๋ฐฉ์‹์˜ ํŽ˜์ด์ง€
notion image
html๋ฐฉ์‹์˜ ํŽ˜์ด์ง€
notion image

4. Faas vs Github page

Github page๋Š” FaaS ํ”Œ๋žซํผ๊ณผ ๋‹ฌ๋ฆฌ
1๏ธโƒฃ ๋ฐฐํฌ์‹œ, ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•ด์ค˜์•ผ ํ•œ๋‹ค. (ํŽ˜์ด์ง€๋ผ์šฐํŒ…์ด๋‚˜ default Url์„ ๋„ฃ์–ด์ฃผ๋Š” ์ž‘์—…)
2๏ธโƒฃ ์ปค์Šคํ…€ ๋„๋ฉ”์ธ ๊ณผ์ •์ด ๊นŒ๋‹ค๋กญ๋‹ค.
3๏ธโƒฃ ์•ž์„  FaaS ํ”Œ๋žซํผ๊ณผ ๋‹ฌ๋ฆฌ ์ €์žฅ์†Œ์˜ ํฌ๊ธฐ๊ฐ€ 1024MB๋งŒ ๋„˜์ง€ ์•Š๊ฒŒ ํ•ด์ฃผ๋ฉด ๋œ๋‹ค.
๋ผ๋Š” ํŠน์ง•์ด ์žˆ๋‹ค.

๋‹ค์Œ์œผ๋กœย ์†Œ๋งˆ๋ฒ• ํ”„๋กœ์ ํŠธ ๋ฐฐํฌ์šฉ์„ ์ด์šฉํ•ด์„œ ๊ฐ๊ฐ์˜ ํ”Œ๋žซํผ๋ณ„๋กœ ๋ชจ๋‘ ๋ฐฐํฌํ•ด๋ณด์•˜๋‹ค.

5. ๐Ÿš€ Github page ๋ฐฐํฌํ•˜๊ธฐ

๋ฐฐํฌ์ฝ”๋“œ์˜ ๊ณต์‹์˜ˆ์ œ๋Š”ย zeit/next.js/examples/gh-pageย ์—์„œ, ๋ฐฐํฌ ๋ฐฉ๋ฒ•์€ย nextjs gh-pages๋กœ ๋ฐฐํฌํ•˜๊ธฐย ์—์„œ ์ฐธ๊ณ ํ–ˆ๋‹ค.
Github page๋กœ ๋ฐฐํฌํ•œย ์†Œ๋งˆ๋ฒ• ํ”„๋กœ์ ํŠธ ๋ฐฐํฌ์šฉ

5-1. ์Šคํฌ๋ฆฝํŠธ ์ž‘์„ฑํ•˜๊ธฐ

package.json ํŒŒ์ผ ์•ˆ์˜ โ€œscriptโ€ ์†์„ฑ์— โ€œdeployโ€ํ•˜๋Š” ๋ช…๋ น์–ด๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค.
"scripts": { "dev": "next", "build": "next build", "start": "next start", "deploy": "rm -rf node_modules/.cache && next build && next export && touch out/.nojekyll && git add out/ && git commit -m \"Deploy Next.js to gh-pages\" && git subtree push --prefix out origin gh-pages" },
1๏ธโƒฃย rm -rf node_modules/.cacheย : node_modules ์บ์‹œ์ œ๊ฑฐ
2๏ธโƒฃย next buildย : next ํ”„๋กœ์ ํŠธ ๋นŒ๋“œ
3๏ธโƒฃย next exportย : next ํ”„๋กœ์ ํŠธ๋ฅผ static html์•ฑ์œผ๋กœ ์ปดํŒŒ์ผํ•œ out/ ํด๋”๋ฅผ ์ƒ์„ฑํ•ด ์คŒ
4๏ธโƒฃย touch out/.nojekyllย : Github page์˜ย jekyll ์ฒ˜๋ฆฌ๊ณผ์ •์—์„œย _nextย ์ด๋Ÿฌํ•œ ํŒŒ์ผ์„ ํŠน์ˆ˜ ๋ฆฌ์†Œ์Šค๋กœ ๊ฐ„์ฃผํ•˜๊ณ  ์ตœ์ข… ์‚ฌ์ดํŠธ์— ๋ณต์‚ฌํ•˜์ง€ ์•Š๋Š”๋ฐย .nojekyllย ํŒŒ์ผ์„ ๋งŒ๋“ค๋ฉด ์ด๋ฅผ ๋ง‰์„ ์ˆ˜ ์žˆ๋‹ค.
5๏ธโƒฃย git add out/ย : git add
6๏ธโƒฃย git commit -mย : ์ปค๋ฐ‹๋ฉ”์‹œ์ง€ ์ž‘์„ฑ
7๏ธโƒฃย git subtree push โ€”prefix out origin gh-pagesย : github ์ €์žฅ์†Œ gh-pages๋ธŒ๋žœ์น˜์— push
npm run deploy // ๋ฐฐํฌ๋ช…๋ น์–ด

5-2. next.config.js

next.config.js ํŒŒ์ผ์ด ๋ฃจํŠธ ํด๋”์— ์—†๋‹ค๋ฉด ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๊ณ  ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ๋„ฃ์–ด์ค€๋‹ค. name์€ ๊นƒํ—ˆ๋ธŒ ์ €์žฅ์†Œ ์ด๋ฆ„์„ ๋„ฃ์–ด์ค€๋‹ค.
// next.config.js const debug = process.env.NODE_ENV !== 'production' const name = 'small-magic-project-deployment' module.exports = { assetPrefix: !debug ? `/${name}/` : '', }
๊ฐœ๋ฐœ๋ชจ๋“œ์—์„œ๋Š”ย requestURL=localhost:3000/ย ์— ๋ฆฌ์†Œ์Šค๋ฅผ ์š”์ฒญํ•˜์ง€๋งŒ,
๋ฐฐํฌ๋ชจ๋“œ์—๋Š”ย requestURL = taenykim.github.io/ย ์— ์š”์ฒญํ•œ๋‹ค.
ํ•˜์ง€๋งŒ ๋ฐฐํฌ๋ชจ๋“œ ์‹œ, ์ •์ƒ์ ์ธ ๋ฆฌ์†Œ์Šค ์š”์ฒญ์ฃผ์†Œ๋Š”
requestURL = taenykim.github.io/small-magic-project-deployment
์ด๊ธฐ ๋•Œ๋ฌธ์—, assetPrefix ์†์„ฑ์„ ํ†ตํ•ด ๋ฆฌ์†Œ์Šค ์š”์ฒญ ์ฃผ์†Œ๋ฅผ ๋”ฐ๋กœ ๋„ฃ์–ด์ฃผ์–ด์•ผ ํ•œ๋‹ค.

5-3. env-config.js

env-config.js ํŒŒ์ผ์„ ๋ฃจํŠธ ํด๋”์— ๋งŒ๋“ค์–ด์ฃผ๊ณ ,ย .babelrc.jsย ํŒŒ์ผ ์•ˆ์˜ ํ”Œ๋Ÿฌ๊ทธ์ธ์— ๋“ฑ๋กํ•ด์ค€๋‹ค.
// env-config.js const debug = process.env.NODE_ENV !== 'production' const name = 'small-magic-project-deployment' module.exports = { 'process.env.BACKEND_URL': !debug ? `/${name}` : '', } // .babelrc.js const env = require('./env-config') module.exports = { presets: ['next/babel'], plugins: [['transform-define', env]], }
์ด ํŒŒ์ผ์„ ํ†ตํ•ดย process.env.BACKEND_URLย ๋ผ๋Š” ํ™˜๊ฒฝ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด ํ™˜๊ฒฝ๋ณ€์ˆ˜๋Š” ์ด๋ฏธ์ง€, ๋™์˜์ƒ ๋“ฑ์˜ ๋ฆฌ์†Œ์Šค์— ์ ‘๊ทผํ•˜๊ฑฐ๋‚˜ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ง€๋Š” URL์„ ์„ค์ •ํ•  ๋•Œ ์“ฐ์ธ๋‹ค. (๋ฐ‘์—์„œ ๊ณ„์†)

5-4. ์ด๋ฏธ์ง€ ๋ฆฌ์†Œ์Šค ์ ‘๊ทผ

์ด๋ฏธ์ง€, ๋™์˜์ƒ ๋“ฑ์˜ ๋ฆฌ์†Œ์Šค์— ์ ‘๊ทผํ•  ๋•Œ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์œ„์—์„œ ๋งŒ๋“  ํ™˜๊ฒฝ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด์„œย process.env.BACKEND_URLย ๋ฆฌ์†Œ์Šค์— ์ ‘๊ทผํ•ด์•ผ ํ•œ๋‹ค.
<ImageContainer onClick={storeReset}> <img src={process.env.BACKEND_URL + '/cancel.png'} /> </ImageContainer>
์œ„์—์„œ ์–ธ๊ธ‰ํ–ˆ๋“ฏ, /cancle.png ๋งŒ ์ ์œผ๋ฉด,
requestURL = taenykim.github.io/cancel.pngย ์— ์š”์ฒญํ•œ๋‹ค.

5-5. ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ง€๋Š” URL ์„ค์ •

nextJS์˜ ํŽ˜์ด์ง€ ๋ผ์šฐํŒ…์€ย Linkย ๋ฅผ ์ด์šฉํ•˜๋ฉฐ,ย a๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๊ณผ ๋‹ฌ๋ฆฌ ์ƒˆ๋กœ๊ณ ์นจ์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š”๋‹ค. (์‹ฑ๊ธ€ํŽ˜์ด์ง€ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜)
Link๋กœ ๋ผ์šฐํŒ…์‹œ, href๋งŒ ์ ์–ด์ค„ ๊ฒฝ์šฐ, ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋™์ž‘ํ•˜๋Š” ๋ฐ์—๋Š” ๋ฌด๋ฆฌ๊ฐ€ ์—†์ง€๋งŒ, ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ง€๋Š” URL์ด ์ด์ƒํ•˜๊ฒŒ ์ฐํžŒ๋‹ค. ์ฆ‰ as์™€ ์œ„์—์„œ ๋งŒ๋“  ํ™˜๊ฒฝ๋ณ€์ˆ˜๋ฅผ ์ด์šฉํ•ด ์‚ฌ์šฉ์—๊ฒŒ ๋ณด์—ฌ์ง€๋Š” URL๋„ ์ง์ ‘ ๋„ฃ์–ด์ฃผ์–ด์•ผํ•œ๋‹ค.
as๋ฅผ ๋„ฃ์–ด์ฃผ์ง€ ์•Š์€๊ฒฝ์šฐ
taenykim.github.io / page1
as๋ฅผ ๋„ฃ์–ด์ค€ ๊ฒฝ์šฐ
taenykim.github.io / small - magic - project - deployment / page1
const AppIcon = ({ idx }) => { const url = `/page${idx}`const appIconName = 'PAGE' + idx return ( <Link href={url} as={process.env.BACKEND_URL + url}> <a style={{ textDecoration: 'none' }}> <AppIconContainer idx={idx}> <div>{appIconName}</div> </AppIconContainer> </a> </Link>) }

6. ๐Ÿš€ Netlify ๋ฐฐํฌํ•˜๊ธฐ

netlifyย ๋ฐฐํฌ๋ฐฉ๋ฒ•์€ ๋งค์šฐ ๊ฐ„๋‹จํ•˜๋‹ค.
Netlify๋กœ ๋ฐฐํฌํ•œย ์†Œ๋งˆ๋ฒ• ํ”„๋กœ์ ํŠธ ๋ฐฐํฌ์šฉ

6-1. ์Šคํฌ๋ฆฝํŠธ ์ž‘์„ฑํ•˜๊ธฐ

package.json ํŒŒ์ผ ์•ˆ์˜ โ€œscriptโ€ ์†์„ฑ์— โ€œdeployโ€ํ•˜๋Š” ๋ช…๋ น์–ด๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค.
github page ๋ฐฐํฌ์™€ ๊ตฌ๋ถ„์„ ๋‘๊ธฐ ์œ„ํ•ด โ€œnetlify-deployโ€ ๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ์ž‘์„ฑํ–ˆ๋‹ค.
"scripts": { "dev": "next", "build": "next build", "start": "next start", "netlify-deploy": "next build && next export" },

6-1. ์‹ค์ œ ๋ฐฐํฌํ•˜๊ธฐ

netlifyย ์‚ฌ์ดํŠธ์— ์ ‘์†ํ•ด์„œ ๊ฐ€์ž… ํ˜น์€ ๋กœ๊ทธ์ธ์„ ํ•œ ํ›„, new site from Git ํด๋ฆญ!
notion image
github ํด๋ฆญ
notion image
๋จผ์ € ์ž์‹ ์˜ github ๊ณ„์ •์— netlify ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์„ค์น˜ํ•˜๊ณ  ๋ฐฐํฌํ•  ํ”„๋กœ์ ํŠธ repository์˜ access๋ฅผ ์—ด์–ด์ฃผ์–ด์•ผ ํ•œ๋‹ค.ย Configure the Netlify app on GitHub๋ฅผ ๋ˆ„๋ฅด๋ฉด ์‰ฝ๊ฒŒ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค.
notion image
๊ทธ๋‹ค์Œ ๋ฐฐํฌํ•  ํ”„๋กœ์ ํŠธ repository๋ฅผ ์ฒดํฌํ•ด์ฃผ๊ณ  save!
notion image
๋ฐฐํฌ์‹œ ๋นŒ๋“œ ๋ช…๋ น์–ด์™€ ํด๋”์ด๋ฆ„์„ ์„ค์ •ํ•˜์—ฌ์•ผ ํ•˜๋Š”๋ฐ, ๋นŒ๋“œ ๋ช…๋ น์–ด๋Š” ์‹ค์ œ ๋ฐฐํฌ ์‹œ, ์‚ฌ์šฉ๋  ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•ด์ฃผ๊ณ  ํด๋”์ด๋ฆ„์€ ์•„๋ฌด๊ฑฐ๋‚˜ ๋„ฃ์–ด์ฃผ์–ด๋„ ๋œ๋‹ค.
notion image
๋ฐฐํฌ๊ฐ€ ์™„๋ฃŒ๋˜์—ˆ๋‹ค!
์ฒ˜์Œ์—๋Š” ๋งค์šฐ ์ด์ƒํ•œ ๋„๋ฉ”์ธ์„ ์ฃผ๋Š”๋ฐย Domain Settingย ์— ๋“ค์–ด๊ฐ€์„œย ์‚ฌ์ดํŠธ์ด๋ฆ„.netlify.appย ํ˜•์‹์˜ ๋„๋ฉ”์ธ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค.
notion image

7. ๐Ÿš€ Vercel ๋ฐฐํฌํ•˜๊ธฐ

Vercelย ๋˜ํ•œ ๋ฐฐํฌ๋ฐฉ๋ฒ•์€ ๋งค์šฐ ๊ฐ„๋‹จํ•˜๋‹ค.
Vercel๋กœ ๋ฐฐํฌํ•œย ์†Œ๋งˆ๋ฒ• ํ”„๋กœ์ ํŠธ ๋ฐฐํฌ์šฉ

7-1. ์Šคํฌ๋ฆฝํŠธ ์ž‘์„ฑํ•˜๊ธฐ

package.json ํŒŒ์ผ ์•ˆ์˜ โ€œscriptโ€ ์†์„ฑ์— โ€œdeployโ€ํ•˜๋Š” ๋ช…๋ น์–ด๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค.
github page ๋ฐฐํฌ์™€ ๊ตฌ๋ถ„์„ ๋‘๊ธฐ ์œ„ํ•ด โ€œvercel-deployโ€ ๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ์ž‘์„ฑํ–ˆ๋‹ค.
"scripts": { "dev": "next", "build": "next build", "start": "next start", "vercel-deploy": "next build && next export" },

7-2. ์‹ค์ œ ๋ฐฐํฌํ•˜๊ธฐ

Vercelย ์‚ฌ์ดํŠธ์— ์ ‘์†ํ•ด์„œ ๊ฐ€์ž… ํ˜น์€ ๋กœ๊ทธ์ธ์„ ํ•œ ํ›„, Import Project ํด๋ฆญ!
notion image
From Git Repository ๋ฐ•์Šค ์•ˆ์˜ continue ํด๋ฆญ!
notion image
Import Project from Github ํด๋ฆญ!
notion image
Vercel ๋„ ์ž์‹ ์˜ github ๊ณ„์ •์— Vercel ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์„ค์น˜ํ•˜๊ณ  ๋ฐฐํฌํ•  ํ”„๋กœ์ ํŠธ repository์˜ access๋ฅผ ์—ด์–ด์ฃผ์–ด์•ผ ํ•œ๋‹ค.ย repository access settings๋ฅผ ๋ˆ„๋ฅด๋ฉด ์‰ฝ๊ฒŒ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค.
notion image
๊ทธ๋‹ค์Œ ๋ฐฐํฌํ•  ํ”„๋กœ์ ํŠธ repository๋ฅผ ์ฒดํฌํ•ด์ฃผ๊ณ  save!
notion image
Root Directory ๋ฅผ ์„ค์ •ํ•˜๋Š” ์ฐฝ. ๋นˆ์นธ์œผ๋กœ ์ง„ํ–‰ํ•ด๋„ ์ƒ๊ด€์—†๋‹ค.
notion image
๋งˆ์ง€๋ง‰์œผ๋กœ ๋ฐฐํฌ์‹œ์— ์‚ฌ์šฉํ•  ๋นŒ๋“œ ๋ช…๋ น์–ด์™€ ํด๋”์ด๋ฆ„์„ ์„ค์ •ํ•˜์—ฌ์•ผ ํ•˜๋Š”๋ฐ ์œ„์—ย framework presetย ์„ Next.js๋กœ ์„ค์ •ํ•˜๊ณ  ๋นŒ๋“œ ๋ช…๋ น์–ด๋ฅผ ์‹ค์ œ ๋ฐฐํฌ ์‹œ, ์‚ฌ์šฉ๋  ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•ด์ฃผ๊ณ  ๋ฐ”๋กœ deploy๋ฅผ ๋ˆŒ๋Ÿฌ์ฃผ๋ฉด ๋œ๋‹ค.
๋นŒ๋“œ๋ช…๋ น์–ด๋Š”ย next export๋ฅผ ์‹คํ–‰ํ•ด์•ผ ํ•จ.
nextJS ์ด์™ธ์—๋„ create-react-app, Gatsby, vue.js, angular, jekyll ๋“ฑ ๋‹ค์–‘ํ•œ framework preset ๋“ค์ด ์žˆ๋‹ค.
notion image
๋ฐฐํฌ๊ฐ€ ์™„๋ฃŒ๋˜์—ˆ๋‹ค!
notion image

8. ๊ฒฐ๋ก 

ํ•ด๋‹น ํฌ์ŠคํŒ…์„ ํ•˜๋ฉด์„œ ์—ฌ๋Ÿฌ ํ”Œ๋žซํผ๋ผ๋ฆฌ ๋น„๊ตํ•˜๋‹ค ๋ณด๋‹ˆ ํ”Œ๋žซํผ๋ณ„๋กœ ์žฅ๋‹จ์ ์ด ๋ณด์˜€๋‹ค. ๋˜ํ•œ nextJS ํ”„๋ ˆ์ž„์›Œํฌ์— ๋Œ€ํ•œ ์—ฌ๋Ÿฌ ๋‹ค์–‘ํ•œ ๊ฒฌํ•ด๋“ค๋„ ์ ‘ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.
๋žŒ๋‹ค๋ฐฉ์‹์— ๋Œ€ํ•ด์„œ๋„ ์ฒ˜์Œ ์•Œ๊ฒŒ๋˜์—ˆ๋Š”๋ฐ ์–ธ์  ๊ฐ€ ์ ์žฌ์ ์†Œ์— ์ž˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐํšŒ๊ฐ€ ์žˆ์—ˆ์œผ๋ฉด ์ข‹๊ฒ ๋‹ค..!
์•„์ง ์–ด๋–ค ํ”Œ๋žซํผ์„ ์‚ฌ์šฉํ•ด์•ผ ์ข‹๋‹ค๊ณ  ๋งํ•  ์ˆ˜ ์žˆ๋Š” ์ˆ˜์ค€์ด ์•„๋‹ˆ์ง€๋งŒ, ์ž์‹ ์ด ์ง„ํ–‰ํ•˜๋Š” ํ”„๋กœ์ ํŠธ์— ์ž˜๋งž๋Š” ํ”Œ๋žซํผ์„ ์„ ํƒํ•˜๋Š” ๊ฒƒ๋„ ํ•˜๋‚˜์˜ ์—ญ๋Ÿ‰์ด ์•„๋‹๊นŒ ์ƒ๊ฐํ•ด๋ณด๊ฒŒ ๋˜์—ˆ๋‹ค.
์ถ”๊ฐ€๋กœย WDeverย ๋‹˜์˜ ๋Œ“๊ธ€ ๋•๋ถ„์— nextJS์˜ ํ˜ธ์ŠคํŒ… ์˜ต์…˜์ด ๋‘๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค. ๋‹ค์Œ์—๋Š” nextJS์˜ ์„œ๋ฒ„์‚ฌ์ด๋“œ ๋ Œ๋”๋ง ๋ฐฉ์‹์— ๋Œ€ํ•ด์„œ ๊นŠ๊ฒŒ ๊ณต๋ถ€ํ•ด๋ด์•ผ๊ฒ ๋‹ค.
์ฐธ๊ณ ๋งํฌ[์ ‘๊ธฐ/ํŽผ์น˜๊ธฐ]

Loading Comments...