[AWS] Amplify(@Nextjs)

xgroยท2023๋…„ 6์›” 18์ผ
5

AWS

๋ชฉ๋ก ๋ณด๊ธฐ
16/18
post-thumbnail

๐Ÿ“Œ Summary

  • aws Amplify์—์„œ Nextjs๋ฅผ ๋ฐฐํฌํ•ฉ๋‹ˆ๋‹ค.

  • NextJS์˜ ์ฃผ์š” ๊ธฐ๋Šฅ์ค‘ ํ•˜๋‚˜์ธ SSR์— ๋Œ€ํ•ด ํŒŒ์•…ํ•ฉ๋‹ˆ๋‹ค.

  • ๋ฐฐํฌ๋ฅผ ์œ„ํ•œ ์•„ํ‚คํ…์ฒ˜๋ฅผ ๋‚˜์—ดํ•˜๊ณ  ์ ํ•ฉํ•œ ๊ตฌ์กฐ๋ฅผ ์„ ์ •ํ•ฉ๋‹ˆ๋‹ค.



๐Ÿ“Œ Nextjs

React ํ”„๋กœ์ ํŠธ์™€ ์ฐจ๋ณ„์ ์œผ๋กœ์„œ ์ •์ ํŽ˜์ด์ง€๋ฅผ ํ˜ธ์ŠคํŒ…ํ•˜๋Š”๊ฒƒ์—์„œ ๋ฒ—์–ด๋‚˜
์„œ๋ฒ„์ธก์—์„œ ๋ Œ๋”๋ง๋œ ํŽ˜์ด์ง€๋ฅผ ๋ณด๋‚ด์ฃผ๋Š”๊ฒƒ์„ ๊ณ ๋ คํ•ด์•ผ ํ•˜๋ฏ€๋กœ ์„œ๋ฒ„๊ฐ€ ๋ณ„๋„๋กœ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ‘‰ Rendering

React 18 ์ด์ „์—๋Š” React๋ฅผ ์‚ฌ์šฉํ•˜์—ฌย ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋ Œ๋”๋งํ•˜๋Š” ๊ธฐ๋ณธ ๋ฐฉ๋ฒ•์€ย ์ „์ ์œผ๋กœ ํด๋ผ์ด์–ธํŠธ์—์„œ ๋ Œ๋”๋ง์„ ์ง„ํ–‰ํ•˜๋Š” ๊ฒƒ์ด์—ˆ์Šต๋‹ˆ๋‹ค.

Next.js๋Š” HTML์„ ์ƒ์„ฑํ•˜๊ณ  ํด๋ผ์ด์–ธํŠธ์— ์ „์†กํ•˜์—ฌ hydrated ํ•จ์œผ๋กœ์จ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ย ํŽ˜์ด์ง€๋กœ ๋‚˜๋ˆ„๊ณ  ์„œ๋ฒ„์—์„œ pre-rendering ํ•˜๋Š” ๋” ์‰ฌ์šด ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๋กœ ์ธํ•ด ์ดˆ๊ธฐ HTML์„ ๋Œ€ํ™”์‹์œผ๋กœ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ํด๋ผ์ด์–ธํŠธ์— ์ถ”๊ฐ€ JavaScript๊ฐ€ ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ด์ œย ์„œ๋ฒ„ ๋ฐ ํด๋ผ์ด์–ธํŠธ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผย ํ†ตํ•ด React๋Š” ํด๋ผ์ด์–ธํŠธย ์™€ย ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๊ตฌ์„ฑ ์š”์†Œ ์ˆ˜์ค€์—์„œ ๋ Œ๋”๋ง ํ™˜๊ฒฝ์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ธฐ๋ณธ์ ์œผ๋กœ APP Router๋Š”ย ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผย ์‚ฌ์šฉํ•˜๋ฏ€๋กœย ์„œ๋ฒ„์—์„œ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‰ฝ๊ฒŒ ๋ Œ๋”๋งํ•˜๊ณ  ํด๋ผ์ด์–ธํŠธ๋กœ ์ „์†ก๋˜๋Š” JavaScript์˜ ์–‘์„ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์„œ๋ฒ„์˜ ์ •์  ๋ฐ ๋™์  ๋ Œ๋”๋ง

