[AWS]Cloudfront에서 이미지 캐싱하기

우테코에서 웹 성능 개선에 대한 수업을 듣고 놀토 서비스의 성능을 개선하기 위해 웹 페이지 테스트를 돌려봤습니다.

https://www.webpagetest.org/

WebPageTest - Website Performance and Optimization Test

성능 테스트를 돌렸더니 F가 2개.. 보안과 캐시에서 F를 받았습니다.

보안도 문제지만 캐싱도 필요해보입니다.

이미지는 동적인 자원이 아니라 정적 자원이라서 정말 오랫동안 캐싱해도 괜찮습니다.

그렇다면 Cloudfront에서 이미지 캐싱을 어떻게 하면 될까요?

S3에서 가져온 객체(이미지)를 Cloudfront에서 캐시하는 기간을 지정해줍니다.

캐시하는 기간을 지정하는 방법은 Cache-Control 이라는 헤더에 있습니다.

Cache-Control 헤더는 S3에서 Cloudfront에 객체를 보낼 때 헤더에 함께 보냅니다.

 

즉 S3가 내가 지금 보내준 객체에 대해서는 Cache-Control에 있는 시간만큼 요청을 보내지 말고 Cloudfront한테 가지고 있어라고 하는 것입니다.

 

Cache-Control 헤더는 응답을 캐시할 수 있는 사용자(public, private), 캐시 기간(max-age=xxx)을 설정할 수 있습니다.

Cache-Control의 헤더값으로 max-age=60을 주면 60초 동안 캐싱을 한다는 의미입니다.

Cache-Control는 웹 컨텐츠의 캐시 정책을 컨트롤 합니다.

 

그럼 S3와 Cloudfront에서 캐시 설정을 해보겠습니다.

 

아래 화면은 S3 버킷입니다.

캐시할 이미지 객체에 메타데이터 편집을 누릅니다.

S3 버킷

아래와 같이 메타데이터의 키에 Cache-Control을 추가하고 값에 원하는 설정값을 넣어줍니다.

여기서는 public 접근을 허용하고, max-age를 864000 즉 10일간 캐시하도록 했습니다.

max-age의 단위는 초(s)입니다.

S3 객체에 Cache-Control 헤더 설정

여기까지 하면 S3 객체에 대한 설정은 끝입니다.

다음은 Cloudfront 설정입니다.

Cloudfront의 동작 탭에 가서 동작 생성을 눌러줍니다.

Cloudfront 설정

여러가지 설정이 있지만 캐싱에 관련된 부분만 설정하겠습니다.

경로 패턴 같은 경우는 기본값(*)으로 했을 때 모든 url 요청에 대한 설정입니다. /*.png같이 특정 확장자에 패턴을 지정해서 동작을 설정할 수 있습니다.

원본 및 원본 그룹 같은 경우는 S3 버킷을 선택해주시면 됩니다.

다음은 캐싱과 직접적으로 관련된 설정입니다.

Cache policy and origin request policy 는 캐시 정책을 등록해서 사용할 수 있습니다.

Legact cache settings 는 AWS 자체에서 캐시 정책이란 객체를 사용하기 전에 쓰던 캐시 설정입니다.

여기서는 Cache policy and origin request policy를 사용하겠습니다.

 

먼저 정책을 생성합니다. (CachingOptimized 라는 기본 캐시 정책도 있습니다)

캐시 정책의 이름과 TTL 설정을 합니다.

최소 TTL은 Cache-Control의 max-age값이 최소 TTL보다 작을 때 적용되는 값입니다.

ex. 최소 TTL이 10초이고 max-age값이 5초라면  캐싱되는 시간은 10초입니다.

 

최소 TTL은 Cache-Control의 max-age값이 최소 TTL보다 클 때 적용되는 값입니다.

ex. 최소 TTL이 50초이고 max-age값이 100초라면  캐싱되는 시간은 50초입니다.

 

기본 TTL은 Cache-Control 헤더가 없을 때 적용되는 캐싱 시간입니다.

만약 캐싱을 사용하고싶지 않다면 3개의 TTL 설정값을 0으로 설정하면 됩니다.

여기까지 했다면 모든 설정이 끝났습니다.

이제 잘 적용됐는지 확인하면 됩니다.

응답 헤더를 보면 max-age=864000으로 잘 적용된 모습을 볼 수 있습니다.

그런데 헷갈리는 부분이 있습니다.

Status Code 오른쪽에 (from memory cache)라는 문장이 보입니다.

이것은 브라우저가 캐싱을 했다는 것입니다.

그럼 의문이 생길 수 있습니다. "엥? Cloudfront가 캐싱하고 있는거 아니었어?" 라고 말입니다.

정답은 Cloudfront와 클라이언트 브라우저 둘다 캐싱을 합니다.

S3는 Cloudfront에게 객체를 캐싱하도록 넘기고 Cloudfront는 캐싱하는 시간동안 요청이 오는 클라이언트 브라우저에게 캐싱을 하도록 합니다. 즉 Cloudfront에게 여러 클라이언트 브라우저가 접근할 텐데 그런 브라우저에게 모두 캐시를 하도록 합니다.