콘텐츠로 건너뛰기

Nginx Brotli 모듈 설치. 사이트 속도 개선 설정

사이트의 속도 향상을 위해서 서버에 압축 기술을 적용 합니다. 전송 데이터를 압축하여 데이터의 크기를 줄여서 서버와 클라이언트간의 전송시간을 줄이는 방법입니다.

Brotli는 Gzip보다 더 나은 압축 성능으로 최신 브라우저들에서는 모두 Brotli를 지원하므로 사용하지 않을 이유가 없어보입니다.

Brotli
Brotli

일반적으로 Gzip을 많이 사용하지만 이 글에서는 Brotli라는 구글에서 개발한 압축 알고리즘을 적용하는 방법을 설명합니다.

Ubuntu 서버에 Nginx Brotli 모듈 설치

우분투 서버에서는 apt-get 명령어로 간편하게 모듈 설치를 진행합니다. 아래 명령을 차례로 입력하여 모듈 설치를 진행합니다.

sudo apt-add-repository -y ppa:hda-me/nginx-stable
sudo apt-get update
sudo apt-get install brotli nginx-module-brotli

Brotli 사용 설정

Nginx 설정 파일을 수정하여 Brotli 관련 설정을 추가하도록 합니다.

sudo nano /etc/nginx/nginx.conf

아래 두 가지 Brotli 관련 모듈을 로드하도록 nginx.conf 상단에 추가합니다.

load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

Brotli 관련된 설정은 http { … } 사이에 적당한 곳에 기록합니다.

이때 Gzip과 Brotli 설정을 함께 기록해 주면 Brotli 압축 알고리즘을 지원하지 않는 브라우저의 경우엔 Gzip을 사용하여 압축 전송하도록 하게 됩니다.

user www-data;
# www-data for php-fpm, nginx user works with static content only
worker_processes auto;
pid /var/run/nginx.pid;

load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

events {
    worker_connections 768;
}

http {
    ....
    
    # Gzip
        gzip on;
        gzip_disable "msie6";
        gzip_vary off;
        gzip_proxied any;
        gzip_comp_level 6;
        gzip_min_length 1000;
        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 application/atom+xml;

    # Brotli
        brotli on;
        brotli_static on;
        brotli_comp_level 6;
        brotli_types text/xml image/svg+xml application/x-font-ttf image/vnd.microsoft.icon application/x-font-opentype application/json font/eot application/vnd.ms-fontobject application/javascript font/otf application/xml application/xhtml+xml text/javascript  application/x-javascript text/plain application/x-font-truetype application/xml+rss image/x-icon font/opentype text/css image/x-win-bitmap;

    ....
}

설정을 추가 하였다면 서버를 재시작하여 작성한 설정 내용이 적용되도록 합니다.

sudo systemctl restart nginx

Brotli와 Gzip 압축 적용 테스트

적용한 압축 알고리즘이 서버에 제대로 적용 되었는지 테스를 위해서는 헤더에 accept-encoding 항목으로 ‘br’ 또는 ‘gzip’값을 넣어서 전송 해 보면 확인할 수 있습니다.

curl -IL https://signpen.net/blog -H "Accept-Encoding: br"

-- 응답 --
HTTP/2 200 
server: cloudflare-nginx
date: Fri, 23 Jul 2021 13:25:56 GMT
content-type: text/html; charset=UTF-8
cf-edge-cache: cache,platform=wordpress
link: <https://signpen.net/blog/wp-json/>; rel="https://api.w.org/"
content-encoding: br

Brotli 테스트땐 curl 명령어로 ‘br’을 헤더에 넣어서 보냅니다. content-encoding: br로 응답을 받았다면 정상 적용된 것입니다.

curl -IL https://signpen.net/blog -H "Accept-Encoding: gzip"

-- 응답 --
HTTP/2 200 
server: cloudflare-nginx
date: Fri, 23 Jul 2021 13:29:32 GMT
content-type: text/html; charset=UTF-8
cf-edge-cache: cache,platform=wordpress
link: <https://signpen.net/blog/wp-json/>; rel="https://api.w.org/"
content-encoding: gzip

gzip 역시 정상 작동하는 것을 확인 했습니다


참고

How To Enable GZIP & Brotli Compression for Nginx on Linux

Nginx HDA Bundle – Dynamic Modules Power

댓글로 의견을 남겨주세요.