정적 에셋 관리: 캐시 버스팅과 CDN 배포

이 글에서는 CSS, JavaScript 및 기타 정적 에셋을 효율적으로 관리하고 배포하는 방법을 설명합니다.

문제점: 정적 에셋 최적화 필요

일반적인 페이지는 다음을 로드합니다:

CSS 파일: 레이아웃과 디자인을 위한 스타일시트
JavaScript 파일: 애플리케이션 코드와 라이브러리
이미지: 제품 이미지, 썸네일, 아이콘
폰트: 타이포그래피를 위한 웹 폰트

최적화 없이는:

느린 다운로드: 큰 파일은 시간이 오래 걸림
캐싱 없음: 방문할 때마다 재다운로드
압축 없음: 대역폭 낭비
CDN 없음: 글로벌 사용자에게 느림

이로 인해 페이지 로드에 3-5초가 걸립니다.

해결책: S3 + CloudFront + 캐시 버스팅

세 가지 전략을 사용합니다:

S3 스토리지: 에셋을 위한 확장 가능한 객체 스토리지
CloudFront CDN: 빠른 배포를 위한 글로벌 엣지 로케이션
캐시 버스팅: 버전 기반 URL로 업데이트 강제

정적 에셋 스토리지

정적 에셋은 S3에 저장됩니다:

S3 버킷: 정적 파일을 위한 객체 스토리지
콘텐츠: CSS, JavaScript, 이미지, 폰트
구조화: 에셋 유형별로 구성

CloudFront 배포

CloudFront가 정적 에셋을 제공합니다:

엣지 로케이션: 빠른 배포를 위한 글로벌 CDN
캐싱: 정적 에셋을 위한 긴 TTL
압축: 텍스트 기반 에셋에 Gzip 적용
SSL/TLS: 모든 에셋 배포에 HTTPS 사용

캐시 버스팅

캐시 버스팅을 위해 버전 관리를 사용합니다:

버전 번호: 파일명에 에셋 버전 포함
매니페스트: 에셋 버전의 중앙 레지스트리
자동 업데이트: 새 버전이 캐시 무효화를 트리거

에셋 최적화

성능을 위해 에셋을 최적화합니다:

최소화: CSS 및 JavaScript 최소화
이미지 최적화: WebP 형식, 반응형 이미지
스프라이트 시트: 아이콘용 CSS 스프라이트
코드 분할: 중요하지 않은 에셋에 지연 로딩

에셋 파이프라인

에셋 파이프라인은 다음 단계를 거칩니다:

소스 에셋: 원본 CSS, JavaScript 및 이미지
최소화: 공백 제거, 변수명 단축
버전 관리: 파일명에 버전 해시 추가
S3 업로드: 객체 스토리지에 저장
CloudFront CDN: 엣지 로케이션에 배포
브라우저 캐시: 클라이언트 측 캐싱

에셋 포함

에셋은 템플릿에 포함됩니다:

CSS: <link rel="stylesheet">
JavaScript: <script src="">
이미지: <img src="">
버전: 매니페스트에서 자동 포함

요약

정적 에셋 관리는 다음을 제공합니다:

S3 스토리지: CSS, JavaScript, 이미지, 폰트
CloudFront CDN: 빠른 글로벌 배포
캐시 버스팅: 업데이트를 위한 버전 번호
최적화: 최소화, 압축, 최적화
자동 업데이트: 버전 관리된 에셋 배포