이번 이슈를 통해 AWS에 대해 깊이 공부하며 앞으로 어지간한 AWS 이슈는 모두 대응이 가능할것이다!
라는 마음으로 하는 공부가 아닌 하나하나씩 이슈가 발생할 때 원인에 대해 얕게 이해하고 기억하며 한조각씩 퍼즐을 맞추어 나간다는 느낌의 포스팅
상황
기존에 이미 정적 웹페이지를 제작하여 cloudfront를 이용하여 배포를 마친 상태 허나 스타일링에서 오류가 발견되었고 급하게 수정하여 재배포를 하였음.
- 처음 페이지를 들어갔을 땐 올바르게 수정된 페이지가 렌더링 됨.
- 새로고침 시 수정 이전의 잘못된 페이지가 렌더링 됨.
- 위는 크롬브라우저이고 사파리 브라우저의 경우는 처음부터 수정된 페이지가 보이지 않음.
원인
Amazon CloudFront는 HTML, CSS, Javascript, 이미지 등의 정적인 콘텐츠 유저에게 더 빨리 배표하기 위해 지원하는 웹 서비스이다.
간단히 설명하자면 처음 데이터(정적 콘텐츠)를 요청할 땐 오리진(ex. Amazon S3 버킷)에서 데이터들을 가져오지만 한번 가져온 데이터들은 나의 지역을 담당하는 엣지로케이션에 캐싱되어 이후에 같은 데이터를 요청할 때 에는 오리진까지 갈 필요 없이 엣지로케이션에서 데이터를 제공해주는 것이다.
하여 처음 페이지를 렌더링할 땐 수정된 페이지(오리진에있는)가 보였던 것이고
이후 새로고침을 통해 같은 데이터를 요청할 땐 엣지 로케이션에 있는 수정전의 캐싱된 정적 페이지가 렌더링 되었던 것이다.
캐싱은 일정한 주기를 가지고 이루어 지기 때문에 내가 반영한 수정사항이 바로 엣지로케이션에 캐싱되진 않는다.
해결 방안
AWS 홈페이지에 들어가서 해당 캐시 클리어
의문점
추후 다시 공부해야할 사항
아니 근데 왜 크롬에서는 처음에는 멀쩡한게 나오고 사파리에서는 첨부터 수정전것이 나온겨?
이건 나중에 다시 공부해서 정리해놓겠음.
