CloudFront와 Amazon S3를 사용한 정적 웹 사이트 호스팅

이 글에서는 Amazon CloudFront와 Amazon Simple Storage Service (Amazon S3)를 사용하여 SSL(HTTPS)을 지원하는 정적 웹 사이트를 호스팅하는 방법을 소개합니다.

이 블로그(blog.buffashe.com)도 CloudFront와 S3를 사용하여 서버리스 환경에서 서비스 중입니다.

Amazon Route 53(또는 다른 DNS 서비스)에 등록된 도메인(호스팅 영역)이 있는 상태에서 진행합니다.

이 글의 내용

사용하는 서비스

Amazon CloudFront
전 세계로 배포 및 HTTPS 적용

Amazon Route 53
CloudFront 도메인과 웹 사이트 도메인 연결

Amazon S3
웹 사이트의 Origin(웹 서버, 파일시스템 역할) 담당

AWS Certificate Manager
웹 사이트의 도메인에 대한 인증서 발급

웹 페이지 준비

웹 사이트에서 호스팅할 파일을 준비합니다.
간단한 페이지를 만들어 사용하겠습니다.

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>테스트 페이지</title>
	</head>
	<body>
		<p>테스트 페이지입니다.</p>
	</body>
</html>

Amazon S3 버킷 생성 및 준비

Amazon S3 버킷의 생성, 호스팅할 파일의 업로드, 정적 웹 사이트 호스팅 기능 설정과 버킷 정책 추가를 진행합니다.

버킷 생성

AWS Management Console에 로그인한 뒤 Amazon S3 Console에 접속합니다.
https://console.aws.amazon.com/s3/
버킷 만들기를 클릭합니다.
버킷 이름을 입력합니다. (buffashecom-staticweb 등)
Amazon S3 버킷을 CloudFront와 연결할 때에는 도메인 이름과 다른 이름을 사용하여야 합니다.
리전을 선택합니다.
주 사용자층과 인접한 리전을 선택하시면 됩니다.
(Cache miss시 CloudFront와 Origin 사이의 레이턴시 감소)

생성을 클릭합니다.

호스팅할 파일 업로드

생성한 S3 버킷에 호스팅할 파일을 업로드합니다.

업로드를 클릭합니다.

앞에서 생성한 파일을 추가합니다.

업로드를 클릭합니다.

정적 웹 사이트 호스팅 기능 설정

버킷의 정적 웹 사이트 호스팅 기능을 활성화합니다.

버킷의 속성 탭으로 이동합니다.

정적 웹 사이트 호스팅을 활성화하고 인덱스 문서에 index.html을 입력한 뒤 저장합니다.

버킷 정책 추가

누구나 버킷에 접근할 수 있도록 버킷 정책을 구성합니다.

버킷의 권한 – 퍼블릭 액세스 차단 탭으로 이동합니다.

편집을 클릭한 뒤 모든 퍼블릭 액세스 차단을 체크 해제하고 저장합니다.

설정 확인 창에 확인을 입력한 뒤 확인을 클릭합니다.

버킷의 권한 – 버킷 정책 탭으로 이동합니다.

인터넷의 누구나 버킷에 접근할 수 있도록 정책을 추가합니다.
s3:GetObject, s3:GetObjectVersion 작업을 모두에게 허용합니다.
다음 내용을 입력한 후 저장합니다.
[버킷 ARN]은 버킷 정책 편집기에 표시된 ARN으로 대체합니다. (arn:aws:s3:::buffashecom-staticweb 등)

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:GetObjectVersion"
            ],
            "Resource": "[버킷 ARN]/*"
        }
    ]
}

버킷에 퍼블릭 액세스 권한이 부여된 것을 확인할 수 있습니다.

SSL 인증서 요청

AWS Certificate Manager를 통해 us-east-1(미국 동부; 버지니아 북부) 리전에서 SSL 인증서를 요청합니다.
CloudFront에서 사용되는 Custom SSL Certificate는 us-east-1에서 생성되어야 합니다.

us-east-1 리전에서 AWS Certificate Manager에 접속하여 인증서 프로비저닝을 클릭합니다.
아래 페이지는 처음 접속한(인증서가 없는) 사용자에게만 표시되며, 인증서가 있는 분들은 인증서 요청을 클릭하시면 됩니다.

공인 인증서 요청을 선택한 뒤 인증서 요청을 클릭합니다.

