Logo
Hyunsu Blog
peep

๐Ÿ“†Published :Apr 13, 2024 โ€ข

๐Ÿ“†Updated :Apr 13, 2024 โ€ข

โ˜•๏ธ2min

์›”๊ฐ„ CS 4์›” - 1์ฃผ์ฐจ CI/CD ์ •๋ฆฌ

์›”๊ฐ„ CS CI/CD ๋‚˜๋Š” ์™œ ์‹œ์ž‘ํ–ˆ๋‚˜?

์šด์˜ ์ค‘์ธ ๋ฒ ์ดํ‚น ์˜ˆ์•ฝ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ํ˜„์žฌ AWS Elasticbeanstalk ์— ๋ฐฐํฌ ๋˜์–ด ๊ด€๋ฆฌ ํ•˜๊ณ  ์žˆ๋‹ค. ๋ฐฐํฌ์˜ ์ž๋™ํ™”๋Š” ์•„๋‹ˆ์ง€๋งŒ, ๊ทธ๋ž˜๋„ aws cli๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ฐฐํฌ๋ฅผ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ์—ˆ๊ณ  ์žฆ์€ ์ˆ˜์ •์ด ์•„๋‹ˆ๊ธฐ์— ๋ฐฐํฌ์— ๋Œ€ํ•œ ๋ถˆํŽธํ•จ์„ ํฌ๊ฒŒ ๋Š๋ผ์ง€ ์•Š์•˜๋‹ค. ๋ถˆํŽธํ•จ์€ ์—†์—ˆ์ง€๋งŒ, CI/CD๋ฅผ ํ†ตํ•ด ๋ฐฐํฌ ์ž๋™ํ™”๋ฅผ ์ง„ํ–‰ ํ•˜๋ฉด ๋” ๋‚˜์€ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ CI/CD๋ฅผ ๊ณต๋ถ€ํ•˜๊ณ  ์ ์šฉํ•ด ๋ณด๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ๋‹ค.

CI/CD ๋ž€ ๋ฌด์—‡์ธ๊ฐ€?

์ง€์†์  ํ†ตํ•ฉ(Continuous Integration)

์ง€์†์  ํ†ตํ•ฉ์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ๊ฐœ๋ฐœ ์ฃผ๊ธฐ ์ „๋ฐ˜์—์„œ ๋” ๋นˆ๋ฒˆํ•˜๊ฒŒ ์‹ ๊ทœ ์ž‘์„ฑ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ฉํ•˜๋Š” ์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ ํ”„๋กœ์„ธ์Šค. ๋งค์ผ 1ํšŒ ์ด์ƒ ์ฝ”๋“œ ๋ฒ ์ด์Šค์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ๋นŒ๋“œํ•  ๋•Œ๋งˆ๋‹ค ์ž๋™ ํ…Œ์ŠคํŠธ๊ฐ€ ์‹คํ–‰๋˜์–ด ํ†ตํ•ฉ ๋ฌธ์ œ์ ์„ ์ผ์ฐ ์ฐพ์•„๋ƒ…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ฌธ์ œ์ ์„ ์ˆ˜์ •ํ•˜๊ธฐ๊ฐ€ ๋” ์šฉ์ดํ•ฉ๋‹ˆ๋‹ค ์ถœ์ฒ˜: IBM

์ง€์†์  ๋ฐฐํฌ(Continuous Deployment)

