시스템 아키텍처

CI/CD

Infra

Frontend : Cloud Front, S3

Backend : EC2, ECS, ECR

Common : Route53, Internet Gateway, ALB

CI/CD : Github Action

Frontend CI/CD

name: Deploy Vue Frontend to S3

on:
  push:
    branches: [develop]
  workflow_dispatch: 

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    env:
      VITE_API_URL: ${{ secrets.VUE_APP_API_BASE_URL }}
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'

      - name: Install dependencies
        working-directory: homs-fe
        run: npm ci

      - name: Build production bundle
        working-directory: homs-fe
        run: npm run build-only

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_KEY }}
          aws-region: ap-northeast-2

      - name: Sync build folder to S3
        working-directory: homs-fe
        run: |
          aws s3 sync dist/ s3://be4after-homs-bucket/app/ --delete

      - name: Invalidate CloudFront cache
        run: |
          aws cloudfront create-invalidation \\
            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \\
            --paths "/*"

배포 프로세스

환경 변수 설정

NodeJS 환경 구축 및 패키지 의존성 설치

빌드

AWS 인증 및 S3 업로드

Clound Front 캐시 제거(최신 버전 적용)