Next.js๋Š”ย ์ •์ ย ๋ฐย ๋™์ ย ๋ Œ๋”๋ง์„ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋ง์„ ์ตœ์ ํ™”ํ•  ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

์ •์  ๋ Œ๋”๋ง์„ย ์‚ฌ์šฉํ•˜๋ฉดย ์„œ๋ฒ„ย ๋ฐ ํด๋ผ์ด์–ธํŠธ ๊ตฌ์„ฑ ์š”์†Œ ๋ชจ๋‘ย ๋นŒ๋“œย ์‹œ ์„œ๋ฒ„์—์„œ ๋ฏธ๋ฆฌ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹คย .ย ์ž‘์—… ๊ฒฐ๊ณผ๋Š”ย ์บ์‹œ๋˜์–ดย ํ›„์† ์š”์ฒญ์—์„œ ์žฌ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.ย ์บ์‹œ๋œ ๊ฒฐ๊ณผ๋Š” ์œ ํšจ์„ฑ์„ ๋‹ค์‹œ ๊ฒ€์‚ฌย ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹คย .

์„œ๋ฒ„ ๋ฐ ํด๋ผ์ด์–ธํŠธ ๊ตฌ์„ฑ ์š”์†Œ๋Š” ์ •์  ๋ Œ๋”๋ง ์ค‘์— ๋‹ค๋ฅด๊ฒŒ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค.

  • ํด๋ผ์ด์–ธํŠธ ๊ตฌ์„ฑ ์š”์†Œ์—๋Š” HTML ๋ฐ JSON์ด ๋ฏธ๋ฆฌ ๋ Œ๋”๋ง๋˜์–ด ์„œ๋ฒ„์— ์บ์‹œ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.ย ์บ์‹œ๋œ ๊ฒฐ๊ณผ๋Š” hydration๋ฅผ ์œ„ํ•ด ํด๋ผ์ด์–ธํŠธ๋กœ ์ „์†ก๋ฉ๋‹ˆ๋‹ค.
  • ์„œ๋ฒ„ ๊ตฌ์„ฑ ์š”์†Œ๋Š” React์— ์˜ํ•ด ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋ง๋˜๋ฉฐ ํ•ด๋‹น ํŽ˜์ด๋กœ๋“œ๋Š” HTML์„ ์ƒ์„ฑํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
    ๋™์ผํ•œ ๋ Œ๋”๋ง๋œ ํŽ˜์ด๋กœ๋“œ๋Š” ํด๋ผ์ด์–ธํŠธ์˜ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ hydrate ํ•˜๋Š” ๋ฐ์—๋„ ์‚ฌ์šฉ๋˜๋ฏ€๋กœ ํด๋ผ์ด์–ธํŠธ์— JavaScript๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๋™์  ๋ Œ๋”๋ง์„ ์‚ฌ์šฉํ•˜๋ฉด ์„œ๋ฒ„ย ๋ฐ ํด๋ผ์ด์–ธํŠธ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๋ชจ๋‘ย ์š”์ฒญ ์‹œย ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹คย .ย 

์ž‘์—… ๊ฒฐ๊ณผ๋Š” ์บ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.


๐Ÿ‘‰ ์„œ๋ฒ„์‚ฌ์ด๋“œ ๋ Œ๋”๋ง(SSR)

ํŽ˜์ด์ง€๊ฐ€ย ์„œ๋ฒ„ ์ธก ๋ Œ๋”๋ง์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐย ๊ฐ ์š”์ฒญย ์—์„œ ํŽ˜์ด์ง€ HTML์ด ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.

