AWS S3 정적 사이트 변경 후 바로 적용하는 방법

AWS S3로 정적 웹사이트를 호스팅할 때, 파일을 업데이트한 후 사이트에 바로 반영되지 않는 경우가 많아요. 이는 브라우저 캐시나 CloudFront 캐시 때문입니다. 특히 CloudFront(CDN)를 사용하면 엣지 서버에 캐시가 저장되어 변경 사항이 즉시 보이지 않을 수 있어요.

아래에서 상황별로 바로 적용하는 방법을 정리했어요.

1. CloudFront를 사용하지 않고 S3 정적 호스팅만 사용하는 경우

• S3 버킷에 파일을 업로드하거나 교체하면 즉시 반영됩니다. (S3 자체는 캐시를 강제하지 않음)
• 하지만 브라우저 캐시 때문에 오래된 버전이 보일 수 있어요.
• 해결 방법:
  • 브라우저에서 **새로고침(Ctrl + F5 또는 Shift + F5)**으로 강제 리로드.
  • 시크릿 모드(Incognito)로 확인.
  • 파일 업로드 시 메타데이터에 Cache-Control: no-cache 헤더를 추가하면 브라우저 캐시를 최소화할 수 있어요.

2. CloudFront를 사용하는 경우 (대부분의 실전 환경)

CloudFront는 기본적으로 24시간 동안 캐시를 유지하므로, S3에 새 파일을 올려도 CloudFront 엣지 캐시가 오래된 파일을 제공합니다.

가장 간단하고 효과적인 방법: CloudFront 캐시 무효화(Invalidation)

• AWS 콘솔에서 CloudFront 배포(Distribution)로 이동.
• 해당 배포 선택 → Invalidations 탭 → Create Invalidation 클릭.
• Object Paths에 입력:
  • 전체 사이트 무효화: /* (가장 흔함) => 제일 쉬운 방법.
  • 특정 파일만: /index.html 또는 /images/*
  • 루트 페이지(index.html)만: / (때때로 /index.html 대신 이게 필요함)
• 생성 후 Completed 상태가 될 때까지 기다리세요. (보통 5~15분 소요, 전 세계 엣지 서버에 적용됨)
• 완료 후 사이트 확인 → 변경 사항 바로 적용!

주의: 매달 1,000개 경로까지 무료, 초과 시 유료. /* 하나로 전체 무효화 가능하니 비용 걱정 적어요.

AWS CLI로 무효화 (자동화 추천)

 

aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/*"

• 배포 ID는 콘솔에서 확인 가능.

장기적인 해결: 파일 버전닝(Versioning)

• 파일 이름에 해시나 버전 추가 (e.g., main.v123.css → main.v456.css)
• 대부분의 빌드 도구(React, Vue, Next.js 등)가 자동으로 해시 파일 생성함.
• HTML 파일(index.html)은 무효화 필요하지만, 자산 파일(CSS/JS/이미지)은 새 이름으로 업로드되므로 자동 즉시 적용.
• 베스트 프랙티스: 무효화는 최소화하고 버전닝 위주로!

기타 팁

• 업로드 시 --cache-control max-age=0 옵션으로 S3 파일 헤더 설정 (브라우저 캐시 방지).

  aws s3 sync . s3://your-bucket --cache-control max-age=0

• CloudFront 캐시 정책에서 Minimum TTL을 0으로 설정하면 자주 체크하지만, 비용 증가 주의.

이 방법들로 대부분의 경우 바로 적용할 수 있어요. CloudFront 쓰는 게 성능 좋으니 무효화만 잘 활용하세요! 😊

 

팁

Root에 index.html이 수정된경우 /index.html로 하면 적용이 안됩니다. 필히 /*로 해줘야 적용이 되니 참고하세요.