[AWS] 정적 웹사이트 호스팅 구축하기

G·2024년 10월 23일

개요

이 글은 다음의 AWS 구성으로 정적 웹사이트 호스팅 구축하는 법을 최소한으로 안내합니다.

전체 구성 (실제 구현은 역순으로 진행합니다)
사용자 요청 → Route 53 → CloudFront → S3

  1. S3 (Simple Storage Service):
    • 정적 웹사이트 파일들을 저장하고 호스팅하는 확장성 높은 객체 스토리지 서비스
  2. CloudFront:
    • 전 세계 엣지 로케이션을 통해 웹사이트 콘텐츠를 빠르게 전송하는 콘텐츠 전송 네트워크(CDN) 서비스
  3. Route 53:
    • 도메인 이름을 CloudFront 배포와 연결하여 사용자 정의 도메인으로 웹사이트에 접근할 수 있게 하는 DNS 웹 서비스




S3 + CloudFront 조합을 사용하는 이유

S3 자체로도 정적 웹사이트 호스팅이 가능하지만, CloudFront는 성능과 보안을 강화하는 부가적인 역할을 합니다.

S3 정적 웹사이트 호스팅

  1. S3 자체 기능
  2. 제한사항
    • HTTPS 지원 안함 (HTTP만 가능)
    • 느린 로딩 (지역 제한)
    • 도메인 커스터마이징 제한

CloudFront 추가 시 장점

  1. 보안 강화
    • HTTPS 지원
    • SSL/TLS 인증서 무료 제공
    • DDoS 보호
  2. 성능 향상
    • 전세계 엣지 로케이션 활용
    • 캐싱으로 빠른 로딩
    • 압축 전송
  3. 고급 기능
    • 커스텀 도메인 사용
    • 에러 페이지 커스터마이징
    • 접근 제어

작동 방식 비교

1. S3만 사용

사용자 → S3 버킷 (특정 리전) → 웹사이트 컨텐츠
제한사항:
  - 해당 리전과 멀수록 느림
  - HTTPS 사용 불가

2. S3 + CloudFront 사용

사용자 → 가까운 엣지 로케이션 → 캐시된 컨텐츠 즉시 전송
          └→ 캐시 미스 시 → S3 버킷 접근
장점:
  - 빠른 전송 속도
  - HTTPS 보안
  - 고급 기능 사용 가능 




1. S3

버킷 생성

  • 버킷 이름 설정
  • 리전 선택
  • 퍼블릭 액세스 차단

버킷 정책 설정

  • CloudFront를 통한 접근만 허용하는 정책 추가

웹사이트 파일 업로드

  • HTML, CSS, JavaScript 등 정적 파일 업로드




2. CloudFront

배포 생성

  • 오리진 설정 (S3 버킷 선택)
  • HTTPS 리다이렉트 설정
  • 캐시 정책 설정




3. Route 53

호스팅 영역 생성

  • 도메인 이름 입력

CloudFront와 도메인 연결

1. ACM(AWS Certificate Manager)에서 SSL 인증서 발급

  1. ACM 콘솔 접속 (반드시 us-east-1 리전에서 생성)
  2. 인증서 요청 → 퍼블릭 인증서 요청
  3. 도메인 이름 입력
    • 단일 도메인: example.com
    • 와일드카드: *.example.com
  4. DNS 검증 선택
  5. 태그 추가 (선택사항)
  6. 검증 대기 상태에서 [Route 53에서 레코드 생성] 클릭하면 자동으로 검증 레코드(CNAME) 생성 → 잠시 후 성공 상태 확인

2. CloudFront 설정

  1. 배포 → 설정 → 편집
  2. Alternate domain name (CNAME) 추가
    • 사용할 도메인 입력 (example.com)
  3. Custom SSL certificate 선택
    • 앞서 발급한 ACM 인증서 선택
  4. 변경 사항 저장

3. Route 53에서 레코드 생성

  1. 레코드 생성 선택
  2. 레코드 설정:
    • 레코드 이름: 공백 (루트 도메인이므로)
    • 레코드 유형: A
    • 별칭: 활성화
    • 트래픽 라우팅 대상
      • 엔드포인트: CloudFront 배포에 대한 별칭
      • 배포: 해당 CloudFront 배포 도메인 선택
  3. 레코드 생성
profile
Hello!

0개의 댓글