CloudFront와 브라우저 캐시 재설계로 일일 전송량 43.6% 감축
솔루션을 더 붙이기 전에 요청 흐름부터 읽었다. 캐시 키와 무효화 정책을 리소스 특성에 맞추고, Service Worker로 반복 요청을 네트워크에서 걷어냈다.
- CloudFront
- Service Worker
- Web Cache API
- React
- TypeScript
제원
- 소속
- 넛지헬스케어
- 기간
- 2024
- 대상
- 웹서비스 정적 자원 전송 경로
- 비교 조건
- 적용 전후 유사한 트래픽 수준에서 측정
- 역할
- 요청 흐름 분석 · 캐시 정책 설계 · 구현 · 효과 검증
배경
웹서비스의 네트워크 사용량과 CDN 비용이 높았다. 비용 항목만 보면 트래픽이 늘어서인지, 같은 자원을 반복해서 보내고 있어서인지 구분되지 않았다.
새 솔루션을 얹기 전에 요청 흐름과 캐시 동작을 먼저 확인했다. 같은 정적 자원이 반복 요청되는 구간이 있었고, 캐시 키가 리소스의 실제 변경 빈도와 맞지 않았다.
수행
CloudFront의 캐시 구조를 분석했다. 어떤 요청이 엣지에서 적중하고 어떤 요청이 오리진까지 내려가는지 구분했다.
리소스의 특성과 변경 빈도에 따라 캐시 키와 무효화 정책을 조정했다. 거의 바뀌지 않는 자원과 배포마다 바뀌는 자원의 정책을 분리했다.
Service Worker를 적용하고 Web Cache API로 브라우저 측 캐시를 구성했다. 반복 요청되는 리소스가 매번 네트워크를 타지 않도록 만들었다.
배포 후 같은 지표를 다시 측정했다. 비슷한 트래픽 수준에서 일일 네트워크 전송량과 egress 비용을 적용 전과 비교했다.
시스템
두 단계를 추가한 것이 아니라, 요청이 더 일찍 멈추게 만들었다.
브라우저 요청은 먼저 Service Worker 캐시를 만난다. 적중하면 네트워크로 나가지 않는다. 미스일 때만 CloudFront로 가고, 엣지에서도 미스일 때만 오리진에 도달한다.
측정
이전: 417 GB/day이후: 235 GB/day−43.6%
하루 182 GB 감소. 유사한 트래픽 수준에서 비교.
−30%+
전송량 감소가 그대로 청구 항목에서 확인됐다.
직접 움직여 보기
캐시 적중률을 올리면 요청이 더 일찍 멈춘다. 오리진까지 내려간 요청만 전송량으로 청구된다.
235GB/day
56%
417 GB/day와 235 GB/day는 실제 측정값이다. 두 지점 사이는 설명을 위한 선형 모델이며 실제 청구서가 아니다.
역할 경계
- 이 프로젝트의 수치는 정적 자원 전송 경로의 것이다. 같은 계정에서 운영한 이미지 전송 인프라의 규모 수치(04번)와는 다른 지표이며, 합산하지 않는다.
- 오리진 서버의 애플리케이션 로직은 변경 대상이 아니었다.