CloudFront 403 오류

S3나 CloudFront에 리액트 프로젝트를 배포했는데 메인페이지는 잘 나오지만, 하위 라우트로 이동이 안되는 경우가 있다.

원인

원인은 리액트가 SPA(Single Page Application)임에 있다.

CloudFront나 S3는 파일의 경로를 라우트로 인식한다.

그래서 만약 리액트에서 http://test123.com/ 이라면, cloudfront에선 http://test123.com/index.html과 같다.(index.html을 기본 시작페이지로 설정한경우)

하지만 리액트에서 http://test123.com/login과 같은 라우트로 이동하면, CloudFront 리액트 라우트 돔을 활용한 login 페이지로 가는것이아닌, 실제 login 파일을 찾으려고한다.

리액트에서 /login은 새로운파일을 다운받고 페이지를 여는게 아니라, 뷰를 싹다지우고 login 컴포넌트를 다시 그리는 원리이기 때문이다.

그러나, CloudFront 이 SPA 라는 개념을 모르기때문에 login 파일을 찾으려고한다.

해결법

그렇다면 이러한 에러들을 정상적으로 작동하게 연결해야한다.

CloudFront에서 배포-ID-오류 페이지에 들어간다.

여기서 사용자 정의 오류 응답 생성을 들어간다.

그리고 HTTP 오류 코드로 403, 404을 지정하여 다음과 같이 200으로 인식하도록 생성한다.

그리고 /home이나 /login같은 라우트 이동을 해보면 잘 작동할 것이다.

S3 배포에서 403 오류

API가 HTTP여서 CloudFront를 사용못하는 경우도 있을 것이다.

이때는 S3에 리액트 프로젝트를 배포해야한다.

정적 웹 사이트 호스팅에서 오류 문서란을 index.html로 넣어주면 정상적으로 작동한다.