AWS S3 + CloudFront + Route53 완전한 프로덕션 환경 배포 가이드

첫 번째 부분: 사전 준비

준비 체크리스트

  • AWS 계정 (활성화된 결제 방식)
  • 자신의 도메인 (예: example.com)
  • 웹사이트 파일 준비 완료 (HTML/CSS/JS)
  • 브라우저에서 AWS 콘솔 열기 (console.aws.amazon.com)

주요 개념 이해

  • S3 버킷: 웹사이트 파일을 저장하는 컨테이너
  • CloudFront: 글로벌 CDN, 콘텐츠 배포 가속화
  • Route53: DNS 해석 서비스, 도메인 연결
  • ACM: 무료 SSL/TLS 인증서 서비스
  • OAC: Origin Access Control, CloudFront만 S3에 액세스할 수 있도록 보장

💾두 번째 부분: S3 버킷 생성 및 구성

1S3 버킷 생성

경로: AWS 콘솔 홈 → S3 → 버킷 → 버킷 생성

상세 단계

  1. AWS 콘솔에 로그인
  2. 상단 검색 상자에 S3 입력 → S3 서비스 클릭
  3. 왼쪽 사이드바에서 "버킷" 클릭
  4. "버킷 생성" 버튼 클릭 (파란색)

양식 작성

┌─ 버킷 이름 │ 입력: example-com-website │ ✓ 전역적으로 고유 │ ✓ 소문자, 숫자, 하이픈만 사용 │ ✓ "xn--"로 시작할 수 없음 │ ├─ 리전 │ 선택: us-east-1 (또는 가장 가까운 리전) │ 💡 CloudFront 비용을 줄이기 위해 us-east-1 사용 권장 │ ├─ 객체 소유권 │ 선택: ACL 비활성화됨 │ ├─ 퍼블릭 액세스 차단 설정 │ ✓ 모두 선택 유지 (나중에 CloudFront를 통해 액세스 제어) │ ├─ 버전 관리 │ ○ 비활성화 (선택 사항, 비용 절감을 위해 비활성화 권장) │ ├─ 서버 측 암호화 │ ○ Amazon S3 관리형 키 사용 (SSE-S3) │ └─ 생성 버튼 "버킷 생성" 클릭
✅ 성공 표시: 버킷 목록에 새 버킷 표시, 상태 표시 ✓

2정적 웹사이트 호스팅 활성화

경로: S3 버킷 → 속성 → 정적 웹사이트 호스팅 편집

상세 단계

  1. 방금 생성한 버킷 이름 클릭 (example-com-website)
  2. "속성" 탭 클릭 (오른쪽에서 다섯 번째)
  3. "정적 웹사이트 호스팅" 영역을 찾을 때까지 아래로 스크롤
  4. "편집" 버튼 클릭

구성 항목

┌─ 정적 웹사이트 호스팅 │ ○ 활성화 ← 이 항목을 선택해야 함 │ ├─ 호스팅 유형 │ ○ 웹사이트 호스팅 ← 이 항목 선택 (요청 리디렉션 선택 안 함) │ ├─ 인덱스 문서 │ 입력: index.html │ 설명: 사용자가 /에 액세스할 때 반환되는 파일 │ ├─ 오류 문서 │ 입력: error.html │ 설명: 404/403 오류가 반환될 때 반환되는 파일 │ └─ 변경 사항 저장 → "저장" 버튼 클릭
✅ 검증 성공:
  • 페이지에 "✓ 업데이트 완료" 표시
  • "정적 웹사이트 호스팅" 아래에 "활성화됨" 표시
  • 웹사이트 엔드포인트 URL이 표시됨

3웹사이트 파일 업로드

경로: S3 버킷 → 객체 → 업로드

파일 구조 예

my-website/ ├── index.html ← 필수 ├── error.html ← 필수 ├── css/ │ └── style.css ├── js/ │ └── app.js ├── images/ │ └── logo.png └── about.html

