🐛 S3 배포 캐싱 오류

⚠️ S3 배포 캐싱 오류

기존 코드에서 깃헙 페이지 배포를 위해 App.tsx에 basename이 설정되어 있었다.

s3 배포를 위해서는 basename을 지우고 배포했어야 했는데, 파일 업로드할 때 포함한 채로 업로드했다.

이 경우 배포된 사이트에서 아무런 화면이 나타나지 않는다.

지우고 다시 업로드를 해도 똑같은 화면이 발생한다.

왜 그럴까?

CloudFront에서 캐싱된 내용이 그대로 보여서 그렇다.

빌드할 때마다 내용이 수정되어도 항상 동일한 파일명으로 생성되고

브라우저는 동일한 파일로 인식하기 때문에 캐싱된 파일을 불러오게 된다.

따라서 이전 배포한 내용이 그대로 보이는 것이다.

이를 해결하기 위해서는 해시값을 부여해주어야 한다.

부여해 줌으로써 이전 파일과 다르다는 것을 알려주는 것이다.

webpack에 hash 추가

우리는 bundle.js와 file-loader, html에 해시값을 추가해 줄 예정이다.

file 이름에 [contenthash]를 붙이면 손쉽게 hash 값을 추가할 수 있다.

이런 식으로 filename에 추가해 주면 빌드 시 아래와 같은 형태로 파일 이름이 변경되어 저장된다.

html의 경우 html webpack plugin 내부에 hash true를 설정해준다.



재 빌드한 파일을 다시 재 업로드 해주면 제대로 뜨는 것을 볼 수 있다.

만약 재 업로드 후에도 내용이 뜨지 않는다면 캐시 비우기 및 강력 새로고침을 해보자.