원인
React는 SPA (Single Page Application) + CSR (Client Side Rendering) 방식으로 동작합니다.
초기 접속 시
1. index.html 하나만 다운로드
2. react-router-dom을 통해 URL에 맞는 컴포넌트를 클라이언트에서 렌더링
이때, BrowserRouter는 historyAPI를 사용하기 때문에 서버에는 기본 루트인 /만 존재하고,나머지 하위 경로(/my-page 등)는 클라이언트에서만 처리됩니다.
정상 동작
페이지 이동: / → /my-page 이동 시 컴포넌트 렌더링
→ 새로 index.html을 요청하지 않기 때문에 문제 없음.
문제 발생
새로고침: /my-page 상태에서 새로고침 시
→ 브라우저가 서버(S3)에 /my-page 파일을 직접 요청.
→ S3에는 해당 파일이 없으므로 403 (Access Denied) 에러 발생!
- 원인 요약
React SPA는 index.html 하나로 모든 페이지를 렌더링하기 때문에,S3에서 /my-page라는 정적 파일을 찾으려 하면 파일이 없어 에러가 나는 것!
해결 방법
S3 설정을 통해 모든 경로를 index.html로 리다이렉트하게 하면 해결됩니다.
S3 설정 방법
- S3 콘솔 접속 → 버킷 선택 → [속성] 이동
- 정적 웹사이트 호스팅 수정
- 기본 문서 → index.html
- 오류 문서 → index.html
- 저장 후 배포
이렇게 설정하면, 새로고침으로 서버에 없는 경로(/my-page, /about, ...) 요청이 와도 S3가 항상 index.html을 내려주고 React가 해당 URL에 맞는 컴포넌트를 렌더링하게 됩니다!
정리
SPA + CSR은 클라이언트에서 라우팅을 처리.
S3는 정적 파일 서버라 실제 파일이 없으면 에러 발생.
모든 경로 요청을 index.html로 리다이렉트하면 문제 해결!