업로드 방법

방법 A: 드래그 업로드
웹사이트 폴더를 업로드 영역으로 드래그, 하위 폴더의 재귀적 업로드 지원

방법 B: 클릭 선택
"파일 추가" 또는 "폴더 추가"를 클릭하여 파일을 하나씩 선택
✅ 업로드 확인:
  • 업로드 진행률이 100%에 도달하는 것을 확인
  • 버킷으로 돌아온 후 모든 파일 목록이 표시됨

🔐세 번째 부분: Origin Access Control (OAC) 생성

4OAC 생성

경로: CloudFront → 보안 → Origin Access

상세 단계

  1. 상단 검색 상자에 CloudFront 입력 → CloudFront 서비스 진입
  2. 왼쪽 사이드바에서 "보안" 메뉴 확장
  3. "Origin Access" 클릭
  4. "Origin Access Control 생성" 버튼 클릭

양식 작성

┌─ Origin Access Control 이름 │ 입력: s3-website-oac │ 설명: 식별하기 쉽게, 자신의 정의 가능 │ ├─ 출처 유형 │ ✓ S3 ← S3을 선택해야 함 │ ├─ 설명 (선택 사항) │ 입력: example.com의 정적 웹사이트용 │ └─ 생성 버튼 "생성" 클릭
✅ 성공 표시:
  • 새로 생성된 OAC가 표시됨
  • 표시된 OAC ID 복사 (예: E127EXAMPLE51Z)
⚠️ 중요 알림: OAC ID를 기억하세요, 나중에 구성할 때 필요함

네 번째 부분: CloudFront 배포 생성

5CloudFront 배포 생성

경로: CloudFront → 배포 → 배포 생성

출처 구성 - Origin 섹션

┌─ Origin 도메인 │ 입력 상자를 클릭 → 드롭다운 S3 버킷 선택 │ 표시: example-com-website.s3.us-east-1.amazonaws.com │ ⚠️ s3-website 엔드포인트를 선택하지 마세요, 표준 S3 URL 선택 │ ├─ Origin 액세스 │ ○ Origin Access Control 설정 ← 이 항목 선택 │ ├─ 출처 액세스 제어 │ 드롭다운을 클릭 → 이전에 생성한 "s3-website-oac" 선택 │ └─ S3가 출처일 때의 프로토콜 ○ HTTPS만 ← 선택 권장 (더 안전함)

기본 캐싱 행동 구성

┌─ 뷰어 프로토콜 정책 │ ○ HTTP를 HTTPS로 리디렉션 ← 이 항목 선택 │ 설명: HTTP를 HTTPS로 자동 리디렉션 │ ├─ 허용되는 HTTP 메서드 │ ✓ GET, HEAD (기본값 유지) │ ├─ 캐싱 정책 및 출처 요청 정책 │ 캐싱 정책: 드롭다운을 클릭 → "CachingOptimized" 선택 │ 출처 요청 정책: 드롭다운을 클릭 → "S3Origin" 선택 │ └─ 객체 압축 ✓ 활성화 ← 데이터 비용 절감 가능

배포 구성

┌─ 이 배포 활성화 │ ✓ 반드시 확인 │ ├─ 대체 도메인 이름 (CNAME) │ ⚠️ 현재 작성하지 않음, 나중에 구성 │ ├─ 기본 루트 객체 │ 입력: index.html │ 설명: / 액세스 시 이 파일을 반환 │ ├─ IPv6 │ ✓ 활성화 (이미 기본값) │ └─ 배포 생성 "배포 생성" 버튼 클릭
⏳ 대기: 배포 배포에 5-10분이 필요하며, 상태가 "진행 중"에서 "배포됨"으로 변경

6CloudFront 도메인 이름 복사

경로: CloudFront → 배포 → 배포 세부 정보

  1. 배포 생성이 완료된 후 배포 ID를 클릭
  2. "배포 세부 정보" 탭에서 다음 정보 확인
  3. 배포 도메인 이름 복사 (d111111abcd.cloudfront.net)