ํŽ˜์ด์ง€์— ๋Œ€ํ•ด Server-side Rendering์„ ์‚ฌ์šฉํ•˜๋ ค๋ฉด getServerSideProps ํ•จ์ˆ˜๊ฐ€ย ํ•„์š”ํ•ฉ๋‹ˆ๋‹คย .ย 

์ด ํ•จ์ˆ˜(getServerSideProps )๋Š” ๋ชจ๋“  ์š”์ฒญ์—์„œ ์„œ๋ฒ„์— ์˜ํ•ด ํ˜ธ์ถœ๋ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ํŽ˜์ด์ง€์—์„œ ์ž์ฃผ ์—…๋ฐ์ดํŠธ๋˜๋Š” ๋ฐ์ดํ„ฐ(์™ธ๋ถ€ API์—์„œ ๊ฐ€์ ธ์˜ด)๋ฅผ ๋ฏธ๋ฆฌ ๋ Œ๋”๋งํ•ด์•ผ ํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค.

getServerSideProps ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ  ํŽ˜์ด์ง€์— ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

export default function Page({ data }) {
  // Render data...
}
 
// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()
 
  // Pass data to the page via props
  return { props: { data } }
}

getServerSideProps์™€ getStaticProps๊ฐ€ ์œ ์‚ฌ ํ•˜์ง€๋งŒย ๋นŒ๋“œ์‹œ๊ฐ€ ์•„๋‹Œ ๋ชจ๋“  ์š”์ฒญ์—์„œ ์‹คํ–‰๋œ๋‹ค๋Š”ย ์ฐจ์ด์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.


๐Ÿ‘‰ Deploying

Nextjs ํ”„๋กœ์ ํŠธ๋ฅผ ๋ฐฐํฌํ•˜๋Š” ๋‹ค์–‘ํ•œ ๋ฐฉ๋ฒ•์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

โœ… Amplify

AWS ์™„์ „ ๊ด€๋ฆฌํ˜• ์„œ๋น„์Šค์ธ Amplify๋ฅผ ์ด์šฉํ•˜์—ฌ Nextjs ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋ฐฐํฌํ•ฉ๋‹ˆ๋‹ค.

Nextjs์˜ SSR ๊ธฐ๋Šฅ์„ ์™„๋ฒฝํ•˜๊ฒŒ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ’ก Amplify ๋ž€?

AWS Amplify๋ฅผ ํ™œ์šฉํ•˜๋ฉด ํ’๋ถ€ํ•œ ๊ธฐ๋Šฅ์˜ ํ’€ ์Šคํƒ ์›น ๋ฐ ๋ชจ๋ฐ”์ผ ์•ฑ์„ ๊ฐœ๋ฐœ ๋‹จ๊ณ„๋ถ€ํ„ฐ ๋ฐฐํฌ ๋‹จ๊ณ„๊นŒ์ง€ ๊ทธ ์–ด๋Š ๋•Œ๋ณด๋‹ค ์†์‰ฝ๊ฒŒ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Amplify ์žฅ์ ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • ๋นŒ๋“œ ๋ฐ ๋ฐฐํฌ ์ž๋™ํ™” ๊ตฌ์ถ•์ด ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ๊ณผ ๋™์‹œ์— ์™„์„ฑ๋ฉ๋‹ˆ๋‹ค.

  • Amplify ์ฝ˜์†”์—์„œ ๋„๋ฉ”์ธ ์—ฐ๊ฒฐ์„ ๋น„๋กฏํ•œ SSL ์ธ์ฆ์„ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๋ธŒ๋žœ์น˜ ์ƒ์„ฑ ๋ฐ ์ œ๊ฑฐ์‹œ ๋™์ ์œผ๋กœ ๋ฐฐํฌ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ์‚ญ์ œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์„œ๋ฒ„๋ฆฌ์Šค์ด๋ฏ€๋กœ ์‚ฌ์šฉํ•œ๋งŒํผ ๋น„์šฉ์„ ์ง€๋ถˆํ•ฉ๋‹ˆ๋‹ค.


โœ… ECS (Standalone)

