[React] S3와 CloudFront로 배포한 웹사이트에서 서브라우트로 접속할 때 바로 접속이 안되는 문제

[Yumin22224]

현재 배포와 관련해서 제대로 알고 있는 것은 아니지만, 지난 과제들 및 현재 과제는 세미나1의 배포 메뉴얼에 따라 AWS에서 S3와 CloudFront를 사용하여 웹사이트를 배포해야 하는 것으로 알고 있습니다.
다만, 이후 과제를 진행하면서 리액트 라우터(react-router-dom) 라이브러리를 이용해 여러 페이지를 만든 후 빌드하여 다시 배포하였을 때, 처음부터 서브라우트(ex. /snacks)페이지로 접속할 경우

다음과 같은 문제가 발생하고 있습니다.

어떻게 하면 해결할 수 있을지, 제가 어떤 부분을 놓치고 있는지 궁금하고 도움이 필요하여 디스커션 올립니다. 항상 감사드립니다!!

[woohm402]

S3은 경로에 파일을 저장해두는 저장소이고, cloudfront는 S3의 파일을 좀더 빠르게 전달해주는 장치일 뿐입니다. cloudfront 를 통해 domain.com/snacks 로 접속한다면, cloudfront 는 S3 버킷에 있는 snacks 라는 파일을 요청하고 S3이 주는 응답을 그대로 반환합니다.
이때 당연히 S3에 snacks 라는 파일이 없으니 S3은 403 페이지를 반환하고, cloudfront 역시 403 페이지를 받았으니 그대로 반환해줍니다.

👇 이런 상황입니다.

sequenceDiagram
    Browser->>+CloudFront: `/snacks` 줘
    CloudFront->>+S3: `/snacks` 줘
    S3-->>-CloudFront: 그런 거 없는데? 403
    CloudFront-->>-Browser: 그런 거 없대 403

Loading

---

가장 일반적인 해결방법은 cloudfront에게 "403을 받았으면 무시하고 S3에서 index.html을 찾아서 반환해" 라고 알려주는 것입니다.

즉 이렇게 설정해줍니다. 👇

sequenceDiagram
    Browser->>+CloudFront: `/snacks` 줘
    CloudFront->>+S3: `/snacks` 줘
    S3-->>-CloudFront: 그런 거 없는데? 403
    CloudFront-->>-Browser: (문제없는 척 하면서) index.html 반환

Loading

---

설정 방식은 구글링해보니 이 글이 제일 잘 설명해주는 것 같아요. 참고해서 설정해주세요! 클라우드프론트에서 오류 페이지 403 이면 index.html 200 요거만 해주면 됩니다

당연히 설정한 후 반영되는 데에 시간이 좀 걸리므로 캐시 무효화를 해 주고 30초 정도 기다리면 반영돼있을거예요!