CloudFront와 S3 버킷에 없는 객체 불러올 때 오류(index.html, SPA)

CloudFront에 원본으로 S3와 ALB를 지정할 수 있다.

보통 프론트엔드는 S3, 백엔드는 ALB 이런 식으로 지정하는데, 프론트엔드 첫페이지로 index.html을 사용한다

예를 들어 example.com 도메인에 접속하면 example.com/login으로 가게끔 코드단에 설정되어 있다.

근데 cloudfront 입장에서 /login이라는 객체는 s3에 없어서 403 에러가 뜸

 

이 403 응답을 제어하기 위해서 보통 cloudfront의 오류 페이지 기능을 사용함.

 

 

S3에 저장된 index.html 모습

 

CloudFront의 동작에 s3와 alb가 지정된 모습

 

 

오류 페이지 기능을 이용해서 403이 뜨면 index.html 파일로 들어가게끔 설정해둔다.

이렇게 해야만 example.com 도메인에 들어갔을 때 index.html 파일에 접근되며 프론트 페이지가 잘 보이게된다.

 

 

근데 문제

코드 단에서 403 응답이 오면 토큰 refesh 처리가 되는 기능이 있었음 ..

즉, 403을 자동으로 200 코드 뜨게 하면 이 토큰 refresh 기능이 아무 의미 없어지는 것이다

 

오류 페이지를 없애자니 403 에러가 뜨고, 403 에러를 해결하자니 토큰 기능을 할 수 없는 문제가 발생 ..!

 

 

그래서 할 수 있는 것 : cloudfront edge function에서 default(*)일 경우 함수를 호출하게 설정하는 것이다.

즉, 동작 중 S3와 연결된 동작에 함수를 쓸 수 있게 하는 것

 

 

함수는 cloudfront > 함수에서 만들 수 있다. 만들어서 게시, 배포하면 끝

function handler(event) {
    var request = event.request;
    var uri = request.uri;

    // 확장자가 없는 SPA 라우트 → index.html로 rewrite
    if (!uri.includes(".")) {
        request.uri = "/index.html";
    }

    return request;
}

 

 

CloudFront Edge Function을 활용하면 응답 코드와 S3에 없는 객체를 불러오는 오류 코드도 해결이 가능하다!

 

 

CloudFront의 오류 페이지 말고, Edge Function도 써보자

 

끗