gzip 압축 설정에 이은 눈물겨운 전송데이터 절감 방식 : 브라우저캐시를 Nginx에서 설정해봤습니다. 서버 측의 자바스크립트/CSS/이미지파일 등 자주 갱신되지 않는 정적 데이터들을 사용자 웹브라우저 측에서 (한 번 다운받았으면 그것을) 일정 기간동안 재사용할 수 있다고 알려주는 것이 브라우저캐시 세팅입니다. 사용자가 웹브라우저에서 강제 갱신(단축키 : Shift+F5)을 시도하면 브라우저캐시를 무시하고 모든 데이터를 다시 받아오겠지만 대부분 일반 갱신(단축키 : F5)을 많이 쓰기 때문에 사용자 PC에 저장된 캐시데이터가 로드되고, 이는 트래픽을 줄이는 데 (많은) 도움이 됩니다.
단, 자스/CSS 등 사이트 구축 중에 바뀜이 잦은 데이터들은 사이트 구축이 완료된 후에 브라우저캐시 설정을 하는 것이 좋을 것입니다. 수정할 때마다 강제 갱신(단축키 : Shift+F5) 해가며 변동사항을 확인하는 것은 사이트 구축자 입장에서도 번거로우니까요.
제가 LEMP 구축 글 작성 목표를 워드프레스 설치까지로 마음먹어서, 브라우저캐시 세팅도 워드프레스에 초점을 맞춰서 할게요.
배경 설명을 조금 하고 본론으로 들어갈게요.
구글에서 브라우저캐시 설정 방법을 검색해보니까 ①map{ } 블록으로 구성하는 법과 ②location{ } 블록으로 구성하는 법이 나오던데, 둘 다 ngx_http_headers_module의 expires 구문으로 브라우저캐시 만료 기간을 지정하더군요. 그래서...
http://nginx.org/en/docs/http/ngx_http_headers_module.html
▲ ngx_http_headers_module 항목에 대한 Nginx 공식 문서를 참고하면 개념 파악하는 데 도움이 될 겁니다. expires 뒤에 붙는 시간 표현 명령어는 아래 내용 정도만 알아둬도 될 것 같아요.
ms: milliseconds
s: seconds
m: minutes
h: hours
d: days
w: weeks
M: months (30 days)
y: years (365 days)
예시: 1h30m 은 1시간 30분, 1y6M 은 1년 6개월.
위에 링크 걸었던 공식 문서의 맨 아랫부분을 보면 map ＄sent_http_content_type ＄expires { 블라블라~~ } 처럼 예시가 나오는데, 이게 map 블록을 이용한 브라우저캐시 구성 사례예요.
http://nginx.org/en/docs/http/ngx_http_map_module.html
▲ map 모듈에 대한 엔진엑스 공식 문서인데, 중요한 내용은 없어 보이고...
▲ 디지털오션에서 발행한 브라우저캐시 설정법을 보시면 map 블록의 개념이 더 잘 와닿을 거라고 생각합니다.
배경 설명을 끝내고, 위의 디지털오션 튜토리얼에 나온 ①map{ } 블록으로 브라우저캐시 구성하는 법을 적어볼게요.
/etc/nginx/sites-enabled/ 안의 서버블록 설정 파일을 열고, 서버블록 바깥 부분에 아래처럼 map { } 블록을 삽입하고,
(map 구문은 http 블록에만 쓸 수 있기 때문에 server { } 블록 바깥에 위치시켜야 해요.)
※ 아래 코드에 보이는 ￦기호와 ＄기호는 키보드에 매핑된 글자와 유니코드가 다릅니다. 그래서 복붙했을 때 제대로 작동하지 않습니다. 일일이 쳐서 넣으시거나, 복붙하더라도 ￦와 ＄를 키보드의 것으로 바꿔주세요.
# Expires map
map \$sent_http_content_type \$expires {
default off;
text/html epoch;
text/css max;
application/javascript max;
~image/ max;
}
server { } 블록 안쪽에는 아래처럼 expires 구문을 넣어주면 끝입니다.
server {
listen 80 default_server;
listen [::]:80 default_server;
expires \$expires;
블라블라~~
}
1st.txt▲ 위의 코드들을 텍스트파일로 첨부합니다.
(이후 Nginx 서비스 재시작. 캐시 적용 여부를 테스트해보고 싶다면 디지털오션 튜토리얼을 참고하세요.)
위에서 Expires map을 보시면 map 블록 괄호 안쪽에 브라우저캐시 적용할 파일 유형들이 정의되어 있는데, /etc/nginx/mime.types 파일에 나온 분류를 따르는 것 같아요.
▲ /etc/nginx/mime.types 파일을 봅시다. map 블록에서 ~image/ 문구 하나만 쓰면 상당히 많은 그림파일 형식이 커버될 것 같죠?
저는 이 방법이 괜찮다고 생각해서 (초보자 입장에서) 추천합니다.
그.런.데.
국내 문서들은 location 블록에 정규식을 조합해서 확장자를 필터링한 다음 브라우저캐시를 설정하는 방식(②location{ } 블록으로 브라우저캐시 구성하는 법)을 집중적으로 소개하고 있네요? 그래서 저도 적어보겠습니다.
※ 아래 코드에 보이는 ￦기호와 ＄기호는 키보드에 매핑된 글자와 유니코드가 다릅니다. 그래서 복붙했을 때 제대로 작동하지 않습니다. 일일이 쳐서 넣으시거나, 복붙하더라도 ￦와 ＄를 키보드의 것으로 바꿔주세요.
server {
블라블라~~
# Browser Cache Setting
location ~* ￦.(?:jpg|jpeg|png|gif|ico|cur|gz|svg|svgz|ogg|ogv|mp4|webm|htc)\$ {
expires 1M;
access_log off;
add_header Cache-Control "public";
}
location ~* ￦.(?:css|js)\$ {
expires 1M;
access_log off;
add_header Cache-Control "public";
}
location = /favicon.ico {
expires max;
access_log off;
log_not_found off;
}
블라블라~~
}
▲ 위의 코드를 텍스트파일로 첨부합니다.
이런 식으로 server { } 블록 안에 location블록+정규식 형태의 브라우저캐시 설정을 넣은 다음 Nginx 서비스를 재시작하면 됩니다.
expires 1M; 은 한 달을 뜻하겠죠? access_log off; 은 접속 로그를 남기지 않겠다는 뜻이겠고, Cache-Control "public(공개)";은 어떤 요청이든 캐시되도록 한다는 뜻일 겁니다. expires max; 는 2037년 말까지를 의미한다네요.
참고로 리버스 프록시 환경에서는 이 방식이 잘 작동하지 않을 수 있다고 하는데, 리버스프록시 환경에서 브라우저캐시를 구현하고 싶다면 아래 링크의 문서를 참고해보세요. (일반적인 홈서버 환경에서는 거의 쓰이지 않을 것 같습니다.)
https://extrememanual.net/6481
▲ 두상 Sculpture 제작 달인 : 아쿠아맨 만들기