AWS cloudFront& S3 를 이용한 배포

한상우·2025년 4월 4일
post-thumbnail

프론트엔드 개발자를 위한 AWS S3 & CloudFront 배포 가이드

안녕하세요! 이번 포스팅에서는 AWS의 S3와 CloudFront를 활용하여 정적 웹사이트부터 React, Next.js 애플리케이션까지 다양한 프론트엔드 프로젝트를 배포하는 방법을 알아보겠습니다.

목차

  1. S3와 CloudFront 개념 이해하기
  2. S3 버킷 생성 및 정적 웹사이트 호스팅
  3. S3 접근을 위한 IAM 설정
  4. CloudFront 배포 설정
  5. 도메인 연결 및 HTTPS 적용
  6. React 애플리케이션 배포하기
  7. Next.js 애플리케이션 배포하기
  8. Docker를 활용한 프론트엔드 배포
  9. 배포 자동화하기 (CI/CD)
  10. 비용 나가지 않게 S3, CloudFront 종료하기

S3와 CloudFront 개념 이해하기

S3(Simple Storage Service)란?

S3는 AWS에서 제공하는 파일 저장 서비스입니다. 단순히 파일을 저장하는 것뿐만 아니라, 정적 웹사이트 호스팅 기능을 제공하여 HTML, CSS, JavaScript 파일을 호스팅할 수 있습니다. 이는 프론트엔드 개발자에게 매우 유용한 기능입니다.

CloudFront란?

CloudFront는, 한 마디로 정의하면 콘텐츠(파일, 동영상 등)를 빠르게 전송해주는 서비스입니다. 이는 CDN(Content Delivery Network)의 일종으로, 전 세계 여러 지역에 콘텐츠의 복사본을 저장해두고 사용자와 가장 가까운 위치에서 콘텐츠를 제공합니다.

왜 CloudFront를 사용해야 할까?

S3만으로도 웹사이트 호스팅이 가능하지만, CloudFront를 함께 사용하면 다음과 같은 이점이 있습니다:

  1. 성능 향상: 사용자와 가까운 위치에서 콘텐츠 제공
  2. HTTPS 지원: S3는 단독으로 HTTPS를 지원하지 않지만, CloudFront를 통해 가능
  3. 보안 강화: 추가 보안 레이어 제공

S3 버킷 생성 및 정적 웹사이트 호스팅

S3에서는 몇 가지 특별한 용어를 사용합니다:

  • 버킷(Bucket): S3에서의 저장소 단위, GitHub의 Repository와 유사한 개념
  • 객체(Object): S3 버킷에 업로드된 파일

1. S3 버킷 생성하기

  1. AWS 콘솔에서 S3 서비스로 이동
  2. '버킷 만들기' 버튼 클릭
  3. 버킷 이름 설정 (전 세계적으로 유일해야 함)
    • 예: my-frontend-website
  4. 리전 선택 (사용자와 가까운 리전 선택)
    • 한국 사용자라면 ap-northeast-2 (서울)
  5. 퍼블릭 액세스 차단 설정 해제
    • "모든 퍼블릭 액세스 차단" 체크 해제
    • 경고 확인 (웹 호스팅을 위해 필요)
  6. 나머지 설정은 기본값으로 두고 '버킷 만들기' 클릭

2. 버킷에 정책 추가하기

버킷에 파일을 업로드했다고 해서 바로 외부에서 접근할 수 있는 것은 아닙니다. 퍼블릭 액세스를 허용하는 정책을 추가해야 합니다.

  1. 생성한 버킷 선택 후 '권한' 탭 클릭
  2. '버킷 정책' 섹션에서 '편집' 클릭
  3. 다음 정책 추가 (버킷 이름 변경 필요)
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*"
        }
    ]
}
  1. '변경 사항 저장' 클릭

3. 정적 웹사이트 호스팅 설정

  1. 버킷 속성 탭으로 이동
  2. 맨 아래 '정적 웹 사이트 호스팅' 섹션에서 '편집' 클릭
  3. '정적 웹 사이트 호스팅 활성화' 선택
  4. 인덱스 문서: index.html 입력
  5. 오류 문서: error.html 또는 SPA의 경우 index.html 입력
  6. '변경 사항 저장' 클릭
  7. '정적 웹 사이트 호스팅' 섹션에서 엔드포인트 URL 확인

S3 접근을 위한 IAM 설정

