CloudFront로 S3에 HTTPS적용하기 with ACM 인증서

박준수·2023년 1월 12일

프론트엔드 웹페이지 https와 서브도메인으로 자동배포하기 with AWS S3, Route53, CloudFront, Github actions, SubDomain

목록 보기

4/5

AWS CloudFront란 AWS 제공하는 CDN 서비스이다. CDN은 Contents Delivery Network의 약자로 콘텐츠 제공자와 사용자 간 지리적으로 떨어져 있는 환경에서 콘텐츠를 빠르게 제공하기 위한 기술이다.
CloudFront는 전 세계에 분포된 엣지 로케이션이라고 하는 데이터 센터의 엣지 서버를 사용해 콘텐츠를 캐싱하고, 사용자가 위치한 곳에서 가장 가까운 엣지 로케이션에서 콘텐츠를 제공받을 수 있도록 해주는 역할을 한다.
또 CloudFront는 SSL 인증서를 이용한 HTTPS 호스팅을 지원한다. 사실 이번에 우리가 CloudFront를 이용하는 이유는 HTTPS 호스팅 때문인데, S3로 배포한 앱은 SSL 인증서 적용이 불가능하다. 따라서 우리는 CloudFront를 이용해 S3를 호스팅 함으로써 HTTPS를 적용해 볼 것이다.
CloudFront는 AWS에서 제공하는 CDN(Contents Delivery Network)입니다. 컨텐츠를 네트워크 상에 좀 더 효율적으로 배포하기 위한 수단으로 생각하면 좋습니다. 지금 우리는 https 배포를 위해 ACM을 통해 만든 SSL 인증서를 이용하기 위해서 사용하는 것이기도 합니다.

여기서는 여러 값이 많으니, 변경해야할 부분만 살펴보자.
우선적으로 버켓의 endpoint를 지정해줘야한다! 우리는 S3 bucket으로 배포한 값을 호스팅 할 거니까, S3를 통해 배포된 버켓의 주소를 복사해서 붙여넣자.

💡 list에서 선택을 하는게 아니라, S3 주소를 직접 복사해서 붙여넣어야 합니다!

허용할 HTTP Method를 체크하고 http로 접속한 user를 https로 redirect 시켜주는 옵션인 redirect HTTP to HTTPS도 체크해주자.

Price Class - 퍼포먼스에 비례해서 가격이 오릅니다. 실시간성이 크게 중요한 서비스가 아니라면 싼걸로 하고, 인터랙션 실시간성이 높다면 지금 선택된 옵션을 골라서 돈을 좀 씁시다.
Alternate Domain Names - 해당 Distribution을 통해 사용할 도메인을 등록 해 줍시다. 저는 bluestragglr.com과 www.bluestragglr.com을 모두 하나의 버킷을 가르키도록 사용하기 위해 위와 같이 작성하였습니다.
SSL Certificate - Custom SSL Certificate를 선택하면 ACM에서 설정한 인증서를 불러올 수 있습니다.
마지막으로 ACM에서 받은 SSL 인증서 세팅을 해주면 끝난다!

이제 Route53에서 www.domain.com과 domain.com에 대한 DNS를 등록해주자.
CloudFront 배포 별칭은 두 개의 다른 도메인 레코드가 참조할 수 없다. 따라서 우리는 www.domain.com의 cloudfront 도메인의 CNAME으로 등록하고,
domain.com을 A record로 alias 설정을 해 주어 www를 쓴 유저와 그렇지 않은 유저 모두 정상적으로 연결 될 수 있도록 해줄 것이다.
말로 하면 좀 어려운데, 아래 사진을 보고 이해해보자😊

값은 CNAME의 값과 동일한 것을 쓴다.
CloudFront 배포 별칭은 두 개의 다른 도메인 레코드가 참조할 수 없습니다.
따라서 두 개 모두 A 레코드로 CloudFront 배포를 선택하려고 하면 두 번째로 생성하는 레코드에는 해당 대상이 표시되지 않습니다.
반대로, 두 경우 모두 CNAME을 직접 입력하려고 한다면 최상위 도메인(www가 없는 도메인)에 CNAME을 연결하는 것이 불가능하다는 메세지가 표시됩니다.
따라서 위와 같이 두 개의 레코드를 각각의 방식으로 설정하게 되면 www를 쓴 유저와 그렇지 않은 유저의 요청을 모두 적절하게 처리해 줄수 있습니다.