Cloudfron - S3 로 서비스하는 구조에서,

S3에 SPA(ex. React)를 이용하여 구성을 하면 Redirect가 발생하여 403/404와 같은 Access Denied가 발생하게 된다.

이는 Cloudfront와 SPA의 조합이되면 발생할 수 밖에 없는 구조적인 문제이기에,

Cloudfront에 403, 404 에러 발생 시, 200응답코드로 전환하고 기본 페이지(ex. index.html) 을 호출하게 설정하여야한다.

예를 들어서,

아래 참고자료와 같이 403, 404의 에러 페이지를 index.html로 하고 HTTP 응답코드를 200으로 설정하여 Cloudfront 배포하면 된다.

Cloudfornt 배포가 완료되어도 Cache로 인하여 바로 적용된 설정이 확인이 안될 수가 있다.

이럴 경우, Cloudfront에서 Invalidation 처리하여 모든 Cache를 제거하여 처리할 수 있다.

참고자료: https://velog.io/@_junukim/CloudFront로-React앱-배포하기-2