Skip to content

๐Ÿš€ ์›น ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋กœ์ ํŠธ์— CD/CD ์ ์šฉํ•˜๊ธฐ โ€‹

โœ๐Ÿผ Frontend CI/CD & Git Flow

ํ˜„์—… ํ”„๋กœ์ ํŠธ ๋ฐฐํฌ ๊ณผ์ •์„ ์‹ค์Šตํ•˜๋ฉฐ ์ •๋ฆฌํ•œ ๊ธฐ๋ก
์—ฌ๊ธฐ์„œ๋Š” Git Flow๋ฅผ ๋‹จ์ˆœํ™”ํ•ด main/dev/feature ๊ตฌ์กฐ๋กœ ์‚ฌ์šฉ


1๏ธโƒฃ ํ”„๋กœ์ ํŠธ ์ดˆ๊ธฐ ์„ธํŒ… โ€‹

ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ & Git ์—ฐ๊ฒฐ โ€‹

bash
$ npm create vite@latest cicd-sandbox -- --template react

$ git init
$ git remote add origin <ํ•ด๋‹น-repo-url>

2๏ธโƒฃ Git Branch ์ „๋žต โ€‹

bash
$ git checkout -b dev
$ git push -u origin dev
  • main: ์•ˆ์ •์ ์ธ ๋ฐฐํฌ์šฉ ๋ธŒ๋žœ์น˜
  • dev: ๊ฐœ๋ฐœ์šฉ ๋ธŒ๋žœ์น˜

3๏ธโƒฃ Issue ๊ด€๋ฆฌ โ€‹

์ž‘์—… ๋‹จ์œ„๋ฅผ ์ตœ๋Œ€ํ•œ ์ž‘๊ฒŒ ๋‚˜๋ˆ„์–ด ์ถฉ๋Œ์„ ์ค„์ธ๋‹ค.
์ถฉ๋Œ์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ€๋Šฅํ•œ ํ•œ ๋…๋ฆฝ์ ์ธ ์ปดํฌ๋„ŒํŠธ๋‚˜ ๊ธฐ๋Šฅ ๋‹จ์œ„๋กœ ์ž‘์—…์„ ๋‚˜๋ˆ„๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

๐Ÿ’ก ๋งŒ์•ฝ ํ”„๋กœ์ ํŠธ ๊ธฐ๊ฐ„์ด 3์ฃผ๋ผ๋ฉด,

  • 1~2์ฃผ์ฐจ: ๊ธฐ๋Šฅ ๊ฐœ๋ฐœ
  • 3์ผ: ๊ธฐ๋Šฅ ๋งˆ๋ฌด๋ฆฌ + ๋ฐฐํฌ ์ค€๋น„
  • 3~4์ผ: ๋ฐฐํฌ ๋ฐ ์•ˆ์ •ํ™”

4๏ธโƒฃ S3 ๋ฒ„ํ‚ท ์ƒ์„ฑ ๋ฐ ์„ค์ • โ€‹

  • ๋ฐฐํฌ ํ™˜๊ฒฝ (์‹ค์ œ ์‚ฌ์šฉ์ž์šฉ): prod-cicd-sandbox
  • ๊ฐœ๋ฐœ ํ™˜๊ฒฝ (ํ…Œ์ŠคํŠธ์šฉ): dev-cicd-sandbox

์„ค์ • ๋ฐฉ๋ฒ•: โ€‹

  1. ๊ถŒํ•œ > ๋ฒ„ํ‚ท ์ •์ฑ…
  2. ์†์„ฑ > ์ •์  ์›น ์‚ฌ์ดํŠธ ํ˜ธ์ŠคํŒ… > ํ™œ์„ฑํ™”

5๏ธโƒฃ CloudFront + ๋„๋ฉ”์ธ ์—ฐ๊ฒฐ โ€‹

  • ํ”„๋กœ๋•์…˜ / ๊ฐœ๋ฐœ์šฉ ๊ฐ๊ฐ ๋”ฐ๋กœ CloudFront ๋ฐฐํฌ ์ƒ์„ฑ

  • ๋„๋ฉ”์ธ ์—ฐ๊ฒฐ ์‹œ์—๋„ prod, dev ๋”ฐ๋กœ ๋งคํ•‘


6๏ธโƒฃ ACM ์ธ์ฆ์„œ ๋ฐœ๊ธ‰ & ์ ์šฉ โ€‹

