캐시 정보는 브라우저 > 개발자 도구 >네트워크 탭을 열어보면 볼수 있다. Cache-Control 정보가 보이지 않는다면 아래와 같이 설정 해주면 된다.
빨간색 영역에서 마우스 오른쪽 버튼 클릭.
위와 같이 Cache-Control 메뉴를 선택하면 캐시 정보가 보인다.
아래 이미지와 같이 캐시 정보가 나타난다.
캐시는 max-age=2592000 로 강제로 캐시를 제거 하지 않거나 서버 업데이트가 일어나지 않는다면 30일 동안 캐시 정보를 사용하도록 되어 있다.
새로고침 하면 캐시 설정에 따라 memory/ disk 캐시를 사용하고 속도는 0ms 부터 훨씬 빠른것을 볼 수 있다.
정적 웹 사이트 호스팅을 할때 S3, Cloudfront 와 같은 서비스를 자주 이용하게 되는데 어느 한 곳에서의 캐시 설정 만으로 모든 캐시 정책이 동일하게 반영되지 않는다.
경험해 볼수 있는 사례 중 하나로 배포된 웹 서비스에 수정 사항을 반영해서 다시 배포 하였을 경우 수정 사항이 즉시 반영되지 않는 경우가 있다. 이러한 경우 캐시 설정을 의도하는 상황에 맞게 변경해 주어야 한다.
Cloudfront
Distributions > Behaviors 메뉴를 확인해 보자.
아무 설정을 하지 않았을 경우 위와 같이 기본 값으로 모든 파일 경로에 대하여 해당 값으로 설정으로 되어 있다는 뜻이다. 해당 목록 선택 후 Edit 버튼을 통해서 설정 내용을 확인해 보자
Cache and Origin request settings 값에 따라서 Origin request policy에 따르거나 사용자 임의로 설정을 다르게 줄 수 있다.
Origin request policy 내용은 Cache Policy > View policy details 에서 기본으로 제공된 값을 사용할 수도 있고 새로운 내용을 추가해서 사용할 수도 있다.
Object Caching 에서 Customize 메뉴를 사용해서 직접 캐시 타임(TTL)을 조절 할수 있다.
브라우저에서 Cloudfront 로 요청이 들어오면 해당 파일을 전송하게 되는데, Cloudfront와 연동 되어 있는 S3에서 변경된 파일이 업로드 되어도 캐시 시간이 남아 있다면 변경 사항이 즉시 반영되지 않는다. 이때 객체 무효화를 통해서 캐시 정책을 무시하고 새로운 내용을 반영 할수 있다.
객체 무효화 (Invalidations)
CloudFront Distributions > Invalidations 에서 객체 무효화가 필요한 경로를 추가해주면 된다.
Cli
aws cloudfront create-invalidation --distribution-id ${Cloudfront_distributions_ID} --paths "/*"
