[Trouble Shooting] CloudFront + S3 정적 사이트 호스팅 새로고침 403 오류

에러

• 정적 사이트를 S3 + CloudFront로 배포 후, /mypage/, /signup/ 등 특정 경로에서 새로고침 시 오류 발생:

  This XML file does not appear to have any style information associated with it.
  <Error>
    <Code>AccessDenied</Code>
    <Message>Access Denied</Message>
  </Error>

• 브라우저 콘솔에도 403 Forbidden 표시:

  GET https://www.match-fit.store/signup/ 403 (Forbidden)
  GET https://www.match-fit.store/favicon.ico 403 (Forbidden)

---

원인

REST 엔드포인트 한계

• CloudFront 원본으로 설정된 도메인:

  matchfit-cloudfront.s3.ap-northeast-2.amazonaws.com

• 이는 S3 REST 엔드포인트이며, /mypage/ 같은 디렉토리 경로를 자동으로 mypage/index.html 로 매핑하지 않음
  * CloudFront가 S3 REST 엔드포인트(.s3.ap-northeast-2.amazonaws.com)를 바라보고 있어서, /mypage/ 같은 폴더 경로 요청을 index.html로 자동 매핑하지 못함. 그 결과 S3가 해당 객체를 찾지 못하고 AccessDenied(403)를 반환

• 따라서 실제 객체가 존재해도(예: mypage/index.html), /mypage/ 요청은 AccessDenied(403) 발생.

---

해결

CloudFront Function으로 URI Rewrite

• CloudFront Function을 사용해 /path/ 요청을 /path/index.html 로 rewrite 처리
• 함수는 Viewer Request 이벤트에 연결하여, 클라이언트 요청 시 가장 먼저 실행되도록 구성

• url-rewrite 함수

function handler(event) {
    var request = event.request;
    var uri = request.uri;
    
    // 슬래시로 끝나는 경로에 index.html 추가
    if (uri.endsWith('/') && uri !== '/') {
        request.uri = uri + 'index.html';
    }
    // 확장자가 없는 경로에도 처리
    else if (!uri.includes('.') && uri !== '/') {
        request.uri = uri + '/index.html';
    }
    
    return request;
}

• /signup/ → /signup/index.html
• /signup → /signup/index.html
• / (루트) → 기본 root object index.html 그대로

---