Node.js ๋˜๋Š” Docker๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ชจ๋“  ๊ธฐ๋Šฅ์„ ์ง€์›ํ•˜๋Š” Next.js๋ฅผ ์ž์ฒด ํ˜ธ์ŠคํŒ…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

standalone ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” 12 ์ด์ƒ์˜ nextjs ๋ฒ„์ „์œผ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์„ฑํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

next start ๊ธฐ๋Šฅ์„ ์ด์šฉํ•œ ํ˜ธ์ŠคํŒ…๋ณด๋‹ค ์ด๋ฏธ์ง€์˜ ์šฉ๋Ÿ‰์„ ์ตœ์ ํ™”ํ•˜์—ฌ ํ”„๋กœ์ ํŠธ๋ฅผ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


โœ… S3 + ECS

ํ˜„์žฌ ํ˜ธ๋‘๋žฉ์Šค์—์„œ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ์ •์  ํŽ˜์ด์ง€๋Š” S3๋กœ ํ˜ธ์ŠคํŒ…ํ•˜๊ณ , SSR์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ ECS์—์„œ ์„œ๋ฒ„์˜ ์—ญํ• ์„ ๋‹ด๋‹นํ•ฉ๋‹ˆ๋‹ค.


โœ… S3 + Lambda

์ •์  ํŽ˜์ด์ง€๋Š” S3๋กœ ํ˜ธ์ŠคํŒ…ํ•˜๊ณ , SSR์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ Lambda๋ฅผ ์ด์šฉํ•˜์—ฌ ์„œ๋ฒ„์˜ ์—ญํ• ์„ ๋‹ด๋‹นํ•ฉ๋‹ˆ๋‹ค.



๐Ÿ“Œ AWS Amplify (@Nextjs)

๐Ÿ‘‰ Step 00. Getting started

Amplify๋ฅผ ์ด์šฉํ•˜์—ฌ Nextjs๋ฅผ ๋ฐฐํฌํ•˜๋Š” ๊ณผ์ •์„ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

AWS Amplify ์ฝ˜์†”์— ์ ‘์†ํ•˜์—ฌ Amplify Hosting ์‹œ์ž‘ํ•˜๊ธฐ๋ฅผ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

ํ”„๋กœ์ ํŠธ๋ฅผ Github์— ๋ณด๊ด€ํ•˜์˜€์œผ๋ฏ€๋กœ, ์ €์žฅ์†Œ๋ฅผ ์„ ํƒํ•˜๊ณ  ๊ณ„์† ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜์—ฌ ๋ฆฌํฌ์ง€ํ† ๋ฆฌ๋ฅผ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.

Github์— ๋กœ๊ทธ์ธํ•˜์—ฌ Amplify์™€ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.

์—ฐ๊ฒฐํ•˜๊ณ ์ž ํ•˜๋Š” ๊ณ„์ •์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

Amplify์™€ ์—ฐ๋™ํ•  repository๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.

๋ฆฌํฌ์ง€ํ† ๋ฆฌ ์„ ํƒ์ด ์™„๋ฃŒ๋˜๋ฉด, ๋ฐฐํฌํ•˜๊ณ ์ž ํ•˜๋Š” ๋ธŒ๋žœ์น˜๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋นŒ๋“œ ์„ค์ •
๋นŒ๋“œ ์ ˆ์ฐจ์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ํ˜„์žฌ ์ฐฝ์—์„œ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
ํ”„๋กœ์ ํŠธ์˜ ๋ฃจํŠธ๊ฒฝ๋กœ์— amplify.yaml์„ ์ €์žฅํ•˜์—ฌ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ณ„๋„์˜ ์ถ”๊ฐ€์ ์ธ ์„ค์ •์—†์ด ์ €์žฅ ๋ฐ ๋ฐฐํฌ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ์ถ”ํ›„ ์ˆ˜์ • ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

