[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fdevlog-juneby.vercel.app%2Fposts%2FWeb%2Fnginx-http-cache&count_bg=%233B82F6&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=views&edge_flat=false)](https://hits.seeyoufarm.com)

# 🌟배경 네이버 부스트캠프 팀프로젝트인 `fanup`의 클라이언트는 `React`를 이용해 만들어졌으며, `Webpack`을 이용해 빌드됩니다. 그 후, 빌드를 통해 만들어진 static 파일들(index.html, js, css, image ….)들을 `Nginx`를 통해 서빙하는 형태입니다. 아래를 보면, `Nginx`에서는 기본 `HTTP Cache-Control` 설정은 `no-cache`로 해놓은 것을 확인 할 수 있습니다.

`no-cache` 설정의 경우에는 다음과 같은 의미를 가집니다. → cache-control : no-cache - 데이터를 캐시해도 되지만, 항상 `origin` 서버에 검증(Last-Modified, ETag)하는 과정을 거쳐라 - `origin` 서버에서 데이터를 가져오지는 않지만? **검증을 위한 요청**을 보내야 한다
추가적으로, 크롬의 `LightHouse`를 이용한 성능 측정에서도, 효율적인 캐시 정책을 사용하여 정적인 에셋 제공을 권장하고 있습니다.

`Webpack`을 이용해, 빌드 되는 서비스는 `js`, `css` 파일의 내용이 변하게 된다면, 빌드과정에서 파일의 이름이 바뀌게 됩니다. (ex, `chunk.1234.js` → `chunk.513dfrer.js`) 위 캡처에서 불러오는 js 파일의 이름은 `main.f42c0b67.js` 입니다. `main` 뒤에 붙는 `f42c0b67` 는 js 파일의 내용을 빌드하는 과정에서 **해당 파일의 내용을 hash 하는 과정을 통해 나오는 값**입니다. > 다시 말해서, 파일의 내용이 바뀌면, main 뒤에 붙는 값이 바뀌고, 파일의 이름이 바뀌게 됩니다. 따라서, 빌드를 통해 만들어진, `index.html`에서 요청하는 js 파일의 이름도 함께 변하게 됩니다. ```html title="AS-IS"

Nginx에서 HTTP Cache 적용하기