๐ ์น ํ๋ก ํธ์๋ ํ๋ก์ ํธ์ CD/CD ์ ์ฉํ๊ธฐ โ
โ๐ผ Frontend CI/CD & Git Flow
ํ์
ํ๋ก์ ํธ ๋ฐฐํฌ ๊ณผ์ ์ ์ค์ตํ๋ฉฐ ์ ๋ฆฌํ ๊ธฐ๋ก
์ฌ๊ธฐ์๋ Git Flow๋ฅผ ๋จ์ํํด main/dev/feature
๊ตฌ์กฐ๋ก ์ฌ์ฉ
1๏ธโฃ ํ๋ก์ ํธ ์ด๊ธฐ ์ธํ โ
ํ๋ก์ ํธ ์์ฑ & Git ์ฐ๊ฒฐ โ
$ npm create vite@latest cicd-sandbox -- --template react
$ git init
$ git remote add origin <ํด๋น-repo-url>
2๏ธโฃ Git Branch ์ ๋ต โ
$ 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
์ค์ ๋ฐฉ๋ฒ: โ
- ๊ถํ > ๋ฒํท ์ ์ฑ
- ์์ฑ > ์ ์ ์น ์ฌ์ดํธ ํธ์คํ > ํ์ฑํ
5๏ธโฃ CloudFront + ๋๋ฉ์ธ ์ฐ๊ฒฐ โ
- ํ๋ก๋์ / ๊ฐ๋ฐ์ฉ ๊ฐ๊ฐ ๋ฐ๋ก CloudFront ๋ฐฐํฌ ์์ฑ
- ๋๋ฉ์ธ ์ฐ๊ฒฐ ์์๋ prod, dev ๋ฐ๋ก ๋งคํ
6๏ธโฃ ACM ์ธ์ฆ์ ๋ฐ๊ธ & ์ ์ฉ โ
(1) ์ธ์ฆ์ ๋ฐ๊ธ โ
- CloudFront > ์ค์ > ํธ์ง > ACM ๋ฐ๊ธ ์์ฒญ
๐ ๋ฐฐํฌ ํ๊ฒฝ
๐ฉ๐ปโ๐ป ๊ฐ๋ฐ ํ๊ฒฝ
(2) ๋๋ฉ์ธ์ CNAME ์ถ๊ฐ โ
- ๋ฐ๊ธ ํ, ACM์์ ์ ๊ณตํ๋ CNAME ๋ ์ฝ๋๋ฅผ ๋๋ฉ์ธ์ ๋ฑ๋กํ๋ค.
๐ ๋ฐฐํฌ ํ๊ฒฝ
๐ฉ๐ปโ๐ป ๊ฐ๋ฐ ํ๊ฒฝ
(3) CloudFront์ ์ธ์ฆ์ ์ ์ฉ โ
- CloudFront ์ฝ์์์
์ค์ > ํธ์ง > ์ธ์ฆ์ ์ ์ฉ
์งํ
๐ ๋ฐฐํฌ ํ๊ฒฝ
๐ฉ๐ปโ๐ป ๊ฐ๋ฐ ํ๊ฒฝ
(4) ๊ฒฐ๊ณผ ํ์ธ โ
7๏ธโฃ CI/CD โ
๋ฐฐํฌ/๊ฐ๋ฐ ํ๊ฒฝ๋ณ ์ํฌํ๋ก์ฐ๋ฅผ ๋๋๋ค.
๐ deploy-dev.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 โ
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๏ธโฃ ๋ฐฐํฌ ๊ณผ์ ํ์ธ โ
# 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)
# ๊ธฐ๋ฅ ๋ธ๋์น ์์ฑ & ์๊ฒฉ ํธ์
git checkout -b feature/1
git push -u origin feature/1
๐ก PR๋ก ํฉ์น๊ธฐ
๋ก์ปฌ์์ dev๋ก ์ง์ mergeํ๋ ๋ฐฉ์์ ์ง์. PR์ ํตํด ๊ธฐ๋ก/๋ฆฌ๋ทฐ/CI๋ฅผ ๊ฑฐ์น๋ฉฐ ์๋ ๋ฐฐํฌ๊น์ง ์ฐ๋ํ๊ธฐ
2๏ธโฃ ์์ ํ๋ฆ โ
(1) ๊ธฐ๋ฅ ๊ฐ๋ฐ โ dev ๋ณํฉ โ
feature/1
์์ ์์ & ์ปค๋ฐGitHub์์
base: dev โ compare: feature/1
๋ก PR ์์ฑMerge
โ GitHub Actions๊ฐ dev ๋ธ๋์น push ์ด๋ฒคํธ ๊ฐ์ง โDev ํ๊ฒฝ ์๋ ๋ฐฐํฌ
(2) dev โ main ๋ณํฉ โ
๊ฐ๋ฐ ํ๊ฒฝ์์ ํ์ธ ํ
base: main โ compare: dev
๋ก PR ์์ฑMerge
โ GitHub Actions๊ฐ main ๋ธ๋์น push ์ด๋ฒคํธ ๊ฐ์ง โProd ํ๊ฒฝ ์๋ ๋ฐฐํฌ
3๏ธโฃ GitHub Actions ํธ๋ฆฌ๊ฑฐ ์์ฝ โ
- Deploy To Dev:
dev ๋ธ๋์น
push ์ ์คํ - Deploy To Prod:
main ๋ธ๋์น
push ์ ์คํ
#์ค์ฆ์ฝ๋ฉ์ค์ฟจ#์ด๊ฒฉ์ฐจ_ํ๋ก ํธ์๋_13๊ธฐ#๊ฐ๋ฐ๊ธฐ๋ก