배포 도메인 이름: d111111abcd.cloudfront.net ↑ 이 항목 복사 (나중에 사용) 배포 ID: E1234ABCD

7S3 버킷 정책 적용

경로: S3 → 버킷 → 권한 → 버킷 정책

작업 단계

  1. S3 서비스로 돌아가기
  2. 웹사이트 버킷 선택 (example-com-website)
  3. "권한" 탭 클릭
  4. "버킷 정책"을 찾을 때까지 아래로 스크롤, "편집" 클릭
  5. 다음 JSON을 편집 상자에 붙여넣기

버킷 정책 JSON (수정 필요)

{ "Version": "2012-10-17", "Statement": [ { "Sid": "AllowCloudFrontOAC", "Effect": "Allow", "Principal": { "Service": "cloudfront.amazonaws.com" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::example-com-website/*", "Condition": { "StringEquals": { "AWS:SourceArn": "arn:aws:cloudfront::123456789012:distribution/E1234ABCD" } } } ] }
⚠️ 수정해야 하는 세 항목:
  • example-com-website → 버킷 이름으로 바꾸기
  • 123456789012 → AWS 계정 ID로 바꾸기
  • E1234ABCD → CloudFront 배포 ID로 바꾸기
✅ 완료: "변경 사항 저장" 클릭

🔒다섯 번째 부분: ACM 인증서 신청

8SSL/TLS 인증서 신청

경로: ACM (AWS Certificate Manager) → 인증서 → 인증서 신청

중요 알림

⚠️ 리전이 매우 중요함: US East (N. Virginia)로 리전 설정 확인, CloudFront는 이 리전의 인증서만 지원

상세 단계

  1. 상단 검색 상자에 Certificate Manager 입력 → ACM 서비스 진입
  2. US East (N. Virginia)로 리전 확인
  3. "인증서 신청" 버튼 클릭

양식 작성

┌─ 인증서 유형 │ ○ 공개 인증서 ← 이 항목을 선택해야 함 │ ├─ 도메인 추가 │ "도메인 추가"를 클릭 → 입력: example.com │ 다시 클릭 → 입력: *.example.com │ │ 최종 표시: │ ✓ example.com │ ✓ *.example.com │ ├─ 검증 방법 │ ○ DNS 검증 ← 이 항목 선택 (이메일보다 빠름) │ ├─ 키 알고리즘 │ ○ RSA 2048 (기본값 유지) │ ├─ 태그 (선택 사항) │ 입력: website-cert │ └─ 신청 버튼 "신청" 클릭

이후 DNS 검증

신청 후 페이지에서 도메인 검증 수행 요청:

단계:
  1. "도메인 검증" 영역에서 검증 기록이 표시됨
  2. "Route53 기록 생성" 버튼 클릭
  3. AWS가 자동으로 Route53에 CNAME 기록 추가
  4. 5-30분 대기, 상태가 "발급됨"으로 변경
✅ 완료: 인증서 상태가 "발급됨"으로 변경

🌐여섯 번째 부분: Route53 DNS 구성

9Route53 호스팅 영역 생성

경로: Route53 → 호스팅 영역 → 호스팅 영역 생성

상세 단계

  1. 상단 검색 상자에 Route53 입력 → Route53 서비스 진입
  2. 왼쪽 사이드바에서 "호스팅 영역" 클릭
  3. "호스팅 영역 생성" 버튼 클릭

양식 작성

┌─ 도메인 이름 │ 입력: example.com │ ⚠️ www 또는 http:// 포함 없음 │ ├─ 설명 (선택 사항) │ 입력: 웹사이트 호스팅 │ ├─ 유형 │ ○ 공개 호스팅 영역 ← 이 항목 선택 │ └─ 호스팅 영역 생성 "호스팅 영역 생성" 버튼 클릭

중요 정보 기록

호스팅 영역 ID: Z1234567890ABC ↑ 이 항목을 기억해 두세요 이름 서버 (NS 기록): ns-1111.awsdns-22.com ns-2222.awsdns-33.co.uk ns-3333.awsdns-44.org ns-4444.awsdns-55.net ↑ 이 4개의 NS 기록 복사

10도메인 등록자 DNS 설정 업데이트

도메인 등록자에서 작업 (예: GoDaddy, Namecheap, Aliyun 등)

단계

  1. 도메인 등록자 계정에 로그인
  2. "DNS 관리" 또는 "도메인 관리" 찾기
  3. Name Servers (NS 기록)를 위에서 복사한 4개로 수정
  4. 변경 사항 저장
⏳ DNS 전파: 1-48시간이 걸릴 수 있으며, 다음 명령을 통해 확인할 수 있습니다:
nslookup example.com # AWS NS 기록이 표시되어야 함

11Route53에서 별칭 레코드 생성

경로: Route53 → 호스팅 영역 → 기록 생성

첫 번째 레코드 생성 (루트 도메인)

┌─ 기록 이름 │ 비워두기 (example.com 루트 도메인 나타냄) │ ├─ 기록 유형 │ 드롭다운을 클릭 → "A" 선택 │ ├─ 별칭 │ ✓ 별칭 활성화 ← 반드시 확인 │ ├─ 트래픽 정책 선택 │ ○ 간단한 라우팅 ← 기본값 유지 │ ├─ 트래픽을 라우팅 │ 드롭다운을 클릭 → "CloudFront 배포" 선택 │ ├─ 배포 선택 │ 드롭다운을 클릭 → 배포 선택 (d111111abcd.cloudfront.net) │ ├─ 대상 상태 평가 │ ○ 아니오 (기본값 유지) │ └─ 기록 생성 "기록 생성" 클릭

두 번째 레코드 생성 (www 하위 도메인)

위의 단계를 반복하되, "기록 이름"www로 변경하고 나머지 구성은 동일합니다.

✅ 완료: 두 기록 모두 동일한 CloudFront 배포를 가리켜야 함

12CloudFront CNAME 및 인증서 구성

경로: CloudFront → 배포 → 편집

단계

  1. CloudFront 서비스로 돌아가기
  2. 배포 선택 (배포 ID 클릭)
  3. "편집" 버튼 클릭
  4. "대체 도메인 이름 (CNAME)" 필드 찾기
  5. 입력 상자를 클릭하여 두 개의 도메인 추가
대체 도메인 이름 입력 상자에 추가: example.com www.example.com

SSL 인증서 선택

"사용자 정의 SSL 인증서" 또는 "SSL 인증서"를 찾을 때까지 아래로 스크롤 ┌─ SSL 인증서 │ ✓ 사용자 정의 SSL 인증서 │ ├─ 인증서 선택 │ 드롭다운을 클릭 → 이전에 신청한 인증서 선택 │ 표시: example.com (및 *.example.com) │ └─ 저장 "변경 사항 저장" 클릭
⏳ 배포 대기: 배포 상태가 "진행 중"에서 "배포됨"으로 변경 (보통 5-10분)

⚙️일곱 번째 부분: 캐싱 정책 구성

13다양한 파일 유형에 대한 캐싱 설정

경로: CloudFront → 배포 → 행동 → 편집

이 단계는 비용과 성능을 최적화하는 데 사용됩니다. 다양한 유형의 파일에 대해 다양한 캐싱 시간을 설정합니다.

기본 행동 설정

1. CloudFront 배포 편집 페이지로 돌아가기 2. "행동" 탭 클릭 3. 기본 행동 선택 → "편집" 클릭 ┌─ 캐싱 키 및 출처 요청 │ 캐싱 정책: CachingOptimized (설정됨) │ ├─ 뷰어 캐싱 제어 요청 헤더 │ ✓ 원본 Cache-Control 헤더 사용 │ └─ 저장 "저장" 클릭

선택 사항: HTML에 대한 별도의 행동 생성

더 세밀한 제어가 필요한 경우, 다양한 파일 유형에 대한 다양한 행동 규칙을 생성할 수 있습니다:

HTML 파일 행동:
경로 패턴: *.html 캐싱 정책: 캐싱 비활성화 (캐싱 안 함, 매번 최신 가져오기) 출처 요청 정책: S3Origin
JavaScript 파일 행동:
경로 패턴: *.js 캐싱 정책: CachingOptimized 압축: 활성화

✔️여덟 번째 부분: 테스트 및 검증

14웹사이트 액세스 테스트

테스트 URL

브라우저에서 액세스: https://example.com https://www.example.com https://d111111abcd.cloudfront.net (CloudFront 직접 URL)

성공 표시

  • ✅ 페이지가 정상적으로 로드됨
  • ✅ HTTPS 유효 (주소 표시줄에 잠금 아이콘 표시)
  • ✅ 인증서 정보 올바름 (잠금 아이콘을 클릭하여 확인)

문제 해결 표

문제 원인 해결책
AWS S3 오류 페이지 표시 S3 버킷 정책이 올바르게 구성되지 않음 버킷 정책의 배포 ID 확인
"Access Denied" 메시지 OAC가 올바르게 적용되지 않음 S3 버킷 정책에 OAC가 있는지 확인
사용자 정의 도메인이 작동하지 않음 Route53 DNS가 적용되지 않음 DNS 전파 대기 (최대 48시간)
잘못된 SSL 인증서 ACM 인증서가 CloudFront에 배포되지 않음 CloudFront에서 올바른 인증서 선택
액세스 속도 느림 캐싱이 적용되지 않음 Cache-Control 헤더 설정 확인

🚀아홉 번째 부분: 성능 최적화

15캐싱 헤더 최적화 구성

S3에서 파일에 적절한 Cache-Control 헤더를 설정하면 비용을 크게 절감하고 성능을 높일 수 있습니다.

방법 A: AWS 콘솔을 통해

  1. S3 → 버킷 → 객체
  2. 파일 선택 → "객체 작업""메타데이터 편집"
  3. 사용자 정의 메타데이터 추가 (키: Cache-Control)

캐싱 시간 권장

파일 유형 Cache-Control 값 설명
HTML 파일 public, max-age=300, must-revalidate 5분, 반드시 다시 검증
CSS/JS/이미지 public, max-age=31536000, immutable 1년, 파일 이름 버전 관리 필요
API 응답 public, max-age=0 캐싱 없음, 매번 최신 가져오기

방법 B: AWS CLI를 통해

# HTML 캐싱 업로드 및 설정 aws s3 cp index.html s3://example-com-website/index.html \ --metadata "Cache-Control=public, max-age=300" # JS/CSS 장기 캐싱 업로드 및 설정 aws s3 cp app.a1b2c3d4.js s3://example-com-website/ \ --metadata "Cache-Control=public, max-age=31536000, immutable"

16Gzip 압축 활성화

CloudFront에서 자동 압축을 활성화하면 60-70%의 트래픽을 줄일 수 있습니다.

단계

  1. CloudFront → 배포 → 편집
  2. "기본 캐싱 행동" 찾기
  3. "압축 활성화" ✓ 확인
💰 비용 절감: 압축을 활성화한 후 텍스트 파일 (HTML, CSS, JS)의 전송량을 60-70% 줄일 수 있습니다

📊열 번째 부분: 모니터링 및 비용 제어

17모니터링 알림 설정

CloudFront 비용 모니터링

  1. CloudWatch 또는 비용 관리 진입
  2. 예산 알림 설정
예산 이름: Website Monthly Cost 예산 금액: $10 (예) 경고 임계값: 80%에 도달하면 알림

주요 성능 지표 모니터링

CloudFront 배포에서 다음 지표를 확인하세요:

  • 요청 수: 매일 총 요청 수
  • 데이터 전송 량: 아웃바운드 트래픽 크기
  • 캐시 적중률: 90% 이상이어야 함
  • 오류율: 0%에 가까워야 함

비용 추정 표 (월간)

서비스 비용 설명
S3 스토리지 $0.23 10GB × $0.023
S3 GET 요청 $0.04 1M ÷ 1000 × $0.0004
CloudFront 아웃바운드 무료 1TB 무료 할당량 (100GB 사용)
CloudFront 요청 무료 10M 무료 할당량 (1M 사용)
Route53 $0.50 호스팅 영역 월간 요금
ACM 인증서 무료 AWS 내부 사용 무료
합계 $0.77/월

자주 묻는 질문

Q1: 웹사이트 파일을 어떻게 업데이트하나요?

# 방법 1: AWS CLI 사용 aws s3 cp ./new-file.html s3://example-com-website/ aws s3 sync ./website-files/ s3://example-com-website/ --delete # 방법 2: AWS 콘솔 사용 # S3 → 버킷 → 업로드 → 파일 선택 → 업로드

Q2: CloudFront 캐시를 어떻게 지우나요?

  1. CloudFront → 배포 → 무효
  2. 무효 생성 → 경로 입력 /* → 생성
💡 팁: 이것은 모든 캐시 파일을 삭제합니다 (보통 5분 후 적용)

Q3: S3 + CloudFront의 데이터 전송 프로세스는 무엇입니까?

사용자 → CloudFront 엣지 노드 → S3 버킷 ↓ 캐시된 콘텐츠 반환 (빠름)

Q4: HTTPS 리디렉션을 어떻게 구현하나요?

CloudFront에서 이미 구성됨:

  • 뷰어 프로토콜 정책: HTTP를 HTTPS로 리디렉션

모든 HTTP 요청은 자동으로 HTTPS로 리디렉션됩니다.

요약 체크리스트

배포 완료 후 다음 항목을 확인하세요

  • S3 버킷이 생성되고 파일이 업로드됨
  • 정적 웹사이트 호스팅이 활성화됨 (index.html, error.html)
  • OAC가 생성됨
  • CloudFront 배포가 생성되고 배포됨
  • ACM 인증서가 신청되고 검증됨
  • Route53 호스팅 영역이 생성됨
  • 도메인 등록자 DNS가 Route53 NS로 업데이트됨
  • 별칭 레코드 (A 레코드)가 생성됨
  • CloudFront CNAME이 구성됨
  • CloudFront에 ACM 인증서가 적용됨
  • https://example.com에 정상 액세스 가능
  • 캐싱 정책이 최적화됨
  • 압축이 활성화됨
  • 비용 모니터링이 설정됨

향후 유지보수

일일 작업

  • CloudFront 캐시 적중률을 정기적으로 확인 (90% 이상이어야 함)
  • 월간 비용 모니터링
  • 웹사이트 콘텐츠를 업데이트할 때 aws s3 sync 명령 사용

정기 유지보수

  • ACM 인증서 만료 시간 확인 (자동 갱신)
  • Route53 DNS 구성이 올바른지 확인
  • 만료된 S3 객체 버전 정리 (버전 관리가 활성화된 경우)

성능 최적화

  • CloudFront의 실시간 로그를 사용한 캐시 적중률 분석
  • Cache-Control 헤더 구성을 정기적으로 조정
  • Lambda@Edge를 사용한 엣지 컴퓨팅 고려

🎉 배포 완료

이제 프로덕션 수준의 저비용 정적 웹사이트 호스팅 솔루션을 가지고 있습니다

📊 비용: 월 평균 $0.50 - $5
⚡ 성능: 전 세계 < 500ms 로드
🔒 보안: HTTPS + DDoS 보호
📈 확장성: 자동 트래픽 증가 처리