[BONBON] CI/CD 파이프라인 설계, 구축, 시연 (FE)

나무나무·2025년 8월 7일

프로젝트 BonBon

목록 보기

7/10

AWS 사양

Front End : Route53, ACM, S3, CloudFront

Back End : S3, EC2, AutoScaling Group, CodeDeploy(Blue-Green)

Machin Learning : S3, EC2, CodeDeploy

시스템 아키텍처

프로젝트 전체의 시스템 아키텍처이다.
BackEnd, FrontEnd, Flask 각각을 따로따로 나눠서 설명할 예정이다.
draw.io를 이용해 그렸는데 생각보다 툴이 손에 잘 익지 않았다. 다이어그램 그릴 때 좀 더 써버릇 해봐야겠다.

FrontEnd CI/CD

배포 프로세스

1️⃣ GitHub에 코드 commit & push(main 브랜치) → GitHub Actions CI 실행
2️⃣ 빌드된 .dist 파일을 .zip 압축 후 S3 버킷에 업로드
3️⃣ S3 버킷 파일 업로드 및 CloudFront 캐시 무효화로 최신 버전 반영

GitHub Actions CI/CD 구축

.github/workflows/ci-cd.yaml 파일 생성

🗂️ 디렉토리 구조
├─.github
│ ├─ workflows/
│ │ └─ ci-cd.yaml/

위와 같은 구조로 ci-cd.yaml 파일을 생성한 뒤 아래와 같이 스크립트를 적는다.
github 폴더명 앞에 . 찍어야 해.. 안찍어서 에러 떴어..

스크립트 흐름

깃허브 리포지토리 접근
node_modules 캐싱
AWS 자격증명 구성 및 AWS CLI 설치
프로젝트 관련 종속성을 설치할 노드 설치
종속성 설치(node_modules)
Vite 빌드 -> bonbonCafe-page/dist에 정적 파일 생성
AWS CLI 를 사용하여 S3 에 배포 파일을 업로드
캐시 무효화

name: BonBon Front-end CI&CD   # workflow 이름
on: 
    push:
        branches: 
          - main    # main 브랜치에 push 발생 시 실행
jobs:
    build-and-deploy:
        name: Build And Deploy    # Job 정의
        runs-on: ubuntu-latest    # 깃허브 액션을 실행할 운영체제(기본 우분투)
        env: # 환경변수 설정
            BUCKET: bonbon-front-end-bucket    # 버켓이름
            DIST: bonbonCafe-page/dist/    # 빌드 파일 이름
            REGION: ap-northeast-2    # S3 배포 지역이름
            CLOUDFRONT_ID: E255E3VZI3VDE5     # Cloud Front 배포 파일의 식별자 
            
        # 작업 순서
        steps: 

        # 1. 단계 | 깃허브 리포지토리 접근 -> CI 서버로 가져옴
        - name: Checkout Repository # 작업 이름
          uses: actions/checkout@v4 # 워크 플로 작업을 위한 저장소 액세스를 위한 도구

        # 2. 단계 | node_modules 캐싱
        - name: Cache node modules
          uses: actions/cache@v3
          with:
            path: node_modules
            key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
            restore-keys: |
              ${{ runner.OS }}-build-
              ${{ runner.OS }}-

        # 3. 단계 | AWS 자격증명 구성 및 AWS CLI 설치
        - name: Configure AWS Credentials
          uses: aws-actions/configure-aws-credentials@v4
          with:
            aws-access-key-id: ${{secrets.AWS_ACCESS_KEY_ID}} 
            aws-secret-access-key: ${{secrets.AWS_SECRET_KEY_ID}}
            aws-region: ${{env.REGION}}
        
        #.4. 단계 | 프로젝트 관련 종속성을 설치할 노드 설치
        - name: Set up Node.js
          uses: actions/setup-node@v4
          with:
           node-version: '20'
        
        # 5. 단계 | 종속성 설치(node_modules)
        - name: Install Dependencies
          run: |
              cd bonbonCafe-page
              npm ci

        # 5.5 .env 파일 추가 -> KakaoMap 키를 환경 변수로 주입
        - name: Create .env file
          run: |
              echo "VITE_KAKAO_MAP_KEY=${{ secrets.VITE_KAKAO_MAP_KEY }}" > bonbonCafe-page/.env

        # 6. 단계 | Vite 빌드 -> bonbonCafe-page/dist에 정적 파일 생성
        - name: Build 
          run: |
              cd bonbonCafe-page
              npm run build

        # 7. 단계 | AWS CLI 를 사용하여 S3 에 배포 파일을 업로드
        - name : Sync files to S3
          run: |
            aws s3 sync ${{env.DIST}} s3://${{env.BUCKET}}

        # 8. 단계 | 캐시 무효화
        - name : Clear Cash
          run: |
            aws cloudfront create-invalidation \
              --distribution-id ${{ env.CLOUDFRONT_ID}} \
              --paths "/*"