Dev Note

AWS CloudFront에서 default root object 모든 Path 적용 이슈 우회 방법

- 작업 개요

Cloud Front의 경우 Default Root Object 설정이 최상위 Directory 에서 밖에 적용이 되지 않는다.

S3에서 웹사이트 호스팅(Static website hosting)을 할때 S3에서 [Index document] 를 index.html로 설정한다면 

아래 표와 같기 Redirect를 해준다.

그러나 Cloud Front 에서는 아무리  Default Root Object를 설정해도 최상위 Path를 제외하고는 오류가 발생한다.

따라서 Cloud Front를 적용 할 떄 최상위 path를 제외하고는 url을 전체 다 입력 해줘야한다.

해당 이슈에대한 우회 방법으로 Path와 같은 파일 명으로 html 파일을 생성하고,

그 파일 S3에 업로드 할때 Header에  Content-Type을 text/html로 설정하면 해당 파일을 html로인식해서 

www.example.co.kr/test/ 로 입력해도 CloudFont 서비스가 가능해진다.

- 작업 절차

웹 서비스를 할 S3에 html 파일을 업로드하고, html 파일 명을 확장자를 제외한 Path 명으로 변경한다.

그런 다음 html 파일의 Meta data에서 Content-Type을 text/html로 변경한다. 

그리고 Cloud Front의 캐시를 초기화 시킨다.

1. S3에서 파일을 선택한다음 [Properties]-[Metadata]에서 

[Content-Type]을 [text/html]로 변경해준다.

2. 그런 다음 파일 명에서 확장자를 지운다.

3. CloudFont 에서 Invalidations 탭에 아래와 같이 edge location에 cache를 초기화 시킨다.

(이미 edge Location에 올라가있는 파일은 Metadata 값이 TTL 시간이 지나더라도 초기화 되지 않으므로 꼭 이 작업을 해주어야한다.)

해당 작업을 완료하면 CloudFont와 S3를 사용해 https 서비스를 사용하면서 모든 Root에 index 파일을 설정한것 처럼

millionairedeveloper.example.co.kr/test/

test 가 html이기 때문에 서비스가 가능해진다.

그럼 오늘도 행복한 하루 되세요.