์ง€์†์  ํ†ตํ•ฉ์ด ๋๋‚˜๋Š” ์ง€์ ์—์„œ ๋‹ค์‹œ ์‹œ์ž‘ํ•˜์—ฌ ์„ ํƒ๋œ ์ธํ”„๋ผ ํ™˜๊ฒฝ์œผ๋กœ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ž๋™ ๋”œ๋ฆฌ๋ฒ„๋ฆฌํ•ฉ๋‹ˆ๋‹ค. CD๋Š” ๊ฒ€์ฆ ์™„๋ฃŒ๋œ ์ฝ”๋“œ ๋ฒ ์ด์Šค ๋ณ€๊ฒฝ ์‚ฌํ•ญ(์—…๋ฐ์ดํŠธ, ๋ฒ„๊ทธ ์ˆ˜์ •, ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ ๋“ฑ)์„ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ตœ๋Œ€ํ•œ ๋น ๋ฅด๊ณ  ์•ˆ์ „ํ•˜๊ฒŒ ์ œ๊ณตํ•˜๋Š” ๋ฐ ์ค‘์ ์„ ๋‘ก๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์ฝ”๋“œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ๊ฐœ๋ฐœ, ํ…Œ์ŠคํŠธ, ํ”„๋กœ๋•์…˜ ๋“ฑ๊ณผ ๊ฐ™์€ ๋‹ค์–‘ํ•œ ํ™˜๊ฒฝ์— ๋ฐฐํฌํ•˜๋Š” ์ž‘์—…์ด ์ž๋™ํ™” ๋ฉ๋‹ˆ๋‹ค. ์ถœ์ฒ˜: IBM

์ œํ’ˆ์€ ์ง€์†์  ํ†ตํ•ฉ์„ ํ†ตํ•ด ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ •์‚ฐ ์ž‘๋™์— ๋Œ€ํ•œ ์•ˆ์ •์„ฑ์„ ๋ณด์žฅํ•ด ์ค€๋‹ค. ํ•˜์ง€๋งŒ ์ด ๊ณผ์ •์€ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ์— ๋Œ€ํ•œ ํŒ€์˜ ๋ฌธํ™”๊ฐ€ ํ•„์š”ํ•˜๋ฉฐ, ๋™์‹œ์— ๊ฐœ๋ฐœ์ž ๊ฐ„์˜ ํ˜‘์—…์ด ํ•„์š”ํ•˜๋‹ค.

Github Flow์ „๋žต์— ๋Œ€ํ•œ ์ดํ•ด

๋‹ค์–‘ํ•œ Git๋ธŒ๋žœ์น˜ ์ „๋žต

  • Git Flow
  • GitHub Flow
  • GitHub Rebase
GitHub Flow ๋ฅผ ์„ ํƒํ•œ ์ด์œ 

github-flow.png

  • ํ˜„์žฌ ํ”„๋กœ์ ํŠธ์— ๊ธฐ์—ฌํ•˜๋Š” ์‚ฌ๋žŒ์ด ๋‚˜ ํ˜ผ์ž ์ด๋ฏ€๋กœ ๋ณต์žกํ•œ ๋ธŒ๋žœ์น˜ ์ „๋žต์„ ํ•„์š”๋กœ ํ•˜์ง€ ์•Š์•„ ๋น ๋ฅด๊ณ  ์‰ฝ๊ฒŒ ๊ด€๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.
  • GitHub Flow๋Š” main ๋ธŒ๋žœ์น˜๋กœ ๋ณ‘ํ•ฉ๋œ ํ›„ ์ฆ‰์‹œ ๋ฐฐํฌ๊ฐ€ ๊ฐ€๋Šฅ ํ•˜๋ฏ€๋กœ, Git Flow ์˜ ์—ฌ๋Ÿฌ ๋ธŒ๋žœ์น˜ ๋‹จ๊ณ„๋“ค์„ ๊ฑฐ์น˜๋Š” ๊ณผ์ • ๋ณด๋‹ค ๋ฐฐํฌ ๊นŒ์ง€ ๋น ๋ฅด๊ฒŒ ๋ฐ˜์˜์ด ๊ฐ€๋Šฅ ํ•˜๋‹ค๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ๋งŒ์•ฝ ์—ฌ๊ธฐ์„œ ํŒ€์›์ด ์ถ”๊ฐ€ ๋œ๋‹ค ํ• ์ง€๋ผ๋„ ์›Œ๋‚™ ๊ธฐ๋ณธ์ ์ธ ๊ตฌ์กฐ์—์„œ ์‹œ์ž‘ํ•˜๋Š” ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ํ™•์žฅํ•˜๋Š” ๊ฒƒ์— ๋Œ€ํ•œ ๋ถ€๋‹ด์ด ์ ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.
