EC2에 배포한 React가 사용자에게 항상 최신이 보이도록 설정하기

그동안 리액트 프로젝트는 S3에 정적 빌드파일을 올려두고 Route53+CloudFront를 사용해서 배포했었다.

 

그래서 새롭게 빌드한것으로 배포해도 사용자들은 edge에 분산된 캐싱파일들로 접근이 되어 바로 적용이 되지 않기 때문에 캐시 무효화를 진행하여 사용자로 하여금 항상 배포된 최신 화면을 보게 만든다.

 

하지만 이번에 진행했던 사이드 프로젝트는 EC2 프리티어를 활용해서 최대한 비용없이 배포까지 하는 전략을 선택했다.

 

그 결과 다음과 같은 문제가 발생한다는 것을 알 수 있었다.

 

"변경점을 적용하여 빌드 후 배포해도 사용자가 최초 우리 사이트에 접근하면 구 버전을 바라보게 되고 새로고침을 해야만 새로운 페이지를 보게 된다."

 

그 이유는 다음과 같았다.

 

브라우저는 사용자가 URL을 통해 접근을 하면 가능한 서버 요청을 보내지 않고 캐싱된 파일을 보여주어 빠르게 화면을 보여주고자 한다.

 

하지만 새로고침을 하고 나면 새로운 자료를 재요청하게 되고 그 결과 드디어 배포된 페이지가 보이게 되는 것이였다.

 

이것을 해결하기 위해 배포시 사용했던 nginx.conf 파일 내부에 다음과 같은 코드를 추가해줘야 했다.

 

location ~* \.html?$ {
    expires -1;
    add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0";
}

 

이렇게 하면 다음과 같은 동작을 한다.

• 첫 방문도 HTML을 캐시에서 꺼내지 않고
• 매번 서버에서 최신 HTML 로딩
• HTML 안의 script 경로도 최신
• JS 번들 캐시는 hash가 달라 자동 업데이트

즉 브라우저는 html을 절대 캐시하지 않는다.

 

하지만 js, css, 이미지파일같은 경우 vite로 빌드하면 파일명 뒤에 해시값을 붙인다.

 

ex) 예시

index.js → index-abc123.js
index.js → index-xyz456.js (새 빌드)

 

브라우저는 다음 규칙으로 행동한다:

• 파일명이 같으면 → 캐시를 사용
• 파일명이 바뀌면 → 새로운 파일을 서버에서 다운로드

그래서 JS/CSS는 항상 새로 받지 않는다

하지만 새 빌드하면 파일명(hash)이 무조건 바뀌므로 새 파일을 다운로드한다.

 

즉, SPA가 옛날 JS 파일을 로딩하는 문제는 HTML만 새로 받아오면 자동 해결된다.