(1) ์ธ์ฆ์„œ ๋ฐœ๊ธ‰ โ€‹

  • CloudFront > ์„ค์ • > ํŽธ์ง‘ > ACM ๋ฐœ๊ธ‰ ์š”์ฒญ

๐Ÿš€ ๋ฐฐํฌ ํ™˜๊ฒฝ

๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป ๊ฐœ๋ฐœ ํ™˜๊ฒฝ


(2) ๋„๋ฉ”์ธ์— CNAME ์ถ”๊ฐ€ โ€‹

  • ๋ฐœ๊ธ‰ ํ›„, ACM์—์„œ ์ œ๊ณตํ•˜๋Š” CNAME ๋ ˆ์ฝ”๋“œ๋ฅผ ๋„๋ฉ”์ธ์— ๋“ฑ๋กํ•œ๋‹ค.

๐Ÿš€ ๋ฐฐํฌ ํ™˜๊ฒฝ

๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป ๊ฐœ๋ฐœ ํ™˜๊ฒฝ


(3) CloudFront์— ์ธ์ฆ์„œ ์ ์šฉ โ€‹

  • CloudFront ์ฝ˜์†”์—์„œ ์„ค์ • > ํŽธ์ง‘ > ์ธ์ฆ์„œ ์ ์šฉ ์ง„ํ–‰

๐Ÿš€ ๋ฐฐํฌ ํ™˜๊ฒฝ

๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป ๊ฐœ๋ฐœ ํ™˜๊ฒฝ


(4) ๊ฒฐ๊ณผ ํ™•์ธ โ€‹


7๏ธโƒฃ CI/CD โ€‹

๋ฐฐํฌ/๊ฐœ๋ฐœ ํ™˜๊ฒฝ๋ณ„ ์›Œํฌํ”Œ๋กœ์šฐ๋ฅผ ๋‚˜๋ˆˆ๋‹ค.

๐Ÿ“„ deploy-dev.yml โ€‹

yml
name: Deploy To Dev S3

on:
  push:
    branches:
      - dev

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Github Repository ํŒŒ์ผ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
        uses: actions/checkout@v4

      - name: ์˜์กด์„ฑ ์„ค์น˜
        run: npm install

      - name: ๋นŒ๋“œ
        run: npm run build

      - name: AWS ์ธ์ฆ ์ ˆ์ฐจ
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-region: ap-northeast-2
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{secrets.AWS_SECRET_ACCESS_KEY}}

      - name: S3 ๊ธฐ์กด ํŒŒ์ผ๋“ค ์‚ญ์ œ ํ›„ ์ƒˆ๋กœ ์—…๋กœ๋“œ
        run: |
          aws s3 rm --recursive s3://dev-cicd-sandbox
          aws s3 cp ./dist s3://dev-cicd-sandbox/ --recursive

      - name: CloudFront ์บ์‹œ ๋ฌดํšจํ™”
        run: aws cloudfront create-invalidation --distribution-id E2BMCVCA4L9IAV --paths "/*"

๐Ÿ“„ deploy-prod.yml โ€‹

yml
name: Deploy To Prod S3

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Github Repository ํŒŒ์ผ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
        uses: actions/checkout@v4

      - name: ์˜์กด์„ฑ ์„ค์น˜
        run: npm install

      - name: ๋นŒ๋“œ
        run: npm run build

      - name: AWS ์ธ์ฆ ์ ˆ์ฐจ
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-region: ap-northeast-2
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{secrets.AWS_SECRET_ACCESS_KEY}}

      - name: S3 ๊ธฐ์กด ํŒŒ์ผ๋“ค ์‚ญ์ œ ํ›„ ์ƒˆ๋กœ ์—…๋กœ๋“œ
        run: |
          aws s3 rm --recursive s3://prod-cicd-sandbox
          aws s3 cp ./dist s3://prod-cicd-sandbox/ --recursive

      - name: CloudFront ์บ์‹œ ๋ฌดํšจํ™”
        run: aws cloudfront create-invalidation --distribution-id E3P9R8VPD08UJW --paths "/*"

8๏ธโƒฃ IAM & GitHub Secrets ์„ค์ • โ€‹

IAM ์‚ฌ์šฉ์ž ์ƒ์„ฑ โ€‹

  • ๋ฐฐํฌ ํ™˜๊ฒฝ & ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ณตํ†ต ์‚ฌ์šฉ์ž ์ƒ์„ฑ


