이제 마지막 단계는 CloudFront를 설정해보겠습니다.

먼저 CloudFront에 대해 알아보겠습니다. aws에서 다음과 같이 정의하고 있습니다.

Amazon CloudFront는 .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 배포하는 속도를 높이는 웹 서비스입니다. CloudFront는 엣지 로케이션이라고하는 전 세계 데이터 센터 네트워크를 통해 콘텐츠를 제공합니다. 사용자가 CloudFront로 제공하는 콘텐츠를 요청하면 요청이 가장 낮은 지연 시간 (시간 지연)을 제공하는 엣지 로케이션으로 라우팅되므로 콘텐츠가 가능한 최상의 성능으로 제공됩니다.

쉽게 설명하자면 proxy를 생각하면 되는데, 엣지 로케이션으로 네트워크를 좀 더 빠르고 효율적으로 사용한다고 생각하면 됩니다.
CloudFront로 SSL인증서로 HTTPS 배포가 가능합니다.

다시 한번 요약하자면 이렇습니다.
1. HTTPS 배포 가능
2. 엣지 로케이션으로 이용속도 증가
3. 네트워크 사용이 효율적이고 S3보다 저렴함

이제 CloudFront를 사용해야 할 이유를 알았으니 설정을 해보도록 하겠습니다.

1. CloudFront 설정

1. AWS에서 CloudFront 페이지에서 CloudFront 배포 생성 버튼 클릭합니다.
   

2. S3에 있는 원본 도메인을 작성해줍니다. 그러면 아래 이름은 자동으로 생성됩니다.
   주의할 점이 있는데 원본 도메인 클릭 시 뜨는 값을 쓰는게 아니라 S3에 들어가 엔드포인트를 복사한 값을 넣어야합니다.
   이 부분 때문에 설정이 안될 수 있으니 주의하세요!
   

3. 바로 아래 [기본 캐시 동작 > 뷰어 프로토콜 정책] 부분에 Redirect HTTP to HTTPS를 선택합니다.
   

4. 설정이 끝났으면 아래로 내려봅니다.

• 가격 분류부분은 퍼포먼스에 비례해서 가격이 오르니 잘 확인해서 선택하도록 합니다. 만약 연습용이라면 가장 저렴한걸로 선택합니다.
• 대체 도메인 이름(CNAME) 부분에서 항목추가하여 www 있는 도메인 주소 와 www 없는 도메인 주소 1개씩 작성해줍니다.
• 사용자 정의 SSL 인증서에서 ACM에 생성한 인증서를 선택해줍니다.
  

5. 바로 밑에 기본값 루트 객체 부분에 index.html를 작성합니다.
   S3버킷의 Default Hosting Object를 적어줘야 하는 부분인데 아마 대부분 index.html일거라 생각합니다.
   

6. 다 작성했으면 배포 생성을 눌러줍니다.
   설정이 완료되면 아래 처럼 상태에 Enalbed or 활성화됨을 확인 할 수 있습니다.
   

CloudFront 설정이 끝났으면 마지막 작업인 호스팅 영역에 레코드를 추가해주면 됩니다.

2. 호스팅 영역 레코드 추가

1. Route53에 대시보드에 사용할 도메인 이름을 눌러 호스팅 영역 페이지로 진입합니다.
   

2. 아래 화면과 같은 페이지에 들어왔으면 레코드 생성이라는 버튼을 클릭합니다. 여기서 www 있는 도메인과 www 없는 도메인 2개를 설정해줄겁니다.
   

3. 먼저 www 있는 도메인 부터 설정하겠습니다.
   

• 레코드 이름: www
  레코드 유형: cname
  값: cloudfront에서 발생한 domain

• CloudFront 도메인 확인 방법
  

4. 이제 www없는 도메인 설정하겠습니다.
   

• 별칭 스위치를 켜면, 트래픽 라우팅 대상을 선택할 수 있는 셀렉터가 나타납니다. 거기서 CloudFront 배포에 대한 별칭 을 선택하고 아래 돋보기 모양의 창을 클릭해 아까 설정했던 CloudFront 도메인을 체크합니다.

이제 모든 설정이 끝났습니다.
http://picanote.shop
http://www.picanote.shop
로 접속해보시면 화면이 잘 나타나는 걸 확인할 수 있습니다.

참고자료
AWS - S3, CloudFront, Route53을 이용한 정적 호스팅
S3, ACM, CloudFront, Route53으로 https 배포하기 (with 가비아)