[AWS] CloudFront+S3 배포했는데 하위페이지에서 access denied에러날 때

AWS의 CloudFront와 S3 로 정적웹페이지 배포, 서브도메인도 설정 완료해서 이제 테스트를 해보려했다.

하지만, 분명 S3 버킷 root 위치의 index.html 로 접근은 하는데 url 뒤에 /를 붙여서 접속하니 access denied 에러가 나와서 당황했다.

 

 

결론적으로 말하면, CloudFront - '오류페이지' - '사용자정의 오류 응답'도 만들어주어야한다.

 

왜냐하면 s3는 새로고침하고 새 경로를 열 때, route를 이해못하기 때문에 새 경로가 열릴 때마다 access denied 에러를 띄우는 것이다..! 그래서 위처럼 나오는 이 에러페이지를 index.html로 redirect 시키면 해결이 되는 것이다!

 

방법

1. 생성한 CloudFront 로 이동하여 오류 페이지 탭에서 사용자 정의 오류 응답 생성을 누른다.

 

 

2. 아래 이미지처럼 따라하여 생성한다.

 

 

3. 한번 더 생성하는데 이번엔 403 http 오류코드 로 입력하고 생성한다.

그러면 아래처럼 나올 것이다.

 

 

4. 이제 하위 페이지(하위 디렉토리)로 이동해도 access denied 안나온다!

 

 

참고)

https://stackoverflow.com/questions/50299204/receive-accessdenied-when-trying-to-access-a-reload-or-refresh-or-one-in-new-tab/50302276#50302276

Receive AccessDenied when trying to access a reload or refresh or one in new tab in angular 5