[우분투 18.04 데스크톱] LEMP : 엔진엑스(Nginx) 설정 - gzip 압축(for 워드프레스)

서버 측에서 사이트 데이터를 압축해서 사용자(클라이언트)에게 전송하면 전송할 데이터의 크기가 줄어드니까 느린 회선을 조금이나마 극복할 수 있겠죠? 다만 압축 과정에서 서버 자원을 그만큼 소비하겠죠. 서버 사양이 좋을수록 압축 속도가 빠르겠고...

아파치(Apache)와 엔진엑스(Nginx) 모두 gzip 이라는 사이트 데이터 압축 개념이 있습니다. 구글링해보면 GNU zip의 약자라고 하는데... 어떤 뜻인지 대충 감이 오시죠? ^^

사이트에 gzip이 적용됐는지, 압축이 얼마나 되었는지를 확인해주는 사이트는 많습니다. 구글에서 "gzip test"라고만 쳐봐도 쉽게 찾을 수 있는데, 두어군데 괜찮은 곳을 소개하면서 시작해볼게요.

https://www.giftofspeed.com/gzip-test/

http://www.whatsmyip.org/http-compression-test/

▲ giftofspeed 사이트에서 테스트해본 것인데요, 아파치에서 gzip 적용했었던 사이트를 넣어봤는데, 76% 압축이면 솔깃하지 않나요? Nginx에서도 이정도 압축률을 목표로 설정해볼까 합니다. 제가 LEMP 구축 글 작성 목표를 워드프레스 설치까지로 마음먹어서, gzip 세팅도 워드프레스에 초점을 맞춰서 할게요.

▼ 우분투에서 nginx 설치 직후에 /etc/nginx/nginx.conf 파일을 에디터로 열어보면...

(터미널 창에서 sudo gedit /etc/nginx/nginx.conf 입력)

▲ (붉은 밑줄 참고.) gzip이 기본값으로 켜져있는 것을 확인할 수 있습니다(gzip on;). 그런데 아랫줄들을 보면 옵션들이 전부 주석처리 되어있네요(이럴 거면 뭐하러 켜놨지? -_-;; ).

http://nginx.org/en/docs/http/ngx_http_gzip_module.html

▲ 엔진엑스(Nginx) 공식 문서(레퍼런스)를 참고하고,

구글에서 "nginx gzip", "nginx gzip 워드프레스"라고 쳐서 나오는 문서들 중에서 제 입맛에 맞는 글들을 추려내서 gzip 설정값을 잡아봤습니다.

▲ 참고로 엔진엑스(Nginx) 공식 문서(레퍼런스)의 gzip 안내를 보면 http 블록, server 블록, location 블록 어디에든 gzip 설정을 넣을 수 있다고 합니다.

엔진엑스 메인 설정 파일인 /etc/nginx/nginx.conf 의 http{ } 블록 안에 gzip 관련 설정이 기본으로 들어있기도 하고... 메인 설정 파일의 http 블록에 설정하면 전역적으로 적용되므로 편리하다는 의견이 있는데, 편의성 측면에서는 동의하지만 홈서버 하나에서 다수의 사이트 운영을 대비한다면 (워드프레스, 그누보드, XE를 전부 쓰게 될 수도 있으니) 사이트별/경로별로 각각 gzip 설정을 하는 습관을 들이는 것이 좋지 않을까 싶었습니다.

그래서 저는 서버블록 내의 location / { } 블록에 gzip 설정을 추가했습니다.

▲ 에디터로 사이트의 서버블록 설정 파일을 열었습니다. 서버블록 내에 location / { } 블록이 보이네요.

▲ location / { } 블록 안에 gzip 설정을 이렇게 구성하고 저장+빠져나온 후 nginx 설정파일을 테스트했고, 이상 없는 것을 확인하고 nginx 서비스를 재시작했습니다.

gzip 설정 사항들을 텍스트로 적어둘게요. 따라 적으시면 되고...

# gzip setting

gzip_disable "msie6";

gzip_buffers 16 8k;

gzip_comp_level 5;

gzip_http_version 1.1;

gzip_min_length 256;

gzip_proxied any;

