BLOG
AWS CloudFront와 S3를 이용한 웹 페이지 작성 가이드
작성 : 메가존 SA팀
AWS CloudFront는 CDN(Contents Delivery Service) 서비스이며, AWS S3는 스토리지 서비스 입니다. 이 가이드는 AWS CloudFront와 AWS S3를 이용하여 정적 웹 페이지를 구성하는 방법을 가이드 합니다.
작성 절차
- AWS S3 버킷 생성 후 정적 사이트 설정
- AWS CloudFront를 오리진으로 설정 진행
- AWS Route53에 CNAME 레코드 등록
- AWS S3 설정
아마존 웹 콘솔에 로긴하여 [Services]에서 [S3]를 클릭합니다.
[S3]를 클릭후 왼쪽 상단의 [Create Bucket]를 클릭하여 정적 웹페이지가 위치할 버킷을 생성합니다. 아래 그림과 같이 1)번을 클릭하고 2)번에서 웹페이지를 위치시킬 버킷의 이름을 소문자로만 타이핑을 합니다. 3)번의 [Create]를 눌러서 생성합니다.
생성후 버킷이름의 왼쪽에 돋보기를 클릭하면 오른쪽에 [Properties] 화면이 출력됩니다. [Properties] 화면에서 [Static Website Hosting]을 클릭합니다.
1)번 [Enable Website Hosting]을 클릭한 후 [Index Document] 항목에 2)번 항목에 index.html 을 입력 한 후 3)번 [Save]를 클릭하면 됩니다.
[Properties]에서 [Permission]을 클릭 후 [Permissions] 하단의 [Add bucket Policy]를 클릭하여 아래의 버킷 정책을 입력하고 [Save]를 클릭하면 됩니다.
{
"Version": "2012-10-17",
"Statement": [{
"Sid": "PublicReadForGetBucketObjects",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::myfirststaticwebhost/*"
}
]
}
Index.html 은 아래와 같이 작성 후 위 버킷에 업로드 하시면 됩니다.
<html> <body> <h1>This is a web site for CloudFront Testing!!</h1> </body> </html>
- AWS CloudFront 설정
이제 아마존 웹 콘솔의 [Services]에서 [CloudFront]를 클릭하여 이동합니다.
[Create Distribution]을 클릭 합니다.
Web 쪽의 [Get Started]를 클릭합니다.
[Origin Domain Name]에는 전에 S3에서 생성한 버킷명으로 나오는 도메인을 선택하시면 됩니다. 도메인을 선택하신 후 연결할 도메인을 [Alternate Domain Names]에 입력하시면 됩니다. [Default Root Object]에는 “index.html”을 입력하면 됩니다.
위 설정을 끝내시고 하단의 [Create Distribution]을 클릭합니다. 클릭하고 나면 Distribution 리스트가 바로 나옵니다. [Status]에서 “In Progress”인 경우에는 각 엣지로 설정을 배포하는 과정입니다. Deployed 로 나오면 서비스를 확인할 수가 있습니다.
- AWS Route53 설정
이제 Route 53 서비스로 이동하신 후 등록되어 있는 도메인의 cdn 도메인을 CloudFront 도메인의 CNAME으로 설정하면 됩니다. 아래와 같이 [Create Record Set]을 클릭합니다.
아래와 같이 cdn.testcdn.com을 설정하고, CNAME을 설정 후 위에서 생성한 CloudFront 도메인을 넣어주고 [Create]를 누르면 설정이 완료됩니다.
CloudFront에서 생성한 Distribution 의 Status가 Deployed가 된 후 위 도메인으로 확인해 보면 아래와 같은 화면이 출력됩니다.
지금까지 AWS CloudFront와 S3를 이용한 정적 웹페이지 작성하는 방법을 알아보았습니다.
끝까지 읽어주셔서 감사합니다.