์ƒ์„ฑ์ด ์™„๋ฃŒ๋˜์—ˆ๋‹ค๋ฉด, amplify๊ฐ€ ์ž๋™์œผ๋กœ ๋ธŒ๋žœ์น˜๋กœ๋ถ€ํ„ฐ ์†Œ์Šค๋ฅผ ๊ฐ€์ ธ์™€ CI/CD๋ฅผ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

๋ฐฐํฌ๊ฐ€ ์™„๋ฃŒ๋˜๊ณ , Amplify๋ฅผ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ• ์•Œ์•„๋ณด๊ธฐ๋ฅผ ํ†ตํ•ด ์ถ”๊ฐ€์ ์ธ ๊ธฐ๋Šฅ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฃผ์†Œ๋ฅผ ํด๋ฆญํ•˜๋ฉด ๋ฐฐํฌ๊ฐ€ ์™„๋ฃŒ๋œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


๐Ÿ‘‰ Step 01. ๋„๋ฉ”์ธ ์ถ”๊ฐ€

Amplify๋ฅผ ์ด์šฉํ•˜์—ฌ ๋„๋ฉ”์ธ ์ถ”๊ฐ€ ๋ฐ SSL ์ ์šฉ์„ ์†์‰ฝ๊ฒŒ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ขŒ์ธก์˜ ๋„๋ฉ”์ธ ๊ด€๋ฆฌ ํƒญ์—์„œ ์†Œ์œ ํ•˜๊ณ  ์žˆ๋Š” ๋„๋ฉ”์ธ์„ ์ด์šฉํ•˜์—ฌ ๊ตฌ์„ฑํ•ฉ๋‹ˆ๋‹ค.

์›ํ•˜๋Š” ๋„๋ฉ”์ธ์„ ์„ค์ •ํ•˜์—ฌ ์ €์žฅ์‹œ ์ž๋™์œผ๋กœ Route53์— ์ „ํŒŒ๋จ๊ณผ ๋™์‹œ์—, SSL ์ ์šฉ์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

์ ์šฉ์ด ์™„๋ฃŒ๋˜๋ฉด ์•„๋ž˜ ๊ทธ๋ฆผ๊ณผ ๊ฐ™์ด ๋„๋ฉ”์ธ์œผ๋กœ ๋ฐฐํฌ๋œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


๐Ÿ‘‰ Step 02. ๋ธŒ๋žœ์น˜ ์ถ”๊ฐ€

amplify ์‚ฌ์šฉ์‹œ ์žฅ์ ์€ ๋ธŒ๋žœ์น˜๋ฅผ ์ถ”๊ฐ€ํ•  ๊ฒฝ์šฐ ์†์‰ฝ๊ฒŒ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

dev ๋ธŒ๋žœ์น˜๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

Amplify ๋Œ€์‹œ๋ณด๋“œ์—์„œ ๋ธŒ๋žœ์น˜ ์—ฐ๊ฒฐ์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.

์ƒˆ๋กœ์šด ๋ธŒ๋žœ์น˜๋ฅผ ์ธ์‹ํ•˜๋Š”๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ €์žฅ์„ ์™„๋ฃŒํ•˜๋ฉด, ์•ž์„œ ์„ค์ •ํ•œ main ๋ธŒ๋žœ์น˜์™€ ๊ฐ™์ด CI/CD ํŒŒ์ดํ”„๋ผ์ธ์ด ๋™์ž‘ํ•˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋„๋ฉ”์ธ ์—ฐ๊ฒฐ์„ ์™„๋ฃŒํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด dev ๋ธŒ๋žœ์น˜๋„ ์†์‰ฝ๊ฒŒ ๋ฐฐํฌ ๋จ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


๐Ÿ‘‰ Step 03. ๋ฏธ๋ฆฌ๋ณด๊ธฐ

amplify์˜ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๊ธฐ๋Šฅ์„ ์ด์šฉํ•˜๋ฉด, pull request์‹œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋ฏธ๋ฆฌ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

