CloudFront와 Amazon S3를 사용한 정적 웹 사이트 호스팅
Note
오래전에 작성된 글입니다. 일부 내용이 현재와는 다를 수 있으며, 링크가 유효하지 않을 수 있습니다.
이 글에서는 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를 사용하여 접속되었으며, 유효한 인증서가 적용된 것을 확인할 수 있습니다.
