[AWS] S3 정적 호스팅 페이지 새로고침 시 404 NoSuchKey 에러가 발생하는 이슈

Jinny·2023년 7월 21일
2

Trouble Shooting

목록 보기
2/8

S3 정적 호스팅 페이지 새로고침 시 404 NoSuchKey 에러가 발생하는 이슈

상황

  • 팀 프로젝트를 진행하면서 리액트 서버는 S3, API 서버는 EC2로 배포 진행
  • 로그인 이후 진입한 페이지에서 새로 고침하면 404 NoSuchKey 에러 발생

원인

  • S3 도메인은 index.html 과 매핑되어 있음
  • 로그인 이후 진입한 페이지 url은 http://{도메인}/main 과 매핑
  • http://{도메인}/main 과 매핑된 리소스가 없기 때문에 에러 발생

🤔 그렇다면 왜 로그인 이후 에러가 발생하지 않았을까?

  • React는 페이지 이동 시 새로운 url로 이동 후 화면을 새로 고침하는 것이 아닌 현재 페이지에서 렌더링을 재진행하는 방식
  • 따라서 http://{도메인}/에서 로그인 이후 http://{도메인}/main으로 이동할 때 실제로 url이 리다이렉트된 것이 아니라 http://{도메인}/에 원래 매핑되어 있던 index.html 파일에서 화면만 다시 랜더링되어서 에러가 발생하지 않은 것으로 추측됨

해결

  • AWS S3에서 S3에서 발생한 에러를 특정 리소스와 매핑할 수 있는 기능 제공
  • 에러 페이지도 index.html로 지정하여 새로고침 해서 에러가 발생하면 index.html로 연결되게 설정


profile
블로그 이사갔어요. https://jinny-l.tistory.com/

0개의 댓글