프론트엔드 프로젝트를 자동으로 S3에 업로드하려면 프로그래밍 방식으로 S3에 접근할 수 있는 권한이 필요합니다. 이를 위해 IAM(Identity and Access Management)에서 액세스 키를 발급받아야 합니다.

1. IAM에서 사용자 생성하기

  1. AWS 콘솔에서 IAM 서비스로 이동
  2. 왼쪽 메뉴에서 '사용자' 선택 후 '사용자 추가' 클릭
  3. 사용자 이름 입력 (예: s3-upload-user)
  4. 액세스 유형: '프로그래밍 방식 액세스' 선택
  5. '다음: 권한' 클릭
  6. '기존 정책 직접 연결' 선택
  7. 검색창에 'S3' 입력하고 AmazonS3FullAccess 정책 선택
  8. '다음: 태그' → '다음: 검토' → '사용자 만들기' 클릭
  9. 생성된 액세스 키 ID와 비밀 액세스 키 저장 (이 화면을 벗어나면 비밀 키를 다시 볼 수 없음)

CloudFront 배포 설정

1. CloudFront 배포 생성하기

  1. AWS 콘솔에서 CloudFront 서비스로 이동
  2. '배포 생성' 클릭
  3. 원본 도메인: S3 정적 웹 사이트 엔드포인트 선택
    • 중요: S3 버킷 자체가 아닌, S3 정적 웹사이트 호스팅 엔드포인트를 선택해야 함
    • 예: your-bucket-name.s3-website.ap-northeast-2.amazonaws.com
  4. 원본 경로: 비워두기
  5. 원본 ID: 자동 생성 사용
  6. 뷰어 프로토콜 정책: 'HTTP를 HTTPS로 리디렉션' 선택
  7. 허용된 HTTP 메서드: 'GET, HEAD' 선택
  8. 캐시 정책: CachingOptimized 선택
  9. 기본 루트 객체: index.html 입력
  10. 대체 도메인 이름(CNAME): 아직 설정하지 않음
  11. 나머지 설정은 기본값으로 두고 '배포 생성' 클릭

CloudFront 배포가 생성되면 배포 도메인 이름(예: d1a2b3c4d5e6f7.cloudfront.net)이 제공됩니다. 이를 통해 웹사이트에 접근할 수 있습니다.

도메인 연결 및 HTTPS 적용

1. ACM에서 SSL/TLS 인증서 발급받기

CloudFront에 사용할 인증서는 반드시 미국 동부(버지니아 북부) 리전에서 발급받아야 합니다.

  1. AWS 콘솔에서 리전을 '미국 동부(버지니아 북부)'로 변경
  2. ACM(AWS Certificate Manager) 서비스로 이동
  3. '인증서 요청' 클릭
  4. '공인 인증서 요청' 선택 후 '다음' 클릭
  5. 도메인 이름 입력 (예: example.com)
    • 와일드카드 도메인도 추가 가능 (예: *.example.com)
  6. 검증 방법: 'DNS 검증' 선택
  7. '인증서 요청' 클릭
  8. 생성된 인증서 페이지에서 'Route 53에서 레코드 생성' 클릭 (도메인이 Route 53에 있는 경우)

2. CloudFront에 인증서 적용하기

  1. CloudFront 서비스로 이동
  2. 해당 배포 선택 후 '편집' 클릭
  3. '설정' 탭으로 이동
  4. '대체 도메인 이름(CNAME)'에 사용할 도메인 추가 (예: www.example.com)
  5. SSL 인증서: '사용자 정의 SSL 인증서'를 선택하고, 발급받은 ACM 인증서 선택
  6. 보안 정책: 기본값 사용
  7. '변경 사항 저장' 클릭

3. Route 53에서 도메인 연결하기

  1. Route 53 서비스로 이동
  2. 해당 호스팅 영역 선택
  3. '레코드 생성' 클릭
  4. 레코드 이름: 서브도메인 입력 또는 비워두기
  5. 레코드 유형: 'A - IPv4 주소' 선택
  6. '별칭' 활성화
  7. '트래픽 라우팅 대상' → 'CloudFront 배포로 별칭' 선택
  8. 배포 선택: 앞서 생성한 CloudFront 배포 선택
  9. '레코드 생성' 클릭

React 애플리케이션 배포하기

