AWS S3에 SSL 적용하기 (CloudFront) with Angular

기존 노트에서 업데이트를 해봅시다. Do it !

AWS 공식 가이드
https://aws.amazon.com/ko/premiumsupport/knowledge-center/cloudfront-https-requests-s3/

1. CloudFront 생성

   Origin Domain Name : s3 web endpoint 등록
   Origin Path: x

   Default Cache Behavior Settings
   
   Redirect HTTP to HTTPS
   http 접속해도 https로 보내주도록 설정했다.

2. Request or Import a Certificate with ACM
   ssl 인증서에 등록된 도메인 등록 후 ::인증서 가져오기::로 등록
   메뉴 Certificate Manager 에서 관리 가능
   

SSL 등록이 완료되고 발급 완료 되면 Custom SSL Certificate 활성화 후 리스트에서 선택 가능

3. Route 53
   도메인에 A레코드 namespace 추가
   Alias CloudFront에서 찾는다.

deploy 까지 소요시간 : 15분 ~ 20분

http to https 설정 [AWS 가이드]

Assuming you have HTTPS fully setup on your site, which will be the case if you use the guide, then here’s what you’ll need to do:
1. Go into your AWS Console and jump to CloudFront
2. Find the site you are working on. This isn’t immediately obvious, so look in the Origin column for the domain name or S3 bucket name you used. Click the ID to go into the settings for that CloudFront Distribution.
3. Go to the Behaviors tab and click “Create a Behavior“. You’ll see one behavior already there (“Default / () / S3-Bucket / HTTP and HTTPS”), just ignore that.
4. In “Path Pattern” you’ll want to set the matching rule for the site path you want to effect. In this case we want the whole site, so enter “”.
5. In“Viewer Protocol Policy”the important work gets done. Select “Redirect HTTP to HTTPS”.
6. Leave everything else as it is. Hit Save.
7. Lastly, make sure that this new rule has a precedence setting of “0”. This means it’s the top CloudFront rule and it will be run before anything else, ensuring HTTPS is selected.
8.
And that’s all there is to it. Any HTTP requests will be forwards to HTTPS.
How to Redirect to HTTPS Using CloudFront - Cloud Confusing

Angular 등 SPA web 배포에 관한 추가 설정

S3 배포를 경험해봤다면 다음의 설정을 해봤을 건데요.

모든 페이지를 index.html로 보내주는 설정입니다.
이렇게 해야 domain.com/route/path
route path 까지 인식해서 동작하게 됩니다.

cloudFront에도 이 설정을 해줘야 하는데요.

1. CloudFront 일반 설정 / 기본 루트 객체
   index.html 추가
   
   이 부분이 없으면 domain.com 접근 시
   AccessDenied을 만나게 됩니다.
   

2. CloudFront 오류 페이지 설정 / 사용자 정의 오류 응답 생성
   !!! 400 -> 403으로 수정
   
   이 부분을 설정하지 않을 경우
   domain.com/route/path 로 직접 접근 시 AccessDenied을 다시 만나게 됩니다.
   

요약

0. AWS Certificate Manager SSL 인증서 등록

   인증서 가져오기

1. cloudFront 생성

   S3 버킷 선택
   뷰어프로토콜 정책 : Redirect HTTP to HTTPS
   허용된 HTTP 방법 : GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
   SSL 인증서 선택
   기본 루트 객체, 오류 페이지 index.html 적용

2. Route53 CNAME 등록