05/10 SPA 환경에서 CloudFront 403 오류 해결 가이드

SPA 환경에서 CloudFront 403 오류 해결 가이드

1. SPA란?

SPA (Single Page Application) 는 말 그대로 "하나의 HTML 파일로 구성된 웹앱"입니다.

• 프론트엔드는 index.html 하나만 있고
• 나머지 라우팅(/login, /mypage, /oauth-success)은 자바스크립트가 브라우저 안에서 처리합니다.
• 대표적으로 React, Vue, Angular, Vite 기반 프로젝트들이 다 SPA입니다.

⠀🔁 즉, 실제로는 모든 경로가 index.html 하나를 기준으로 동작합니다.

2. 문제의 원인

CloudFront/S3는 "정적 파일 서버"입니다.

• 브라우저가 /oauth-success에 직접 접근하면→ CloudFront는 S3에 oauth-success라는 정적 파일을 찾으려고 합니다.
• 근데 S3에는 그런 파일이 없죠 → 403 또는 404 오류

⠀

3. EC2 환경에서는 왜 문제가 없었을까?

EC2 + Nginx에서는 아래 설정이 있었기 때문입니다:

location / {

try_files $uri /index.html;

}

• 즉, 실제 파일이 없으면 → index.html을 대신 리턴
• React 앱이 그걸 받아서 클라이언트에서 페이지 전환 처리

이것이 바로 SPA가 정상 작동하는 핵심 트릭입니다.

4. CloudFront에서 해결하는 방법

👉 CloudFront에서도 동일한 로직을 설정해주면 문제 해결!

🔧 방법: Custom Error Response 설정

1 AWS 콘솔 → CloudFront → 해당 배포 선택 2 상단 탭 [Error pages] 클릭 3 [Create custom error response] 클릭 4 아래처럼 설정

⠀항목 값 | |:-:|---| | HTTP Error Code | 403 | | Customize Response | Yes | | Response Page Path | /index.html | | HTTP Response Code | 200 |

필요시 404도 같은 방식으로 추가

결과

5. 요청 흐름 비교

경로	원래 동작 (403)	변경 후 동작 (200 + index.html)
/oauth-success	S3에 없음 → 403	index.html 리턴 → React가 라우팅
/login	404 → 에러	index.html 리턴 → React가 처리

6. 적용 후 캐시 삭제 (중요!)

CloudFront는 이전 오류 응답을 캐시할 수 있으므로, Invalidation 해주세요:

aws cloudfront create-invalidation \

--distribution-id YOUR_DIST_ID \

--paths "/*"

요약

항목	설명
왜 에러가 났나?	SPA는 경로를 프론트에서 처리하는데, CloudFront는 파일을 찾으려 해서 403
EC2에서는 왜 괜찮았나?	try_files 설정으로 index.html을 항상 리턴했기 때문
해결법은?	CloudFront에서 403(또는 404)일 때 index.html을 대신 리턴하도록 설정
언제 적용되나?	설정 후 수 분 내 반영되며, Invalidation으로 즉시 확인 가능

필요하시면 해당 설정을 Terraform, AWS CLI, 콘솔 순서대로 정리해서 드릴 수 있어요.적용 도와드릴까요?