AWS cloudfront 배포 화면이 S3 결과와 다른 이유(feat. 무효화)

S3의 업데이트된 정적 리소스는 최신 상태인데, cloudfront의 배포 결과는 이전 배포 결과인 문제를 겪어보신 적 있으신가요? 저는 최근에 해당 원인을 몰라 새벽 내내 해맸던 경험이 있어 제가 겪었던 어려움을 똑같이 겪고 계신 분들을 위해 해결하는 방법을 기록하려고 합니다!

 

문제

S3와 cloudfront를 성공적으로 연동하고 도메인을 이용하고 있다가, 프로젝트의 업데이트가 필요해서 새로 배포를 진행했습니다. 그런데 S3 정적 리소스는 업데이트된 버전이 잘 나오지만, 실제 도메인이 보여주는 리소스는 업데이트하기 전의 리소스였는데요, 이는 cloudfront로 배포된 S3 정적 리소스들이 AWS 엣지 로케이션에 전송되어 아직 새로 업데이트가 되지 않았기 때문입니다. 이 엣지 로케이션의 캐시는 24시간으로 설정되어 있어 하루가 지나야 다시 S3의 정적 리소스를 받아 캐시로 사용하게 됩니다.

해결방법

저는 이를 해결하기 위해서 엣지로케이션의 캐시를 무효화 갱신 API를 사용하여 초기화시켜주는 방식을 사용했습니다.

 

AWS CloudFront의 캐시 정책에 대한 공식문서를 살펴보면 CloudFront의 캐시 만료 주기는 자동적으로 24시간으로 설정되어 있기 때문에 이러한 TTL을 무시하고 수정된 내용을 캐시에 반영하고 싶을 때 무효화 기능을 사용할 수 있습니다.

 

1. 사용자에 CloudFront 권한 추가

S3에 접속하는 사용자에게 CloudFront 권한을 추가해줍니다.

IAM > 사용자 > 사용자ID 클릭 > 권한 항목 > 권한 추가 까지 따라와 주세요.

직접 정책 연결을 누르고, CloudFrontFullAccess를 추가해줍니다.

2. CloudFront 무효화 설정

CloudFront > 배포된 cloudfront 선택 > 무효화 > 무효화 생성

위 사진처럼 객체 경로에 /*를 넣어주면 무효화가 진행되어 캐시된 리소스를 무효화시킬 수 있습니다.

 

이렇게 수동으로 무효화를 시킬 수 있습니다. 만약 github actions을 통해 배포 프로세스를 설정해놓은 분들은 무효화도 추가로 설정해줄 수 있으니 아래 순서까지 따라와주시면 됩니다.

3. GithubActions 무효화 설정

무효화 설정을 위한 명령은 아래와 같습니다.

aws cloudfront create-invalidation \
--distribution-id ${{ secrets.AWS_CLOUDFRONT_ID}} --paths "/*"

이를 위해 CLOUDFRONT_ID가 필요합니다. cloudfront에서 배포된 id를 가져와주시면됩니다.

해당 키는 프로젝트 깃허브에서 설정해주시면 됩니다.

 

github 접속 > 프로젝트 깃허브 레포지토리 > Settings > Security > Secrets and variables > Actions

저처럼 AWS_CLOUDFRONT_ID 에 복사한 cloudfront id를 넣어주시면 됩니다. 이제 yml 파일로 가볼까요?

 

이미 S3에 빌드된 리소스를 올리는 것까지는 하셨다고 생각하고, 무효화부분만 가져오겠습니다.

- name: CloudFront Invalidation
  run: |
  aws cloudfront create-invalidation \
  --distribution-id ${{ secrets.AWS_CLOUDFRONT_ID}} --paths "/*"

저의 경우 아래처럼 env로 따로 CLOUDFRONT_ID를 저장해서 빌드하면 오류가 나더라구요! 

 

아래 코드때문에 한참을 해맸습니다... ㅜ

- name: CloudFront Invalidation
  env:
       CLOUD_FRONT_ID: ${{ secrets.AWS_CLOUDFRONT_ID}}
  run: |
       aws cloudfront create-invalidation \
         --distribution-id $CLOUD_FRONT_ID --paths "/*"

 

이제 변경사항을 push하면 무효화가 자동으로 될겁니다! 그러면 cloudfront 무효화 페이지에서 해당 결과를 보실 수 있습니다.

참고

https://velog.io/@yevini118/AWS-Cloudfront-%EC%BA%90%EC%8B%9C-%EB%AC%B4%ED%9A%A8%ED%99%94

[AWS] Cloudfront 캐시 무효화

https://kukim.tistory.com/144

GitHub Actions를 활용해 React를 S3, CloudFront를 사용해 배포하기