GitHub Flow ์ „๋žต
  • Main๋ธŒ๋žœ์น˜์™€ Feature ๋ธŒ๋žœ์น˜๋กœ ๋‚˜๋ˆ„์–ด ๊ฐœ๋ฐœ
  • Main ๋ธŒ๋žœ์น˜๋Š” ๋ฐฐํฌ๋ฅผ ํ–ˆ์„ ๋•Œ, ํ•ญ์ƒ ๋ฌธ์ œ๊ฐ€ ์—†์Œ์„ ๋ณด์žฅ ํ•ด์•ผ ํ•˜๋Š” ์•ˆ์ „ํ•œ ์ฝ”๋“œ ๋ฒ ์ด์Šค๊ฐ€ ์กด์žฌ
  • Feature ๋ธŒ๋žœ์น˜๋Š” ๊ธฐ๋Šฅ ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•˜๋Š” ๋ธŒ๋žœ์น˜๋กœ, Main ๋ธŒ๋žœ์น˜์—์„œ ๋ถ„๊ธฐ๋˜์–ด ์ƒ์„ฑ๋œ๋‹ค.
  • Feature ๋ธŒ๋žœ์น˜์—์„œ ๊ฐœ๋ฐœ์ด ์™„๋ฃŒ ๋˜๋ฉด, Main ๋ธŒ๋žœ์น˜๋กœ PR์„ ์ƒ์„ฑํ•œ๋‹ค.
  • ์–ด๋–ค ๊ตฌํ˜„๋ถ€๋ฅผ ๋งŒ๋“ค ๊ฒƒ์ธ์ง€ ๊ตฌ์ฒด์ ์ธ ๋ธŒ๋žœ์น˜ ์ด๋ฆ„์ด์–ด์•ผ ํ•œ๋‹ค.

CloudFront, S3 ๋ฐฐํฌ ์ธํ”„๋ผ ๊ตฌ์„ฑ

img.png

ํŠน์ • ๋„๋ฉ”์ธ์„ ์ฃผ์†Œ์ฐฝ์—์„œ ๊ฒ€์ƒ‰ํ•˜๋ฉด ํ†ต์ƒ์ ์œผ๋กœ ๊ทธ ๋„๋ฉ”์ธ์„ ์†Œ์œ ํ•˜๊ณ  ์žˆ๋Š” ๋„ค์ž„ ์„œ๋ฒ„ ์ชฝ์œผ๋กœ ์š”์ฒญ์„ ๋ณด๋‚ด๊ฒŒ ๋œ๋‹ค. ๋„๋ฉ”์ธ์„ ๊ตฌ์ž…ํ•œ ๊ณณ์ด ๊ฐ€๋น„์•„ ์ธ๋ฐ, aws์—์„œ ์ œ๊ณตํ•˜๋Š” CloudFront์™€ S3๋ฅผ ์ด์šฉํ•˜์—ฌ ๋„๋ฉ”์ธ์„ ์—ฐ๊ฒฐํ•˜๊ณ ์ž ํ•œ๋‹ค. ๊ทธ๋ž˜์„œ ๋„ค์ž„์„œ๋ฒ„๋ฅผ ๊ฐ€๋น„์•„์—์„œ AWS Route53์˜ ๋„ค์ž„์„œ๋ฒ„๋กœ ๋ณ€๊ฒฝํ•˜๊ฒŒ ๋˜๋ฉด, ์š”์ฒญ์ด AWS๋กœ ๋“ค์–ด์˜ค๊ฒŒ ๋œ๋‹ค.

hyunsu.shop ์œผ๋กœ ์‚ฌ์šฉ์ž๊ฐ€ ์ ‘์†์„ ์‹œ๋„ํ•˜๋ฉด, ๋„ค์ž„์„œ๋ฒ„์ธ AWS Route53๋กœ ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ , Route53๋Š” ํ•ด๋‹น URL์— A๋ ˆ์ฝ”๋“œ๊ฐ€ ์žˆ๋Š”์ง€ ํ™•์ธํ•œ๋‹ค. ๋งŒ์•ฝ CloudfFront๋ฅผ ํ–ฅํ•œ A๋ ˆ์ฝ”๋“œ๊ฐ€ ์žˆ๋‹ค๋ฉด CloudFront๋กœ ์š”์ฒญ์„ ๋ณด๋‚ธ๋‹ค.