dev ๋ธŒ๋žœ์น˜๋ฅผ main์œผ๋กœ merge ํ•˜๊ธฐ ์œ„ํ•œ pull request๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

amplify ๋ฏธ๋ฆฌ๋ณด๊ธฐ ํƒญ์—์„œ main ๋ธŒ๋žœ์น˜์— ๋Œ€ํ•œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ์„ค์ •ํ•˜๋ฉด, ์•„๋ž˜์™€ ๊ฐ™์ด ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์ „์šฉ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ CI/CD๊ฐ€ ๋™์ž‘ํ•˜๊ฒŒ ๋˜๋ฉฐ url์ด ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.

์ƒํƒœ๊ฐ€ ์„ฑ๊ณต์ด ๋˜์—ˆ์„๋•Œ url์„ ํ†ตํ•ด pull request ์š”์ฒญ๋œ ์ž‘์—… ๋‚ด์šฉ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.



๐Ÿ“Œ Conclusion

AWS์˜ ์›น/์•ฑ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ˜ธ์ŠคํŒ… ์„œ๋น„์Šค์ธ Amplify๋ฅผ ํ†ตํ•ด NextJS๋ฅผ ๋ฐฐํฌํ•˜์˜€์Šต๋‹ˆ๋‹ค.

Amplify๋ฅผ ์ด์šฉํ•˜๋ฉด ๋„๋ฉ”์ธ ์—ฐ๊ฒฐ, CDN ๊ตฌ์„ฑ, pull request ์ ์šฉ์ „ ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•ด์„œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๊ธฐ๋Šฅ ๋“ฑ ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ฐœ๋ฐœ์— ํŽธํ•œ ํ™˜๊ฒฝ์„ ์ด์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Amplify ๋‹จ์ ์œผ๋กœ๋Š” ํ”„๋กœ์ ํŠธ ๋น„์šฉ์ด ์ฆ๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๋นŒ๋“œ์‹œ ๋ถ„๋‹น $0.01๊ฐ€ ์ฒญ๊ตฌ๋ฉ๋‹ˆ๋‹ค.
  • ๋ฐ์ดํ„ฐ ์ „์†ก๋Ÿ‰์ด $0.15/GB ์ฒญ๊ตฌ๋ฉ๋‹ˆ๋‹ค.
    CloudFront๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ฐฐํฌํ•  ๊ฒฝ์šฐ $0.12/GB ์ž…๋‹ˆ๋‹ค.
  • SSR ์š”์ฒญ์‹œ ์š”์ฒญ์— ๋Œ€ํ•ด์„œ ๋น„์šฉ์ด ์ฒญ๊ตฌ๋ฉ๋‹ˆ๋‹ค.


๐Ÿ”— Reference

profile
์•ˆ๋…•ํ•˜์„ธ์š”! DevOps ์—”์ง€๋‹ˆ์–ด ์ด์žฌ์ฐฌ์ž…๋‹ˆ๋‹ค. ๋ธ”๋กœ๊ทธ์— ๋Œ€ํ•œ ํ”ผ๋“œ๋ฐฑ์€ ์–ธ์ œ๋‚˜ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค! ๊ธฐ์ˆ , ๊ฐœ๋ฐœ, ์šด์˜์— ๊ด€ํ•œ ๋‹ค์–‘ํ•œ ์ฃผ์ œ๋กœ ํ•จ๊ป˜ ๋‚˜๋ˆ„๋ฉฐ, ๋” ๋‚˜์€ ํ˜‘์—…๊ณผ ํšจ์œจ์ ์ธ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ๋งŒ๋“œ๋Š” ๊ณผ์ •์— ๋Œ€ํ•ด ์ธ์‚ฌ์ดํŠธ๋ฅผ ๋‚˜๋ˆ„๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ํ•จ๊ป˜ ์—ฌํ–‰ํ•˜๋Š” ๊ธฐ๋ถ„์œผ๋กœ, ์ฆ๊ฒ๊ฒŒ ์ฝ์–ด์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! ๐Ÿš€

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