์•ก์„ธ์Šค ํ‚ค ๋ฐœ๊ธ‰ โ€‹

  • IAM > ์‚ฌ์šฉ์ž > ๋ณด์•ˆ ์ž๊ฒฉ ์ฆ๋ช…


GitHub Secrets ๋“ฑ๋ก โ€‹

  • AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY ๋“ฑ๋ก


๐Ÿ” Access Key ์‚ฌ์šฉ ์ •๋ฆฌ โ€‹

๐Ÿ”‘ ๋ฐฐํฌ/๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ ๋™์ผ Access Key๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  โ€‹

1. IAM ์‚ฌ์šฉ์ž ๋‹จ์œ„ ๋ฐœ๊ธ‰ โ€‹

  • Access Key๋Š” IAM ์‚ฌ์šฉ์ž(User) ๊ธฐ์ค€์œผ๋กœ ๋ฐœ๊ธ‰๋œ๋‹ค.
  • ๊ฐ™์€ ์‚ฌ์šฉ์ž์—๊ฒŒ prod/dev ๊ถŒํ•œ์„ ๋ชจ๋‘ ๋ถ€์—ฌํ•˜๋ฉด ๋™์ผ ํ‚ค๋กœ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๋‹ค.

2.๊ถŒํ•œ ์ •์ฑ… ํ†ตํ•ฉ โ€‹

  • ํ•˜๋‚˜์˜ ์‚ฌ์šฉ์ž์— S3, CloudFront ๊ถŒํ•œ์„ ๋™์‹œ์— ์ฃผ๋ฉด ๋‘ ํ™˜๊ฒฝ์„ ๋ชจ๋‘ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.

3. ๊ด€๋ฆฌ ๋‹จ์ˆœํ™” โ€‹

  • dev/prod๋ณ„๋กœ ํ‚ค๋ฅผ ๋”ฐ๋กœ ๋ฐœ๊ธ‰ํ•˜๋ฉด ๊ด€๋ฆฌ ํฌ์ธํŠธ๊ฐ€ ๋Š˜์–ด๋‚œ๋‹ค.
  • ์‹ค์Šต ๋‹จ๊ณ„์—์„œ๋Š” ํ•˜๋‚˜์˜ ํ‚ค๋งŒ ์จ๋„ ์ถฉ๋ถ„ํžˆ ํŽธ๋ฆฌํ•˜๋‹ค.

โš ๏ธ ์šด์˜ ํ™˜๊ฒฝ์—์„œ์˜ ๊ถŒ์žฅ ์‚ฌํ•ญ โ€‹

  • ๋ณด์•ˆ ๊ฐ•ํ™”๋ฅผ ์œ„ํ•ด ํ™˜๊ฒฝ๋ณ„ IAM ์‚ฌ์šฉ์ž ๋ถ„๋ฆฌ๊ฐ€ ๊ถŒ์žฅ๋œ๋‹ค.
  • dev/prod๋ฅผ ๋ถ„๋ฆฌํ•˜๋ฉด ํ‚ค ์œ ์ถœ ์‹œ ํ”ผํ•ด ๋ฒ”์œ„๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.
  • ์›์น™: ์ตœ์†Œ ๊ถŒํ•œ ๋ถ€์—ฌ(Principle of Least Privilege)

๐Ÿ’ก ์‹ค์Šต์—์„œ๋Š” ํŽธ์˜๋ฅผ ์œ„ํ•ด ๋™์ผ Access Key๋ฅผ ์‚ฌ์šฉํ–ˆ์ง€๋งŒ,

์‹ค์ œ ์šด์˜ ํ™˜๊ฒฝ์—์„œ๋Š” dev/prod๋ฅผ ๋ถ„๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ๋ณด์•ˆ์ƒ ์•ˆ์ „ํ•˜๋‹ค.


9๏ธโƒฃ ๋ฐฐํฌ ๊ณผ์ • ํ™•์ธ โ€‹

bash
# dev ์ž‘์—… ์™„๋ฃŒ ํ›„
$ git checkout main
$ git merge dev
$ git push
  • dev ๋ธŒ๋žœ์น˜ โ†’ ๊ฐœ๋ฐœ์šฉ ๋ฐฐํฌ
  • main ๋ธŒ๋žœ์น˜ โ†’ ์šด์˜์šฉ ๋ฐฐํฌ

GitHub Actions ์‹คํ–‰ ๊ฒฐ๊ณผ โ€‹