CloudFront์— ๋Œ€ํ•œ ์„ค๋ช…์„ ๊ฐ„๋žตํžˆ ํ•˜์ž๋ฉด, ์‚ฌ์šฉ์ž์—๊ฒŒ ์ปจํ…์ธ ๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ ์ž ํ•  ๋•Œ๋Š” ๋ธŒ๋ผ์šฐ์ €์™€ CloudFront ์‚ฌ์ด์— HTTPS ํ”„๋กœํ† ์ฝœ์„ ์‚ฌ์šฉํ•œ๋‹ค. ์ด ๋•Œ, SSL/TLS ์ธ์ฆ์„œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ์™€ CloudFront ์‚ฌ์ด์˜ ํ†ต์‹ ์ด ์•”ํ˜ธํ™” ๋œ๋‹ค.

์—ฌ๊ธฐ์„œ CloudFront๊ฐ€ ๊ฐ€์ ธ์™€์•ผ ํ•  ์ปจํ…์ธ ๋Š” ์˜ค๋ฆฌ์ง„ ์„œ๋ฒ„ ์ฆ‰ S3์— ์žˆ๋Š” ์ •์  ํŒŒ์ผ์„ ๊ฐ€์ ธ์˜ค๋Š”๋ฐ ์ด ๋•Œ์—๋„ ํ†ต์‹ ์„ ์•”ํ˜ธํ™”ํ•˜๊ธฐ ์œ„ํ•ด SSL/TLS๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

/index.html์— ์žˆ๋Š” ๋ฆฌ์•กํŠธ ํŒŒ์ผ์— ์ ‘๊ทผ ํ•จ์œผ๋กœ์„œ CSR๋ฐฉ์‹์œผ๋กœ ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋ง ํ•œ๋‹ค.

Terraform์„ ์ด์šฉํ•œ ์ธํ”„๋ผ ๊ตฌ์ถ•

์‹ค์Šต Gitbub Repo

  1. aws IAM ๊ณ„์ • ์ƒ์„ฑ
  2. aws-cli profile ์„ค์ •ํ•˜๊ธฐ 2.1 aws ๊ณ„์ •์ด ์—ฌ๋Ÿฌ๊ฐœ ์ž„์„ ๊ฐ์•ˆํ•˜์—ฌ ๋ฉ€ํ‹ฐ ํ”„๋กœํ•„ ์ƒ์„ฑ
  3. terraform ์„ค์น˜
  4. DNS ๋ฆฌ์†Œ์Šค ๋ฐฐํฌํ•˜๊ธฐ
cd ./infra/dns terraform init terraform apply -var="profile=monthly-cs" -var="domain_name=<๊ฐ€๋น„์•„์—์„œ ๊ตฌ๋งคํ•œ ๋„๋ฉ”์ธ>" ์˜ˆ) terraform apply -var="profile=monthly-cs" -var="domain_name=unchaptered.shop"
  1. Enter a value: yes ์ž…๋ ฅ ํ›„ ๋‚˜์˜จ dns_ns_record ๊ฐ’๋“ค์„ ๊ฐ€๋น„์•„์— ๋“ฑ๋ก ํ•œ๋‹ค.
  2. CloudFront, S3 ๋ฐฐํฌ
cd ../../ # ํ”„๋กœ์ ํŠธ ๊ฒฝ๋กœ๋กœ ๊ฐ€๊ธฐ cd ./infra/website terraform init terraform apply -var="profile=monthly-cs" -var="domain_name=<๊ฐ€๋น„์•„์—์„œ ๊ตฌ๋งคํ•œ ๋„๋ฉ”์ธ>" ์˜ˆ) terraform apply -var="profile=monthly-cs" -var="domain_name=unchaptered.shop"
  1. ๋กœ์ปฌ์—์„œ ๋ฐฐํฌ - ๋นŒ๋“œ ํŒŒ์ผ s3์— ์—…๋กœ๋“œํ•˜๊ธฐ