gzip_types application/atom+xml application/javascript application/json application/ld+json application/manifest+json application/rss+xml application/vnd.geo+json application/vnd.ms-fontobject application/x-font application/x-font-opentype application/x-font-otf application/x-font-truetype application/x-font-ttf application/x-javascript application/x-web-app-manifest+json application/xhtml+xml application/xml application/xml+rss font/opentype font/otf font/ttf image/bmp image/svg+xml image/x-icon text/cache-manifest text/css text/javascript text/plain text/vcard text/vnd.rim.location.xloc text/vtt text/x-component text/x-cross-domain-policy text/xml;

gzip_vary on;

gzip_types.txt

▲ gzip_types 가 너무 길어서 텍스트파일로 따로 뽑아 첨부합니다.

약간의 설명을 곁들이자면...

일단 엔진엑스(Nginx) 공식 문서(레퍼런스)에 나온 Syntax들을 빠짐없이 넣었습니다.

# gzip setting

▲ 주석이죠. 나중에 알아보기 편하도록 적었습니다.

gzip_disable "msie6";

▲ "User-Agent" 헤더 필드를 참조해서 gzip을 적용하지 않을 브라우저를 지정합니다. msie6은 눈에 익숙하시죠? 익스플로러 과거 버전...

gzip_buffers 16 8k;

▲ 버퍼의 개수와 사이즈를 지정합니다. (레퍼런스에서) 기본적으로 버퍼 사이즈는 메모리 페이지 하나의 값과 같다고 합니다. 저는 잘 몰라서 nginx.conf 에 있는 기본값(16 8k)을 썼습니다. 레퍼런스에서는 플랫폼에 따라 4k를 선택한다면 기본값을 32 4k로 제시하네요.

gzip_comp_level 5;

▲ 압축률. 1~9까지 정할 수 있는데, 값을 높일수록 압축은 강하게 되지만 그만큼 CPU 사용량이 올라갑니다. 기본값은 6인데, 5로 낮춰도 대략 75% 넘게 압축되더군요. 테스트해보면서 사양에 맞춰 증감하면 될 것 같습니다.

gzip_http_version 1.1;

▲ HTTP 1.1 버전부터 압축 요구에 반응합니다.

gzip_proxied any;

▲ 클라이언트가 프록시를 거쳐서 연결하는 경우라도 데이터를 압축합니다.

gzip_types 블라블라~;

▲ 구글에서 'nginx gzip 워드프레스'라고 쳐을 때 나오는 값들을 거의 모두 긁어봤습니다(제가 잘 몰라서 -_-;). 구글에서 MIME type 이라고 쳐보면 표현법에 대해 자세히 나옵니다. text/html은 여기에 없더라도 항상 압축된다고 합니다. 줄여도 되는 부분이 있다면 피드백 좀 해주세요. 본문에 반영할게요.

항목들이 너무 길어서 거부감이 든다면 /etc/nginx/nginx.conf 파일 내의 주석처리된 gzip_types 부분을 가져다 쓰세요.

gzip_min_length 256;

▲ 크기 축소를 안해도 될만한 256byte 미만의 파일은 압축하지 않습니다. 공식 문서에 제시된 기본값은 20byte인데, 저는 구글링해서 합리적인 가이드를 제시하는 분의 설정을 따랐습니다.

gzip_vary on;

▲ gzip, gzip_static, gunzip 명령이 활성화되면 "Vary: Accept-Encoding" 응답 헤더 필드를 삽입하는 것을 활성화(Enables)/비활성화(disables)합니다.

▲ 본문 첫번째 스크린샷에서 테스트용으로 썼던 페이지를 html 파일로 저장한 다음 nginx gzip 적용한 서버에 옮겨서 불러봤는데, 76% 정도 압축되는 것을 확인할 수 있었습니다.

이 정도면 나쁘지 않게 gzip 적용이 된 것 같아요. 다음 글에서 뵙겠습니다.

※ SSL 적용 환경(https 연결)에서는 gzip을 끄는 게 보안상 좋을 수 있다는 의견이 있습니다. 참고하세요.

http://stackoverflow.com/a/4063496

https://github.com/h5bp/server-configs-nginx/issues/72

※ 참고할만한 글들

https://jimnong.tistory.com/search/lemp

▲ 30 SMART TRICKS TO OPEN ANYTHING AROUND YOU