AWS CloudFront reload error

1. 기본 작동 원리

•  request를 보내면 cloudFront에서 S3에 접근하고 바로 api server에 request를 보낸다.
• 그래서 브라우저는 캐싱되지 않은 데이터, json 데이터나 해당 하는 페이지에서 필요한 데이터만 가져오면 된다.

크롬 개발자 도구

• 이렇게 cloudFront에 캐싱된 static data에서 api 서버에 따로 요청이 된다면 요청된 해당 데이터만 가져오게 된다.

 

2. 문제점

•  reload 시 해당 url path를 cloudFront에서 인식하지 못해서 S3로 요청이 간다. public이 아니니 당연히 permission denied 에러 발생.
• if you reload the page, http://mywebsite.com/stats will be sent to S3 as your browser does not know that you are running a front(angular, react etc..) application.

 

 

3. 해결책

•  S3에서 받는 에러코드 403을 에러 페이지 기본 경로로 리턴한다.
• 그러면 해당 내용이 cloudFront로 가고 403에러를 받아 에러 페이지 기본 경로로 내보낸다.
• 그러면 브라우저는 해당 페이지를 띄우기 위한 정적 리소스와 서버 리소스를 모두 받아 데이터를 보여준다.
• reload 시 에러 발생하는 이유는 cloud front가 아닌 s3로 request를 보내기 때문이다.
• 이때, error document를 index.html로 지정해주면 S3가 CloudFront로 해당 내용을 전달한다.
• 그 후 CloudFront에서 해당 에러 처리 내용을 적절히 오류 페이지에 설정을 해주면, end user에게 에러가 아닌 reload한 상태 값을 리턴해줄 수 있다.

 

1) S3 버킷 > 속성 > 정적 웹 사이트 호스팅 편집(Optional)

• S3 버킷으로도 정적 웹사이트를 호스팅하고 있다면 해당 부분도 수정해야지만, CloudFront의 도메인으로 웹사이트를 제공한다면 해당 부분은 설정하지 않아도 된다.

• 오류 문서 - 기본 페이지 설정 - index.html

 

2) CloudFront > 오류 페이지 > 사용자 정의 오류 응답 생성 클릭

• 이렇게 reload 시 받는 에러 코드를 설정하고 응답 페이지 경로를 기본 페이지로 선택해주면, 필요한 정적 리소스를 모두 브라우저에 전송 가능하다.

 

크롬 개발자 도구

• 그 후 reload 시 정상적으로 작동하는 것을 확인할 수 있다.

 

ps. 응답 페이지 경로를 모두 index.html로 하는 이유는

" Angular 앱이 동작해야 하는 경우는 모두 index.html로 보내야 합니다." 라고 공식 문서를 확인해보면 나와 있다. 아마 typescript는 거의 비슷하지 않을까 생각한다. 왜냐하면 SPA(Single Page Application)의 특징이기 때문이다.

https://angular.kr/guide/deployment

 

ps. 해당 문제는 SPA여서 나타나는 문제이다.

일반적으로 정적 서버는 http://www.mysite.com과 같은 요청을 받았을 때 index.html을 반환합니다. 하지만 http://www.mysite.com/heroes/42라는 요청을 정적 서버가 받으면 index.html을 보내도록 따로 설정하지 않은 이상 404 - Not Found를 반환합니다.

 

references

https://tecadmin.net/s3-cloudfront-404-error-on-page-reload/

https://stackoverflow.com/questions/59160472/how-to-solve-x-cache-error-from-cloudfront-on-spa

https://hackernoon.com/how-to-host-a-single-page-application-with-aws-cloudfront-and-lambda-edge-39ce7b036da2

https://newbedev.com/how-to-solve-x-cache-error-from-cloudfront-on-spa