aws s3 cp --recursive ./build s3://<๊ฐ€๋น„์•„์—์„œ ๊ตฌ๋งคํ•œ ๋„๋ฉ”์ธ> --profile monthly-cs ์˜ˆ) aws s3 cp --recursive ./build s3://unchaptered.shop --profile monthly-cs

img.png

๋งˆ๋ฌด๋ฆฌ

  • ํ˜„์žฌ ๋‚˜์˜ ํ”„๋กœ์ ํŠธ์—์„œ ์•Œ๋งž์€ CI/CD ์ „๋žต์ธ GitHub Flow ๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.
  • Terraform ์„ ์ฒ˜์Œ ์ ‘ํ•ด๋ณด๋Š” ์‹œ๊ฐ„์ด์—ˆ๋‹ค. ์‹ค์Šต์„ ์ง„ํ–‰ํ•˜๋ฉด์„œ๋„ Terraform์˜ ๋ช…๋ น์–ด์— ์ง‘์ค‘ ํ•˜๋‹ค๊ธฐ ๋ณด๋‹จ ์™œ ์‚ฌ์šฉํ• ๊นŒ์— ์กฐ๊ธˆ ๋” ์ƒ๊ฐํ•ด๋ณด์•˜๋‹ค.
  • aws ์ธํ”„๋ผ ๊ตฌ์ถ•์„ GUI๋ฅผ ํ†ตํ•ด ์ง„ํ–‰ํ•ด ์™”์—ˆ๋Š”๋ฐ Terraform์„ ํ†ตํ•ด ์ธํ”„๋ผ๋ฅผ ๊ตฌ์ถ•ํ•˜๋ฉด์„œ, IaC(Infrastructure as Code) ๋กœ ์ธํ”„๋ผ ์ŠคํŠธ๋Ÿญ์ณ์˜ ๋„๊ตฌ์ž„์„ ๊ฒฝํ—˜ ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.
  • ์กฐ๊ธˆ ๋” ์ฐพ์•„๋ณด๋‹ˆ ์–ด๋–ค ์•„ํ‹ฐํด์—์„œ๋Š” ์ด๋Ÿฐ ๋ถ€๋ถ„์„ ๊ฐ•์กฐํ•˜๊ธฐ๋„ ํ–ˆ๋‹ค.

    ์—ฌ๊ธฐ์„œ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฒƒ์€ AWS ์‹ค์ œ ์ธํ”„๋ผ์™€ Backend์— ์ €์žฅ๋œ ์ƒํƒœ๊ฐ€ 100% ์ผ์น˜ํ•˜๋„๋ก ๋งŒ๋“œ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ…Œ๋ผํผ์„ ์šด์˜ํ•˜๋ฉด์„œ ์ตœ๋Œ€ํ•œ ์ด ๋‘๊ฐ€์ง€๊ฐ€ 100% ๋™์ผํ•˜๋„๋ก ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•œ๋ฐ, ํ…Œ๋ผํผ์—์„œ๋Š” ์ด๋ฅผ ์œ„ํ•ด import, state ๋“ฑ ์—ฌ๋Ÿฌ ๋ช…๋ น์–ด๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

Hi, I'm Hyunsu ๐Ÿ‘‹

Profile Image

์•ˆ๋…•ํ•˜์„ธ์š”. ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ์ฃผํ˜„์ˆ˜์ž…๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž๋“ค์—๊ฒŒ ํ’๋ถ€ํ•˜๊ณ  ๊ฐ€์น˜ ์žˆ๋Š” ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋Š” ์ผ์— ๋ฟŒ๋“ฏํ•จ์„ ๋Š๋‚๋‹ˆ๋‹ค.

์˜ต์‹œ๋””์–ธ(Obsidian)์—์„œ ํ˜„์žฌ ๋ธ”๋กœ๊ทธ๋กœ ํ•˜๋‚˜์”ฉ ๊ธ€์„ ์˜ฎ๊ธฐ๋Š” ๊ณผ์ •์— ์žˆ์–ด์š”. โ˜•๏ธ ๐Ÿ‘ฉโ€๐Ÿ’ป โ›ท

Github on ViewReach Me Out