🌍 AWS CloudFront로 정적 웹사이트 배포하기

TL;DR

• CloudFront는 AWS의 글로벌 CDN 서비스
• S3에 올린 정적 파일(JS, CSS, HTML, 이미지 등)을 전 세계 사용자에게 빠르게 제공
• OAC(Origin Access Control) 를 사용해 보안 강화 (S3를 퍼블릭으로 열지 않음)
• Route 53을 통해 도메인과 연결 가능
• 최신 방식은 S3 + CloudFront + Route 53 조합이 정석

1. CloudFront란?

• CloudFront는 AWS에서 제공하는 CDN(Content Delivery Network) 서비스입니다.
• 사용자가 어디서 접속하든, 가장 가까운 엣지 로케이션(서버)에서 정적 파일을 제공해 성능을 높여줍니다.
• 단순 캐싱뿐 아니라 HTTPS(보안), WAF(보안 방화벽), 경로 기반 라우팅 기능도 함께 제공.

---

2. S3 버킷 준비

1. AWS 콘솔 → S3 > 버킷 생성
2. 버킷 이름은 유니크하게 설정 (예: myapp-bucket)
3. 퍼블릭 액세스 차단은 켜둠 (직접 퍼블릭 공개 X)
4. 빌드된 정적 파일(index.html, JS, CSS 등)을 업로드

---

3. CloudFront 배포 생성

1. CloudFront > 배포 생성

2. 원본(Origin) 설정

   • Origin Type: S3
   • Origin Access: OAC(Origin Access Control) → CloudFront만 S3에 접근 가능

3. 캐시 동작(Behavior) 설정

   • Viewer Protocol Policy: HTTP → HTTPS 리다이렉트
   • Allowed Methods: GET, HEAD (필요하면 POST 등 추가)
   • Cache Policy: 기본(CachingOptimized) 사용 가능

4. 배포 생성(Create distribution) 클릭

---

4. Route 53으로 도메인 연결

1. Route 53 > 호스팅 영역(Hosted Zone) 생성 (이미 도메인이 있다면 해당 도메인 선택)

2. 레코드 생성

   • 레코드 이름: www.myapp.com
   • 유형: A (Alias)
   • Alias 대상: CloudFront 배포 도메인 선택

3. 생성 완료 후, www.myapp.com 으로 접속하면 CloudFront 배포와 연결됨

---

5. S3 버킷 정책 설정

CloudFront가 S3 파일을 읽을 수 있도록 권한 부여가 필요합니다.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowCloudFrontAccess",
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::myapp-bucket/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::<account-id>:distribution/<distribution-id>"
        }
      }
    }
  ]
}

---

6. 정적 웹사이트 호스팅 옵션 (주의)

• 과거에는 S3 정적 웹사이트 호스팅 기능을 직접 켜서 index.html을 노출했음
• 하지만 현재는 CloudFront + OAC 조합이 보안과 확장성 측면에서 권장됨
• 즉, S3는 단순 파일 저장소 역할만 하고, 사용자 접근은 CloudFront를 통해서만 처리

---

7. 전체 흐름

1. 사용자가 https://www.myapp.com 접속
2. Route 53 → CloudFront 배포 연결
3. CloudFront가 가장 가까운 엣지 서버에서 캐시된 정적 파일 제공
4. 캐시가 없으면 원본(S3)에서 가져와 사용자에게 전달

User → Route 53 → CloudFront (CDN) → S3 (정적 파일)

---

마무리

• CloudFront는 단순 CDN을 넘어, 보안 + 성능 + 확장성을 동시에 제공하는 AWS의 핵심 서비스입니다.
• 프론트엔드 개발자는 배포된 빌드 결과물을 S3에 업로드하고,
  CloudFront와 연결만 해주면 전 세계 어디서든 빠른 속도로 애플리케이션을 제공할 수 있습니다.