static s3 사이트에 https 적용하기

jinwook han·2021년 12월 19일

이 글은 http를 사용하던 static s3 사이트에 https와 cloudfront를 적용하는 과정을 담았습니다.
주요 가이드는 우아한형제들 기술블로그 글(사례별로 알아본 안전한 S3 사용 가이드
)을 참고하여 진행했습니다.

문제점

기존 구조

저는 warmjelly.com이라는 사이트를 운영하고 있습니다.
사이트의 구조는 다음과 같았습니다.
<그림 1>
1. s3에는 정적 사이트를 구성하는 파일들이 담겨 있습니다.
s3는 public하게 오픈되어 있으며, s3의 public url이 존재합니다.
2. route 53에는 warmjelly.com 도메인에 대한 A 레코드가 있습니다.
해당 A 레코드의 value는 정적 파일들이 담긴 s3 버킷의 public url입니다.
3. 사용자 요청이 들어오면 route 53는 dns 역할을 하여 도메인 쿼리에 대해 public s3 주소를 반환하고, 사용자는 s3 public 주소를 통해 방문하게 되는 구조입니다.

문제점

이 구조는 다음과 같은 문제점이 있습니다.
1. https를 사용하고 있지 않습니다. http로 구성되어 있어, 사이트를 방문하면 경고창이 떠서 사용자에게 불신을 줍니다.
2. s3 주소가 public 하게 공개되어 있습니다. 그로 인해 보안 제어가 어렵습니다.(예: 사용자에 따라 버킷 접근 권한을 다르게 하기 어려움)

https를 사용함과 동시에, s3 주소를 비공개로 전환하는 작업이 필요합니다.

목적

다음과 같은 목적을 세웠습니다.
1. 사용자가 http가 아닌 https로만 접속할 수 있도록 한다.
2. 정적 s3 url 주소를 비공개로 전환한다.

완성하고자 하는 구조는 다음과 같습니다.
<그림 2>
1. cloudfront를 통해 s3 url를 private으로 만들고, cloudfront url로만 s3 버킷에 접근하도록 만들 수 있습니다.
2. cloudfront로 https 기능을 얻을 수 있습니다. 또한 http로 접근 시 https로 리다이렉트하는 기능까지 cloudfront를 통해서 제공받을 수 있습니다.
3. route53에는 cloudfront에 대응하는 새로운 레코드가 필요합니다.
4. cloudfront url로만 s3를 직접 접근할 수 있기에, 기존 s3 public 주소를 value로 갖던 A 레코드(warmjelly.com 도메인)를 삭제하고, cloudfront url를 value로 갖는 A 레코드(warmjelly.com 도메인)를 새로 생성합니다.
5. 그림에는 없지만, https를 사용하기 위해서는 warmjelly.com의 ssl certificate를 만들어주어야 합니다.

과정

warmjelly.com에 대한 ssl certificate를 생성합니다.
aws certificate manager를 사용해서 생성합니다.
<그림 3>
public certificate를 선택합니다.
<그림 4>
(1) Fully qualified domain name에 warmjelly.com를 적습니다.
(2) DNS validation을 선택합니다.
(3) 밑에 있는 request 버튼을 눌러서 신청을 완료합니다.
신청 후 validation 과정을 거치게 되어, certificate 생성이 완료될 때까지 2~3일 소요될 수 있습니다. 생성될 때까지 기다려야 합니다.
<그림 5>
생성이 완료되면 Issued라고 뜨며, validation이 진행 중이면 Pending validation이라고 뜹니다.
cloudfront distribution을 생성해 줍시다.
<그림 6>
(1) Origin domain에는 정적 웹사이트 파일이 있는 s3 주소를 넣어줍시다.
(2) S3 bucket access에서 OAI를 사용(USE)하겠다고 표시해줍니다.
이렇게 함으로써 s3는 오직 cloudfront로만 접근할 수 있고, s3 주소는 private하게 됩니다.
<그림 7>
(1) Viewer protocol policy에서는 Redirect HTTP to HTTPS를 선택할 겁니다. 유저가 http로 요청하든 https로 요청하든, https로 응답하는 것이 목적이기 때문입니다.
<그림 8>
(1) Custom SSL certificate에 아까 1에서 만들었던 certificate을 추가합니다.
<그림 9>
(1) 만약 index.html 파일을 사용자가 첫 화면에서 진입할 파일로 설정하고자 한다면, Default root object에 index.html을 추가해 주어야 합니다.
추가로 설정할 부분은 없으며, Create Distribution을 눌러 distribution을 생성합니다.

route53에서 cloudfront에 대응하는 A 레코드를 생성합니다.
<그림 10>
warmjelly.com 도메인의 기존 A 레코드는 삭제합니다. 새로운 레코드를 만드는 이상 기존 레코드는 필요없습니다. 게다가 같은 도메인에 대한 두 개 이상의 A 레코드는 공존할 수 없기 때문에, 먼저 삭제해 주어야 합니다.
이제 새로운 A 레코드를 생성합니다.
<그림 11>
(1) Record type으로 A를 설정합니다.
(2) Alias를 사용합니다. Alias to CloudFront distribution을 선택한 후, 아까 2에서 만든 cloudfront distribution 도메인을 검색하여 선택합니다.
설정이 끝났습니다. Create records 버튼을 눌러줍니다.