React 애플리케이션을 S3와 CloudFront에 배포하는 과정은 일반 정적 웹사이트와 유사하지만, 몇 가지 추가 설정이 필요합니다.

1. React 프로젝트 빌드하기

# 프로젝트 빌드
npm run build

# 결과물은 build 폴더에 생성됩니다

2. S3에 빌드 파일 업로드하기

  1. AWS 콘솔에서 S3 버킷으로 이동
  2. '업로드' 버튼 클릭
  3. build 폴더의 모든 파일을 선택하고 업로드
  4. 또는 AWS CLI를 사용하여 업로드:
aws s3 sync build/ s3://your-bucket-name

3. CloudFront 캐시 무효화

React 애플리케이션을 업데이트할 때마다 CloudFront 캐시를 무효화해야 변경 사항이 즉시 반영됩니다.

  1. CloudFront 서비스로 이동
  2. 해당 배포 선택
  3. '무효화' 탭 클릭
  4. '무효화 생성' 클릭
  5. 경로 입력: /* (모든 파일 무효화)
  6. '무효화 생성' 클릭

4. React Router 사용 시 추가 설정

React Router를 사용하는 SPA(Single Page Application)의 경우, S3 정적 웹사이트 호스팅에서 오류 문서를 index.html로 설정하고, CloudFront에서 사용자 지정 오류 응답을 구성해야 합니다.

  1. CloudFront 배포 선택 후 '오류 페이지' 탭 클릭
  2. '사용자 지정 오류 응답 생성' 클릭
  3. HTTP 오류 코드: 403 선택
  4. 응답 페이지 경로: /index.html
  5. HTTP 응답 코드: 200 선택
  6. '생성' 클릭
  7. 404 오류에 대해서도 동일한 과정 반복

Next.js 애플리케이션 배포하기

Next.js는 정적 생성(Static Generation)과 서버 사이드 렌더링(Server-Side Rendering)을 모두 지원합니다. 배포 방식은 어떤 기능을 사용하느냐에 따라 달라집니다.

정적 내보내기(Static Export)를 사용한 배포

Next.js를 완전한 정적 사이트로 내보내는 경우, S3와 CloudFront를 사용할 수 있습니다.

  1. next.config.js 파일에 정적 내보내기 설정 추가
module.exports = {
  output: 'export',
}
  1. 프로젝트 빌드 및 내보내기
npm run build
# 결과물은 out 폴더에 생성됩니다
  1. S3에 out 폴더 내용 업로드
aws s3 sync out/ s3://your-bucket-name
  1. CloudFront 캐시 무효화
aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"

서버 사이드 렌더링(SSR)을 사용하는 경우

Next.js의 SSR, API 라우트, 미들웨어 등의 기능을 사용하는 경우, S3와 CloudFront만으로는 배포할 수 없습니다. 이 경우 다음과 같은 대안이 있습니다:

  1. AWS Amplify: Next.js 애플리케이션을 쉽게 배포할 수 있는 AWS 서비스

    # Amplify CLI 설치
npm install -g @aws-amplify/cli

# Amplify 초기화
amplify init

# Amplify 호스팅 추가
amplify add hosting

# 배포
amplify publish

  2. Vercel: Next.js를 개발한 회사에서 제공하는 호스팅 서비스

    # Vercel CLI 설치
npm i -g vercel

# 배포
vercel

  3. EC2 + Nginx: AWS EC2 인스턴스에 직접 Next.js 서버 설치 및 Nginx로 프록시

Docker를 활용한 프론트엔드 배포

Docker를 사용하면 애플리케이션과 그 환경을 컨테이너화하여 어디서든 일관되게 실행할 수 있습니다. 프론트엔드 개발자로서 Docker를 활용하면 다음과 같은 장점이 있습니다:

  1. 개발 환경과 배포 환경의 일관성 보장
  2. 팀원 간 동일한 개발 환경 구성 용이
  3. 마이크로서비스 아키텍처에서의 유연한 배포
  4. CI/CD 파이프라인과의 원활한 통합

1. Docker 기본 설정

React 애플리케이션을 위한 Dockerfile 생성

프로젝트 루트 디렉토리에 Dockerfile을 생성합니다:

# 빌드 단계
FROM node:16-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 프로덕션 단계
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
# React Router를 위한 Nginx 설정
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Nginx 설정 파일 생성 (React Router 지원)

프로젝트 루트에 nginx 폴더를 만들고, 그 안에 nginx.conf 파일을 생성합니다:

server {
    listen 80;
    
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

Next.js 애플리케이션을 위한 Dockerfile

Next.js의 경우, SSR을 지원하므로 조금 다른 Dockerfile이 필요합니다:

# 기본 이미지
FROM node:16-alpine

# 작업 디렉토리 설정
WORKDIR /app

# 의존성 파일 복사 및 설치
COPY package*.json ./
RUN npm ci

# 소스 코드 복사
COPY . .

# 애플리케이션 빌드
RUN npm run build

# 포트 설정
EXPOSE 3000

# 시작 명령어
CMD ["npm", "start"]

2. Docker Compose 설정

여러 서비스를 함께 실행해야 하는 경우(예: 프론트엔드 + 백엔드 API), Docker Compose를 사용하면 편리합니다.

프로젝트 루트에 docker-compose.yml 파일을 생성합니다:

version: '3'

services:
  frontend:
    build: .
    ports:
      - "80:80"
    # 백엔드 API와 통신해야 하는 경우
    environment:
      - REACT_APP_API_URL=http://api:8080
    # volumes:
    #   - ./src:/app/src  # 개발 중 소스 코드 변경 실시간 반영 (개발 환경에서만 사용)
    
  # 백엔드 API가 있는 경우
  api:
    image: your-backend-image
    ports:
      - "8080:8080"

3. AWS ECR에 Docker 이미지 배포하기

Docker 이미지를 AWS ECR(Elastic Container Registry)에 저장하고 ECS(Elastic Container Service)나 EC2에서 실행할 수 있습니다.

ECR 리포지토리 생성

  1. AWS 콘솔에서 ECR 서비스로 이동
  2. '리포지토리 생성' 클릭
  3. 리포지토리 이름 입력 (예: frontend-app)
  4. '리포지토리 생성' 클릭

Docker 이미지 빌드 및 푸시

# AWS CLI를 사용하여 ECR에 로그인
aws ecr get-login-password --region ap-northeast-2 | docker login --username AWS --password-stdin YOUR_AWS_ACCOUNT_ID.dkr.ecr.ap-northeast-2.amazonaws.com

# Docker 이미지 빌드
docker build -t frontend-app .

# 이미지에 ECR 리포지토리 태그 추가
docker tag frontend-app:latest YOUR_AWS_ACCOUNT_ID.dkr.ecr.ap-northeast-2.amazonaws.com/frontend-app:latest

# ECR에 이미지 푸시
docker push YOUR_AWS_ACCOUNT_ID.dkr.ecr.ap-northeast-2.amazonaws.com/frontend-app:latest

4. AWS ECS로 Docker 컨테이너 배포하기

ECR에 푸시한 Docker 이미지를 ECS를 사용하여 배포할 수 있습니다.

ECS 클러스터 생성

  1. AWS 콘솔에서 ECS 서비스로 이동
  2. '클러스터 생성' 클릭
  3. 클러스터 유형 선택 (예: 'EC2 Linux + 네트워킹')
  4. 클러스터 이름 및 EC2 인스턴스 설정 구성
  5. '생성' 클릭

ECS 작업 정의 생성

  1. ECS 서비스의 '작업 정의' 메뉴로 이동
  2. '새 작업 정의 생성' 클릭
  3. 시작 유형 호환성 선택 (예: 'EC2')
  4. 작업 정의 이름 입력
  5. '컨테이너 추가' 클릭
    • 컨테이너 이름: frontend
    • 이미지: ECR 리포지토리 URL (예: YOUR_AWS_ACCOUNT_ID.dkr.ecr.ap-northeast-2.amazonaws.com/frontend-app:latest)
    • 메모리 제한: 적절한 값 설정 (예: 512MB)
    • 포트 매핑: 호스트 포트 80, 컨테이너 포트 80
  6. '생성' 클릭

ECS 서비스 생성

  1. ECS 클러스터로 이동
  2. '서비스 생성' 클릭
  3. 시작 유형: 'EC2'
  4. 작업 정의: 앞서 생성한 작업 정의 선택
  5. 서비스 이름 입력
  6. 작업 수: 원하는 작업 수 설정 (예: 1)
  7. 배포 유형: '롤링 업데이트' 선택
  8. '다음 단계' 클릭
  9. 로드 밸런서 구성 (선택 사항)
  10. '다음 단계' 클릭
  11. Auto Scaling 구성 (선택 사항)
  12. '다음 단계' 클릭
  13. 설정 검토 후 '서비스 생성' 클릭

5. AWS Fargate를 사용한 서버리스 컨테이너 배포

서버 관리 없이 컨테이너를 실행하려면 AWS Fargate를 사용할 수 있습니다.

Fargate 작업 정의 생성

  1. ECS 서비스의 '작업 정의' 메뉴로 이동
  2. '새 작업 정의 생성' 클릭
  3. 시작 유형 호환성: 'Fargate' 선택
  4. 작업 정의 이름 입력
  5. 작업 크기 선택 (CPU 및 메모리)
  6. '컨테이너 추가' 클릭
    • 컨테이너 이름: frontend
    • 이미지: ECR 리포지토리 URL
    • 포트 매핑: 컨테이너 포트 80
  7. '생성' 클릭

Fargate 서비스 생성

  1. ECS 클러스터로 이동
  2. '서비스 생성' 클릭
  3. 시작 유형: 'Fargate'
  4. 작업 정의: 앞서 생성한 Fargate 작업 정의 선택
  5. 서비스 이름 입력
  6. 작업 수: 원하는 작업 수 설정
  7. '다음 단계' 클릭
  8. VPC 및 서브넷 구성
  9. 보안 그룹 설정 (인바운드 규칙에 HTTP 80 포트 추가)
  10. 로드 밸런서 구성 (애플리케이션 로드 밸런서 권장)
  11. '다음 단계' 클릭
  12. Auto Scaling 구성 (선택 사항)
  13. '다음 단계' 클릭
  14. 설정 검토 후 '서비스 생성' 클릭

6. Docker와 Route 53, CloudFront 통합

Fargate나 ECS에 배포한 Docker 컨테이너 앞에 CloudFront를 두고 Route 53으로 도메인을 연결할 수 있습니다.

  1. Application Load Balancer 생성

    • VPC, 서브넷, 보안 그룹 구성
    • 대상 그룹으로 ECS 서비스 지정

  2. CloudFront 배포 생성

    • 원본 도메인: ALB 도메인 이름
    • 프로토콜 정책: 'HTTP를 HTTPS로 리디렉션'
    • SSL 인증서: ACM에서 발급받은 인증서 사용

  3. Route 53에서 도메인 연결

    • A 레코드 생성
    • 별칭: CloudFront 배포 선택

배포 자동화하기 (CI/CD)

프론트엔드 배포를 자동화하면 개발 효율성이 크게 향상됩니다. GitHub Actions를 사용하여 S3, CloudFront 또는 Docker 배포를 자동화해 보겠습니다.

GitHub Actions로 S3/CloudFront 배포 자동화

  1. 프로젝트에 .github/workflows/deploy-s3.yml 파일 생성
name: Deploy to S3 and CloudFront

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Build
        run: npm run build
        
      - name: Deploy to S3
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --follow-symlinks --delete
        env:
          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: 'ap-northeast-2'
          SOURCE_DIR: 'build'  # React는 'build', Next.js는 'out'
          
      - name: Invalidate CloudFront
        uses: chetan/invalidate-cloudfront-action@master
        env:
          DISTRIBUTION: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }}
          PATHS: '/*'
          AWS_REGION: 'us-east-1'
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

GitHub Actions로 Docker 배포 자동화

  1. 프로젝트에 .github/workflows/deploy-docker.yml 파일 생성
name: Deploy Docker to AWS

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        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: Login to Amazon ECR
        id: login-ecr
        uses: aws-actions/amazon-ecr-login@v1
      
      - name: Build, tag, and push image to Amazon ECR
        env:
          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
          ECR_REPOSITORY: frontend-app
          IMAGE_TAG: ${{ github.sha }}
        run: |
          docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .
          docker tag $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG $ECR_REGISTRY/$ECR_REPOSITORY:latest
          docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
          docker push $ECR_REGISTRY/$ECR_REPOSITORY:latest
      
      - name: Fill in the new image ID in the Amazon ECS task definition
        id: task-def
        uses: aws-actions/amazon-ecs-render-task-definition@v1
        with:
          task-definition: task-definition.json
          container-name: frontend
          image: ${{ steps.login-ecr.outputs.registry }}/frontend-app:${{ github.sha }}
      
      - name: Deploy Amazon ECS task definition
        uses: aws-actions/amazon-ecs-deploy-task-definition@v1
        with:
          task-definition: ${{ steps.task-def.outputs.task-definition }}
          service: frontend-service
          cluster: frontend-cluster
          wait-for-service-stability: true
  1. task-definition.json 파일 생성 (ECS 작업 정의)
{
  "family": "frontend-task",
  "executionRoleArn": "arn:aws:iam::YOUR_ACCOUNT_ID:role/ecsTaskExecutionRole",
  "networkMode": "awsvpc",
  "containerDefinitions": [
    {
      "name": "frontend",
      "image": "YOUR_ACCOUNT_ID.dkr.ecr.ap-northeast-2.amazonaws.com/frontend-app:latest",
      "essential": true,
      "portMappings": [
        {
          "containerPort": 80,
          "hostPort": 80,
          "protocol": "tcp"
        }
      ],
      "logConfiguration": {
        "logDriver": "awslogs",
        "options": {
          "awslogs-group": "/ecs/frontend-task",
          "awslogs-region": "ap-northeast-2",
          "awslogs-stream-prefix": "ecs"
        }
      }
    }
  ],
  "requiresCompatibilities": [
    "FARGATE"
  ],
  "cpu": "256",
  "memory": "512"
}
  1. GitHub 저장소에 Secrets 추가
    • Settings > Secrets > Actions > New repository secret
    • 필요한 Secrets
      • AWS_S3_BUCKET: S3 버킷 이름
      • AWS_ACCESS_KEY_ID: IAM 액세스 키 ID
      • AWS_SECRET_ACCESS_KEY: IAM 비밀 액세스 키
      • CLOUDFRONT_DISTRIBUTION_ID: CloudFront 배포 ID

비용 나가지 않게 S3, CloudFront 종료하기

프로젝트가 끝나면 불필요한 비용이 발생하지 않도록 리소스를 정리해야 합니다.

1. S3 버킷 정리하기

  1. 버킷 비우기: 모든 객체를 삭제해야 버킷을 삭제할 수 있습니다.

    • S3 콘솔에서 버킷 선택
    • '객체' 탭에서 모든 객체 선택
    • '삭제' 클릭
    • 삭제 확인

  2. 버킷 삭제하기

    • S3 콘솔에서 버킷 선택
    • '삭제' 버튼 클릭
    • 버킷 이름을 입력하여 삭제 확인

2. CloudFront 배포 정리하기

  1. CloudFront 배포 비활성화

    • CloudFront 콘솔에서 배포 선택
    • '비활성화' 버튼 클릭
    • 비활성화 확인

  2. CloudFront 배포 삭제하기

    • 배포가 비활성화된 후(상태가 'Deployed'에서 'Disabled'로 변경)
    • '삭제' 버튼 클릭
    • 삭제 확인

3. ACM 인증서 삭제하기

CloudFront에서 사용 중인 인증서는 삭제할 수 없으므로, CloudFront 배포를 먼저 삭제해야 합니다.

  1. ACM 콘솔로 이동
  2. 삭제할 인증서 선택
  3. '삭제' 버튼 클릭
  4. 삭제 확인

마무리

이 글에서는 프론트엔드 프로젝트를 배포하는 다양한 방법을 알아보았습니다

  1. S3와 CloudFront를 사용한 정적 웹사이트 배포

    • 비용 효율적이고 확장성이 뛰어난 솔루션
    • SPA(Single Page Application)에 적합

  2. Docker를 활용한 컨테이너화 배포

    • 일관된 환경 제공
    • 마이크로서비스 아키텍처에 적합
    • AWS ECS, Fargate 등을 통한 운영

  3. CI/CD 파이프라인 구축

    • GitHub Actions를 통한 자동화
    • S3/CloudFront 배포 자동화
    • Docker 이미지 빌드 및 ECR/ECS 배포 자동화

각 배포 방식은 장단점이 있으며, 프로젝트의 특성과 요구사항에 따라 적절한 방법을 선택해야 합니다

  • 정적 사이트/SPA: S3 + CloudFront
  • SSR이 필요한 프로젝트: Docker + ECS/Fargate
  • 복잡한 마이크로서비스: Docker + Kubernetes/EKS
profile
한상우
안녕하세요
이전 포스트

EC2에 express 배포하기

다음 포스트

리액트 서버컴포넌트

0개의 댓글