개요

이번 게시글에서는 정적 자산(Static Assets)을 효율적으로 배포하기 위한 두 가지 핵심 전략인 AWS S3+CloudFront 조합과 Vercel을 활용한 배포에 대해 정리한다.

아직 작성중 글로 실습 화면 등 추가 예정

1. 전략 1: AWS S3 + CloudFront 배포

이 방식은 엔터프라이즈 환경에서 가장 선호되는 방식으로, 높은 보안성과 성능 최적화를 제공한다.

S3 및 CloudFront 워크플로우 뷰

[ GitHub Runner ]
       |
       +---(1) 빌드 단계: npm install && npm run build (dist/ 생성)
       |
       +---(2) 전송 단계: AWS S3 Sync (변경된 파일만 선별적 업로드)
       |
       +---(3) 최적화 단계: CloudFront Invalidation (엣지 캐시 강제 갱신)
       |
[ 유저 ] <--- (Fast Delivery) --- [ CloudFront Edge ] <--- [ S3 Origin ]

상세 워크플로우 스크립트 (frontend-deploy.yml)

name: Frontend Deployment (S3)
on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 코드 체크아웃
        uses: actions/checkout@v3

      - name: Node.js 설정
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: 의존성 설치 및 빌드
        run: |
          npm install
          npm run build
        env:
          VITE_API_URL: ${{ secrets.PROD_API_URL }}

      - name: AWS 자격 증명 설정
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-2

      - name: S3 동기화 (배포)
        run: |
          aws s3 sync ./dist s3://${{ secrets.S3_BUCKET_NAME }} --delete

      - name: CloudFront 캐시 무효화
        run: |
          aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DIST_ID }} --paths "/*"

성능 향상 분석

구분	S3 직접 접속	CloudFront 적용
부산 사용자	서울 S3 (RTT 20~50ms)	부산 엣지 (RTT 5ms 미만)
효과	-	최소 15배 ~ 최대 60배 속도 개선

2. 전략 2: Vercel을 이용한 초간단 배포

Vercel은 복잡한 인프라 설정(IAM, S3 등)을 생략하고 GitHub 연동만으로 모든 프로세스를 자동화한다.

Vercel 배포 흐름

1. 자동 인식: 프로젝트를 Import하면 Vue, React, Next.js 등 프레임워크를 자동 감지한다.
2. 커스텀 도메인 (Route53 연동):
   • Vercel Domains에서 www.yourdomain.com 추가.
   • AWS Route53에서 CNAME 레코드 생성 (값: cname.vercel-dns.com).

장점: HTTPS 자동 적용 및 별도의 GitHub Actions 작성 없이 Push만으로 배포가 완료된다.

마치며

프론트엔드 배포의 핵심은 빌드 환경 변수 주입과 CDN 캐시 관리이다