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 모듈에 대한 엔진엑스 공식 문서인데, 중요한 내용은 없어 보이고...

https://www.digitalocean.com/community/tutorials/how-to-implement-browser-caching-with-nginx-s-header-module-on-ubuntu-16-04

▲ 디지털오션에서 발행한 브라우저캐시 설정법을 보시면 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;

}


    블라블라~~

}


2nd.txt

▲ 위의 코드를 텍스트파일로 첨부합니다.


이런 식으로 server { } 블록 안에 location블록+정규식 형태의 브라우저캐시 설정을 넣은 다음 Nginx 서비스를 재시작하면 됩니다.

expires 1M; 은 한 달을 뜻하겠죠? access_log off; 은 접속 로그를 남기지 않겠다는 뜻이겠고, Cache-Control "public(공개)";은 어떤 요청이든 캐시되도록 한다는 뜻일 겁니다. expires max; 는 2037년 말까지를 의미한다네요. 


참고로 리버스 프록시 환경에서는 이 방식이 잘 작동하지 않을 수 있다고 하는데, 리버스프록시 환경에서 브라우저캐시를 구현하고 싶다면 아래 링크의 문서를 참고해보세요. (일반적인 홈서버 환경에서는 거의 쓰이지 않을 것 같습니다.)

https://extrememanual.net/6481


▲ 두상 Sculpture 제작 달인 : 아쿠아맨 만들기

반응형