S3와 CloudFront로 정적 웹사이트 HTTPS로 호스팅하기

개요

  이력서를 하나의 웹사이트로 만들어보고 싶다는 생각이 들어 AWS S3와 CloudFront로 HTTPS 호스팅 해보았습니다. 

 

목차

1. S3 버킷 생성
2. Route53으로 도메인 등록 및 HTTPS 적용
3. CloudFront 배포 생성, S3 버킷 정책 편집
4. Route53에서 A 레코드 설정으로 CloudFront와 도메인 연결
5. 추가 설정

---

1. S3 버킷 생성

 S3 버킷은 다음 두가지를 체크했습니다. 퍼블릭 액세스를 비허용, 그리고 CloudFront로 부터의 접근을 허용하는 버킷 정책. 퍼블릭 액세스 차단은 생성할 때 설정하고, CloudFront 접근 허용은 배포 생성 후 설정했습니다.

 

버킷을 생성할 때 주의할 사항은 정적 웹 호스팅 비허용입니다. CloudFront를 통해 S3리소스에 접근하는 이 구성은 S3의 웹 사이트 엔드포인트가 아닌, REST API 엔드포인트를 사용하기 때문입니다. 아래의 공식 문서에서 확인할 수 있습니다.

 

CloudFront를 사용하여 Amazon S3에서 호스팅되는 정적 웹 사이트 제공

 

2. Route53으로 도메인 연결 및 HTTPS 적용

Route53으로는 두가지 작업을 했습니다. SSL 인증서를 통해 HTTPS 연결을 적용, CloudFront에 발급받은 도메인을 연결. CloudFront와 도메인 연결은 배포 생성 이후에 진행했습니다.

 

저는 가비아에서 도메인을 발급 받았기 때문에 가비아 사이트의 네임서버에 NS 레코드 값 네개를 작성했습니다.

 

ACM을 통해 SSL 인증서를 발급 받을 때 중요한 점은 버지니아 북부 리젼에서 진행해야 합니다.

 

인증서 발급이 완료 되면, Route53에서 CNAME 레코드를 생성해 줍니다.

 

3. CloudFront 배포 생성

CloudFront 배포를 생성할 때 방금 발급 받았던 SSL 인증서를 적용했습니다.

 

원본(클라우드 프론트가 접근하려는 리소스)을 S3로 설정한 뒤, 원본 액세스 제어 설정 라디오 버튼을 눌러 OAC를 적용해야 합니다. Create new OAC를 통해 바로 만들어도 되고, 아래의 보안 > 원본 액세스에서도  만들 수 있습니다.

 

CloudFront > 보안 > 원본 액세스

토글을 통해 OAC를 적용하면 S3 버킷 정책을 복사할 수 있습니다. 정책을 복사하고 S3 버킷 권한으로 이동하여 아래 코드를 붙여 넣으면 됩니다.

 

Amazon S3 > 버킷 > 버킷이름 > 권한

{
    "Version": "2012-10-17",
    "Statement": {
        "Sid": "AllowCloudFrontServicePrincipalReadOnly",
        "Effect": "Allow",
        "Principal": {
            "Service": "cloudfront.amazonaws.com"
        },
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::버킷이름/*",
        "Condition": {
            "StringEquals": {
                "AWS:SourceArn": "arn:aws:cloudfront::배포이름"
            }
        }
    }
}

 

4. Route53으로 CloudFront와 도메인 연결

레코드 유형은 A, 라우팅 대상은 CloudFront로 적용해 생성해둔 배포와 연결했습니다. 이제 도메인을 입력하면, CloudFront를 통해 S3 리소스에 접근할 수 있게 되었습니다.

 

5. 추가 설정

여기까지 설정한대로라면, https://hashblog.me는 가리키고 있는 리소스가 없어서 위 사진과 같은 오류 화면을 반환합니다. 따라서 저는 루트 도메인이 웰컴페이지(index.html)를 가리킬 수 있도록 CloudFront 기본 루트 객체를 추가적으로 설정했습니다.

 

기본 루트 객체 지정 - 아마존 CloudFront

---

결과

도메인과 HTTPS가 성공적으로 적용되었고, 루트 도메인이 웰컴 페이지를 잘 반환하는 것을 확인해 보았습니다. 이렇게 S3버킷, CloudFront, Route53을 통해 정적 웹사이트를 HTTPS로 호스팅 해보았습니다.