웹사이트 검색

Ubuntu 14.04에서 Nginx에 gzip 모듈을 추가하는 방법


소개

웹 사이트가 로드되는 속도는 브라우저에서 다운로드해야 하는 모든 파일의 크기에 따라 다릅니다. 전송할 파일의 크기를 줄이면 웹사이트를 더 빠르게 로드할 수 있을 뿐만 아니라 대역폭 사용에 대해 비용을 지불해야 하는 사람들에게 더 저렴하게 만들 수 있습니다.

gzip은 널리 사용되는 데이터 압축 프로그램입니다. gzip을 사용하여 즉시 제공하는 파일을 압축하도록 Nginx를 구성할 수 있습니다. 그런 다음 이러한 파일은 손실 없이 검색 시 파일을 지원하는 브라우저에 의해 압축 해제되지만 웹 서버와 브라우저 간에 전송되는 데이터 양이 적다는 이점이 있습니다.

일반적으로 압축이 작동하는 방식과 gzip이 작동하는 방식으로 인해 특정 파일은 다른 파일보다 더 잘 압축됩니다. 예를 들어 텍스트 파일은 매우 잘 압축되어 결과가 두 배 이상 작아지는 경우가 많습니다. 반면에 JPEG 또는 PNG 파일과 같은 이미지는 그 특성상 이미 압축되어 있으며 gzip을 사용하여 두 번째로 압축하면 거의 또는 전혀 결과가 나오지 않습니다. 파일을 압축하면 서버 리소스가 많이 소모되므로 결과적으로 파일 크기를 상당히 줄일 수 있는 파일만 압축하는 것이 가장 좋습니다.

이 가이드에서는 gzip 압축을 활용하여 웹 사이트 방문자에게 전송되는 콘텐츠의 크기를 줄이기 위해 Ubuntu 14.04 서버에 설치된 Nginx를 구성하는 방법에 대해 설명합니다.

전제 조건

이 자습서를 따르려면 다음이 필요합니다.

  • 루트가 아닌 sudo 사용자가 있는 Ubuntu 14.04 서버 1개
  • Ubuntu 14.04에 Nginx를 설치하는 방법 자습서에 따라 서버에 Nginx 설치\n

1단계 - 테스트 파일 생성

이 단계에서는 텍스트 gzip의 압축을 위해 기본 Nginx 디렉토리에 여러 테스트 파일을 생성합니다.

어떤 종류의 파일이 네트워크를 통해 제공되는지 결정하기 위해 Nginx는 충분히 빠르지 않기 때문에 파일 내용을 분석하지 않습니다. 대신 파일 확장자를 조회하여 파일의 목적을 나타내는 MIME 유형을 결정합니다.

이 동작으로 인해 테스트 파일의 내용은 관련이 없습니다. 파일 이름을 적절하게 지정하면 Nginx가 완전히 비어 있는 파일 하나는 이미지이고 다른 하나는 스타일시트라고 생각하도록 속일 수 있습니다.

우리 구성에서 Nginx는 매우 작은 파일을 압축하지 않으므로 크기가 정확히 1KB인 테스트 파일을 만들 것입니다. 이를 통해 Nginx가 압축을 사용해야 하는 경우 압축을 사용하는지 여부를 확인할 수 있습니다. 한 유형의 파일은 압축하고 다른 유형은 압축하지 않습니다.

truncate를 사용하여 기본 Nginx 디렉토리에 test.html이라는 1KB 파일을 만듭니다. 확장자는 HTML 페이지임을 나타냅니다.

  1. sudo truncate -s 1k /usr/share/nginx/html/test.html

같은 방식으로 테스트 파일을 몇 개 더 만들어 보겠습니다. 하나는 jpg 이미지 파일, 하나는 css 스타일시트, 하나는 js JavaScript 파일입니다.

  1. sudo truncate -s 1k /usr/share/nginx/html/test.jpg
  2. sudo truncate -s 1k /usr/share/nginx/html/test.css
  3. sudo truncate -s 1k /usr/share/nginx/html/test.js

2단계 - 기본 동작 확인

다음 단계는 방금 만든 파일을 사용하여 새로 설치할 때 압축과 관련하여 Nginx가 어떻게 작동하는지 확인하는 것입니다.

test.html이라는 HTML 파일이 압축되어 제공되는지 확인해 봅시다. 이 명령은 Nginx 서버에서 파일을 요청하고 HTTP 헤더(Accept-Encoding: gzip)를 사용하여 gzip 압축 콘텐츠를 제공해도 좋다고 지정합니다.

  1. curl -H "Accept-Encoding: gzip" -I http://localhost/test.html

이에 대한 응답으로 여러 HTTP 응답 헤더가 표시되어야 합니다.

HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Tue, 19 Jan 2016 20:04:12 GMT
Content-Type: text/html
Last-Modified: Tue, 04 Mar 2014 11:46:45 GMT
Connection: keep-alive
Content-Encoding: gzip

