AWS 빌드 시 CloudFront 캐싱 이슈

AWS CloudFront을 초기에 구축하는 분이라면 누구나 다 겪는 이슈이다.

배포 후에도 이전 캐싱을 바라보고 있는 이유

CloudFront는 CDN 중 하나로, CDN 특성상 캐시 기능을 지원하기 때문이다. CloudFront의 장점 중 하나는 빠른 배포 적용이 가능하다는 것인데, 배포 후에도 이전 화면이 계속 나타난다면 캐싱 관련 문제가 의심된다.

해결 방안

해결 방안은 간단하다.

만약 빌드 시 CodeBuild에서 buildspec.yml으로 아티팩트 구성했다면 빌드 시점에 캐싱 무효화 명령어를 입력해 주기만 하면 된다. buildspec.yml 파일을 사용하지 않았다면 따로 AWS cloudFront 설정에서 캐싱 무효화 아티팩트를 추가해야 한다. 아니면 react-cache-buster 라이브러리를 사용해서 Expries와 max-age 설정으로 무효화 시키는 방법도 있다.


phases:
	...
  post_build:
    commands:
      - aws cloudfront create-invalidation --distribution-id ${CloudFront 배포 ID} --paths "/*"

buildspec.yml

AWS 빌드 시 CloudFront 캐싱 이슈

배포 후에도 이전 캐싱을 바라보고 있는 이유

해결 방안

댓글