cloudfront에 일괄 cache-control 적용하기

s3에 파일을 저장할때 Cache-Control 메타정보를 지정하지 않으면

 

저장된 s3 객체가 cloudfront를 통해 서빙될때 해당 리소스에는 Cache-Control 헤더가 응답되지 않습니다

 

Etag나 Last-Modified 헤더는 자동으로 응답되긴 하지만 이 값으로는 여전히 브라우저의 캐시정책에 의존적일수밖에 없습니다

 

 

보다 명시적으로 cache-control : max-age를 지정하기 위해서는 s3 에 오브젝트를 저장할때 메타 정보를 포함시켜야하는데요

 

저장할때마다 cache-control을 지정하지 않는 방법을 사용하지 않더라도

 

이방법 말고도 다른 방법이 있습니다

 

바로 cloudfront function을 이용하여 cloudfront로 요청된 응답 헤더에 헤더를 바로 추가하는 방법입니다

 

https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/example-function-add-cache-control-header.html

응답에 Cache-Control 헤더 추가 - Amazon CloudFront

 

 

aws의 cloudfront 콘솔에 접근하시면

 

왼쪽에 함수라는 메뉴가 있습니다

 

 

바로 이 메뉴를 이용해서 함수를 생성할수 있는데요

 

여기서 cloudfront에 요청/응답할때 인터셉터나 미들웨어의 역할을 하는 함수를 생성할수 있습니다

async function handler(event) {
    const response = event.response;
    const headers = response.headers;
    
    // Set the cache-control header
     headers['cache-control'] = {value: 'public, max-age=63072000'};
        
    // Return response to viewers
    return response;
}

 

 

위의 함수는 cache-control에 max-age=2년을 설정하는 헤더응답값을 설정합니다

 

 

 

함수를 만든뒤에 cloudfront에 응답에 사용할 함수로 연결을 하면 됩니다