마지막 줄에서 Content-Encoding: gzip 헤더를 볼 수 있습니다. 이것은 gzip 압축이 이 파일을 보내는 데 사용되었음을 알려줍니다. 이것은 Ubuntu 14.04에서 Nginx가 기본 설정으로 설치 후 자동으로 gzip 압축을 활성화했기 때문에 발생했습니다.

그러나 기본적으로 Nginx는 HTML 파일만 압축합니다. 새로 설치하는 다른 모든 파일은 압축되지 않은 상태로 제공됩니다. 이를 확인하기 위해 동일한 방식으로 test.jpg라는 테스트 이미지를 요청할 수 있습니다.

  1. curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg

결과는 이전과 약간 달라야 합니다.

HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Tue, 19 Jan 2016 20:10:34 GMT
Content-Type: image/jpeg
Content-Length: 0
Last-Modified: Tue, 19 Jan 2016 20:06:22 GMT
Connection: keep-alive
ETag: "569e973e-0"
Accept-Ranges: bytes

출력에 Content-Encoding: gzip 헤더가 없습니다. 이는 파일이 압축 없이 제공되었음을 의미합니다.

테스트 CSS 스타일시트로 테스트를 반복할 수 있습니다.

  1. curl -H "Accept-Encoding: gzip" -I http://localhost/test.css

다시 한 번 출력에 압축에 대한 언급이 없습니다.

HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Tue, 19 Jan 2016 20:20:33 GMT
Content-Type: text/css
Content-Length: 0
Last-Modified: Tue, 19 Jan 2016 20:20:33 GMT
Connection: keep-alive
ETag: "569e9a91-0"
Accept-Ranges: bytes

3단계 - Nginx의 gzip 설정 구성

다음 단계는 압축된 HTML 파일뿐만 아니라 압축의 이점을 얻을 수 있는 다른 파일 형식도 제공하도록 Nginx를 구성하는 것입니다.

Nginx gzip 구성을 변경하려면 nano 또는 선호하는 텍스트 편집기에서 기본 Nginx 구성 파일을 엽니다.

  1. sudo nano /etc/nginx/nginx.conf

다음과 같은 gzip 설정 섹션을 찾습니다.

. . .
##
# `gzip` Settings
#
#
gzip on;
gzip_disable "msie6";

# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
. . .

기본적으로 gzip 압축은 gzip on 지시문에 의해 활성화되지만 몇 가지 추가 설정은 # 주석 기호로 주석 처리됩니다. 이 섹션을 몇 가지 변경할 예정입니다.

  • 주석이 있는 모든 줄의 주석을 제거하여(즉, 줄 시작 부분에서 #를 삭제하여) 추가 설정을 활성화합니다.
  • Nginx가 256바이트보다 작은 파일을 압축하지 않도록 지시하는 gzip_min_length 256; 지시문을 추가합니다. 매우 작은 파일이므로 압축해도 거의 도움이 되지 않습니다.
  • 웹 글꼴, ico 아이콘 및 SVG 이미지를 나타내는 추가 파일 유형과 함께 gzip_types 지시문을 추가합니다.

이러한 변경 사항이 적용된 후 설정 섹션은 다음과 같아야 합니다.

. . .
##
# `gzip` Settings
#
#
gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
. . .

종료하려면 파일을 저장하고 닫습니다.

새 구성을 활성화하려면 Nginx를 다시 시작하십시오.

  1. sudo service nginx restart

4단계 - 새 구성 확인

다음 단계는 구성 변경이 예상대로 작동하는지 확인하는 것입니다.

각 테스트 파일에서 curl을 사용하고 Content-Encoding: gzip 헤더에 대한 출력을 검사하여 2단계에서 했던 것처럼 이를 테스트할 수 있습니다.

  1. curl -H "Accept-Encoding: gzip" -I http://localhost/test.html
  2. curl -H "Accept-Encoding: gzip" -I http://localhost/test.jpg
  3. curl -H "Accept-Encoding: gzip" -I http://localhost/test.css
  4. curl -H "Accept-Encoding: gzip" -I http://localhost/test.js

이제 이미지 파일인 test.jpg만 압축되지 않은 상태로 있어야 합니다. 다른 모든 예에서는 출력에서 Content-Encoding: gzip 헤더를 찾을 수 있어야 합니다.

그렇다면 Nginx에서 gzip 압축을 성공적으로 구성한 것입니다!

결론

gzip 압축을 완전히 사용하도록 Nginx 구성을 변경하는 것은 쉽지만 그 이점은 엄청날 수 있습니다. 대역폭이 제한된 방문자는 사이트를 더 빨리 받을 수 있을 뿐만 아니라 Google도 사이트가 더 빨리 로드되는 것에 만족할 것입니다. 속도는 최신 웹의 중요한 부분으로 주목을 받고 있으며 gzip을 사용하는 것은 속도를 개선하기 위한 하나의 큰 단계입니다.