페이지 새로고침 시 403 Access Denied 에러 발생하는 문제 해결하기
이전에 온라인 보드게임을 배포한 적이 있다.
CI/CD를 포함한 배포가 성공적으로 이루어진 것을 확인했는데, root가 아닌 URL (ex. /tutorial )과 같은 URL로 직접 접속하거나 새로고침하면 403 Access Denied error가 발생했다.
로컬에서 개발할 때는 문제가 없었는데,
이러한 문제가 생긴 것으로 보아 AWS CloudFront 설정에 문제가 분명하다! 라고 바로 추론이 가능하지는 않았고,
ClaudeCode에게 물어보니 S3/CloudFront 설정 문제라고 알려주었다.
구체적으로는, SPA(Single Page Application)에서 클라이언트 사이드 라우팅을 사용하는데, 서버에서 /tutorial 경로에 대한 파일을 찾지 못해서 발생하는 문제이다.
그러면 어떻게 해결해야할까?
CloudFront에서 커스텀 에러 응답을 설정해야 한다.
"사용자 정의 오류 응답 생성"을 누른다.
위와 같이 커스텀 에러 응답을 설정한다.
- HTTP Error Code : 404
- Customize error response : Yes
- Response page path :
/index.html - HTTP Response code : 200
403에도 동일하게 설정한다.
| 상황 | 에러 코드 |
|---|---|
| 파일 없음 + 퍼블릭 액세스 차단 | 403 Access Denied |
| 파일 없음 + 퍼블릭 읽기 허용 | 404 Not Found |
CloudFront + S3 조합에서 보통 OAI(Origin Access Identity) 또는 **OAC(Origin Access Control)**를 사용해서 S3를 비공개로 유지한다.
이 경우:
/tutorial 요청 → S3에서 파일 못 찾음 → 403 반환
에 해당하는 오류를 반환한다.
하지만 S3 설정이 변경되거나, 다른 환경에서는 404가 반환될 수 있어서 둘 다 설정하는 것이 안전하다.
이제 새로고침을 해도 403/404 에러가 발생하지 않고 SPA 라우팅이 정상 동작하는 것을 확인할 수 있다.