발급할 주소(사용자들이 접속할 주소)를 입력합니다.

Apex 도메인 – buffashe.com
서브도메인 – blog.buffashe.com
와일드카드 – *.buffashe.com (buffashe.com의 모든 서브도메인)
에 모두 발급 가능합니다.

입력한 뒤 다음을 클릭합니다.

검증 방법을 선택합니다.
DNS 검증을 사용하면 DNS 서비스에 추가할 CNAME 레코드가 유지되는 한 자동으로 인증서가 갱신되어 편리합니다.

태그는 추가하지 않았습니다.

입력한 사항을 검토한 뒤 확인 및 요청을 클릭합니다.

인증서 검증에 사용할 CNAME 레코드(도메인 이름마다 1개씩)가 표시됩니다.
Route 53 사용자는 Route 53에서 레코드 생성을 클릭하면 한 번에 입력 가능합니다.
다른 DNS 서비스 사용자는 수동으로 입력하면 됩니다.

인증서의 상태가 검증 보류에서 발급 완료가 되었는지 확인합니다.
시간이 조금 소요되므로 다음 단계로 진행하셔도 됩니다.

CloudFront 웹 배포 생성

CloudFront는 AWS에서 제공하는 CDN입니다.
Amazon CloudFront란?

CloudFront Console에 접속하여 Create Distribution을 클릭합니다.
https://console.aws.amazon.com/cloudfront/

웹 배포를 선택(Get Started 클릭)합니다.

Origin, Default Cache Behavior 설정

Origin Domain Name 입력 칸을 클릭하면 가능한 옵션이 표시되는데, 목록에 나오는 값 대신 위의 정적 웹 사이트 호스팅 기능 설정에서 표시된 정적 웹 사이트 호스팅 엔드포인트 주소를 입력합니다(http:// 제외).
목록에서 선택해도 일반적인 정적 웹 호스팅에는 문제가 없지만, SPA(Single Page Application)를 호스팅 할 경우에는 엔드포인트를 직접 입력해야 합니다.
정적 웹 사이트로 변환한 WordPress를 호스팅 할 때에도 정적 웹 사이트 호스팅 엔드포인트 주소를 직접 입력해야 정상적으로 작동했습니다.

나머지 Origin, Default Cache Behavior 설정은 필요에 따라 변경하시면 됩니다.
아래 설정은 예시로 참고하세요.

HTTP 요청을 HTTPS로 리다이렉트
기본 캐시 정책
자동 gzip 압축
을 설정했습니다.

Distribution 설정

사용할 Alternate Domain Name들(쉼표 또는 줄 바꿈으로 구분)과 Custom SSL Certificate, Default Root Object를 설정합니다.

SSL 인증서 요청에서 입력한 사용자들이 접속할 주소
발급받은 SSL 인증서
index.html
로 설정했습니다.
나머지 설정은 필요에 따라 변경하세요.

Create Distribution을 클릭하여 완료합니다.

Distribution Status가 InProgress인 것을 확인할 수 있습니다.
각 엣지로의 배포가 완료되면 Deployed로 변경됩니다.
시간이 조금 소요되므로 다음 단계로 진행하셔도 됩니다.

Route 53 설정

CloudFront Distribution과 기존에 보유한 도메인을 연결합니다.

Route 53 콘솔에 접속하여 호스팅 영역 내의 연결할 도메인을 클릭합니다.
https://console.aws.amazon.com/route53/

레코드 생성을 클릭합니다.

단순 라우팅을 선택한 뒤 다음을 클릭합니다.

단순 레코드 정의를 클릭합니다.

레코드 이름에 사용할 도메인을 입력하고, 값/트래픽 라우팅 대상을 CloudFront 배포에 대한 별칭으로 설정합니다.
배포 선택 입력 칸을 클릭하면 사용 가능한 Distribution의 주소가 표시됩니다.
CloudFront 웹 배포 생성 단계에서 생성한 Distribution의 Domain Name과 일치하는 값을 선택합니다.

단순 레코드 정의(완료)를 클릭합니다.

레코드 설정을 확인하고 레코드 생성을 클릭합니다.

접속 확인

CloudFront와 도메인이 잘 연결되었는지 확인합니다.

HTTPS를 사용하여 접속되었으며, 유효한 인증서가 적용된 것을 확인할 수 있습니다.