๐Ÿ’ก ์ด์ œ ๋‹จ์ˆœํžˆ ์ฝ”๋“œ๋ฅผ push๋งŒ ํ•ด๋„ S3 + CloudFront + ACM๊นŒ์ง€ ์ž๋™์œผ๋กœ ๋ฐฐํฌ๋œ๋‹ค.
ํ”„๋กœ์ ํŠธ ์ดˆ๋ฐ˜๋ถ€ํ„ฐ ํ™˜๊ฒฝ์„ ๋ถ„๋ฆฌํ•ด๋‘๋ฉด, ์‹ค์„œ๋น„์Šค ์•ˆ์ •์„ฑ๊ณผ ๊ฐœ๋ฐœ ํŽธ์˜์„ฑ์„ ๋™์‹œ์— ์ฑ™๊ธธ ์ˆ˜ ์žˆ๋‹ค.




๐Ÿชพ Git Branch ์ „๋žต & PR ๋ฐฐํฌ ํ”Œ๋กœ์šฐ โ€‹

1๏ธโƒฃ ๋ธŒ๋žœ์น˜ ๊ตฌ์กฐ โ€‹

  • main: ํ”„๋กœ๋•์…˜(์‹ค์„œ๋น„์Šค) ๋ฐฐํฌ์šฉ
  • dev: ๊ฐœ๋ฐœ/์Šคํ…Œ์ด์ง• ๋ฐฐํฌ์šฉ
  • feature/*: ๊ธฐ๋Šฅ ๋‹จ์œ„ ์ž‘์—…์šฉ (์˜ˆ: feature/1, feature/login)
bash
# ๊ธฐ๋Šฅ ๋ธŒ๋žœ์น˜ ์ƒ์„ฑ & ์›๊ฒฉ ํ‘ธ์‹œ
git checkout -b feature/1
git push -u origin feature/1

๐Ÿ’ก PR๋กœ ํ•ฉ์น˜๊ธฐ
๋กœ์ปฌ์—์„œ dev๋กœ ์ง์ ‘ mergeํ•˜๋Š” ๋ฐฉ์‹์€ ์ง€์–‘. PR์„ ํ†ตํ•ด ๊ธฐ๋ก/๋ฆฌ๋ทฐ/CI๋ฅผ ๊ฑฐ์น˜๋ฉฐ ์ž๋™ ๋ฐฐํฌ๊นŒ์ง€ ์—ฐ๋™ํ•˜๊ธฐ


2๏ธโƒฃ ์ž‘์—… ํ๋ฆ„ โ€‹

(1) ๊ธฐ๋Šฅ ๊ฐœ๋ฐœ โ†’ dev ๋ณ‘ํ•ฉ โ€‹

  1. feature/1์—์„œ ์ž‘์—… & ์ปค๋ฐ‹

  2. GitHub์—์„œ base: dev โ† compare: feature/1 ๋กœ PR ์ƒ์„ฑ

  3. Merge โ†’ GitHub Actions๊ฐ€ dev ๋ธŒ๋žœ์น˜ push ์ด๋ฒคํŠธ ๊ฐ์ง€ โ†’ Dev ํ™˜๊ฒฝ ์ž๋™ ๋ฐฐํฌ


(2) dev โ†’ main ๋ณ‘ํ•ฉ โ€‹

  1. ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ ํ™•์ธ ํ›„

  2. base: main โ† compare: dev ๋กœ PR ์ƒ์„ฑ

  3. Merge โ†’ GitHub Actions๊ฐ€ main ๋ธŒ๋žœ์น˜ push ์ด๋ฒคํŠธ ๊ฐ์ง€ โ†’ Prod ํ™˜๊ฒฝ ์ž๋™ ๋ฐฐํฌ


3๏ธโƒฃ GitHub Actions ํŠธ๋ฆฌ๊ฑฐ ์š”์•ฝ โ€‹

  • Deploy To Dev: dev ๋ธŒ๋žœ์น˜ push ์‹œ ์‹คํ–‰
  • Deploy To Prod: main ๋ธŒ๋žœ์น˜ push ์‹œ ์‹คํ–‰

#์˜ค์ฆˆ์ฝ”๋”ฉ์Šค์ฟจ#์ดˆ๊ฒฉ์ฐจ_ํ”„๋ก ํŠธ์—”๋“œ_13๊ธฐ#๊ฐœ๋ฐœ๊ธฐ๋ก