카테고리 없음

🌐 AWS S3 + CloudFront + Route 53을 활용한 정적 웹사이트 배포 & 보안 설정

bokueyo 2025. 5. 31. 10:04

안녕하세요! 이번 포스팅에서는 정적 웹사이트를 AWS 환경에서 안전하고 깔끔하게 배포하는 전체 과정을 정리해보았습니다.

React 프로젝트를 S3에 올리고, CloudFront CDN을 붙이고, 도메인 연결 + HTTPS 설정 + 보안까지 한 번에 다뤄볼게요.

🧱 아키텍처 구성도

[ 사용자 ]
     │
     ▼
[ CloudFront (CDN) ]  ← HTTPS + 도메인 연결
     │
     ▼
[ S3 (정적 파일 저장소) ] ← 비공개 접근 + CloudFront만 접근 가능

1️⃣ S3 버킷 생성 및 정적 웹 호스팅 설정

  1. S3 콘솔 접속 → 버킷 만들기
  2. 버킷 이름 설정 (ex. my-portfolio)
  3. 퍼블릭 액세스 차단 해제 → 나중에 CloudFront로 보안 설정 예정
  4. "속성" 탭 → 정적 웹 사이트 호스팅 활성화
    • 인덱스 문서: index.html
    • 오류 문서(optional): error.html

🔼 정적 파일 업로드

React의 경우:

npm run build
aws s3 sync ./build s3://my-portfolio --acl public-read

⚠️ --acl public-read는 임시로만! 보안 설정 후 제거 예정

2️⃣ CloudFront 배포 생성 (CDN 설정)

  1. CloudFront 콘솔 → 배포 만들기
  2. 원본 도메인: my-portfolio.s3.amazonaws.com
  3. Viewer Protocol Policy: Redirect HTTP to HTTPS
  4. Default Root Object: index.html
  5. 배포 생성 (몇 분 소요)

3️⃣ 도메인 연결 (Route 53)

✅ 도메인 구매

  • AWS Route 53 → 도메인 등록 → 원하는 도메인 구매

✅ CloudFront에 도메인 연결

  • Alternate Domain Names (CNAMEs): www.my-site.com
  • ACM에서 발급받은 인증서 적용 (필수: 버지니아 북부 리전)

✅ Route 53에서 DNS 연결

  • A 레코드 추가
    • 이름: www
    • 값: CloudFront 도메인 (d123abc456.cloudfront.net)
    • 별칭(Alias): 예

4️⃣ HTTPS 설정 (SSL 인증서 연결)

  1. ACM에서 SSL 인증서 발급 (www.my-site.com)
  2. 도메인 소유 인증(DNS 방식 추천)
  3. CloudFront 배포에 인증서 적용
  4. Viewer Protocol Policy: Redirect HTTP to HTTPS로 설정

💡 이제 내 사이트가 https://www.my-site.com으로 안전하게 접속됩니다!

5️⃣ S3 직접 접근 차단 + CloudFront 전용 보안 설정

❗왜 필요한가요?

  • S3 버킷을 퍼블릭으로 두면 누구나 파일 삭제, 조회 가능성
  • 따라서 S3는 비공개, CloudFront를 통한 요청만 허용합니다.

방법 1️⃣: OAI 방식 (Origin Access Identity, 구버전)

  1. CloudFront에서 OAI 생성 및 연결
  2. S3 버킷 정책:
{
  "Effect": "Allow",
  "Principal": {
    "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity EXAMPLE"
  },
  "Action": "s3:GetObject",
  "Resource": "arn:aws:s3:::my-portfolio/*"
}

방법 2️⃣: OAC 방식 (Origin Access Control, 신버전 / 권장)

  1. CloudFront에서 OAC 생성 → S3 Origin에 연결
  2. S3 버킷 정책:
{
  "Effect": "Allow",
  "Principal": {
    "Service": "cloudfront.amazonaws.com"
  },
  "Action": "s3:GetObject",
  "Resource": "arn:aws:s3:::my-portfolio/*",
  "Condition": {
    "StringEquals": {
      "AWS:SourceArn": "arn:aws:cloudfront::123456789012:distribution/EXAMPLEDISTID"
    }
  }
}

6️⃣ SPA (React 등) 404 에러 대응

React처럼 라우팅을 클라이언트에서 처리하는 경우, 새로고침 시 404가 발생할 수 있습니다.

해결 방법 (CloudFront에서 설정):

  • Error pages 설정:
    • 404 또는 403 에러 발생 시 /index.html로 리디렉션
    • 응답 코드: 200

✅ 요약

항목 설정 내용

정적 웹 호스팅 S3 (정적 파일 저장) + 정적 호스팅 ON
CDN CloudFront로 글로벌 속도 최적화
도메인 Route 53에서 구매하고 CloudFront에 연결
HTTPS ACM 인증서 → CloudFront에 연결
보안 S3는 비공개 / CloudFront를 통한 접근만 허용
SPA 대응 CloudFront 에러 페이지로 index.html 리디렉션

✨ 마무리

  • 비용은 S3 + CloudFront 기준으로 꽤 저렴
  • 보안과 성능 모두 만족할 수 있는 구조
  • 커스텀 도메인 + HTTPS까지 완벽

🔗 참고 링크

저작자표시 (새창열림)