[Nginx] gzipディレクティブで重いファイルを圧縮してレスポンスを軽くする

2021年5月3日

どーも、シローです。

Nginxにはレスポンスで返すファイルを圧縮して返すのをgzipディレクティブを使えばできるっぽいなので、今回はそれを使ってどれくらい速度が上がるのか検証したい。(その前にこのサイトのレスポンスを早くしろよｗとか言ってはだめ)

環境

OS	Ubuntu 18.04.4 LTS
nginx	nginx/1.14.0 (Ubuntu)

gzipディレクティブについて

容量の大きいファイルをブラウザで開くとサーバからダウンロードするために時間がかかってしまい、レスポンスの低下の原因になったりする。

最近だと、css、javascriptも一つのファイルに結合したりするので場合によってはMB単位の通信もあったりなかったり。。

そんなときに、サーバでファイルを圧縮してサイズを小さいものを送信するための機能としてNginxではgzipディレクティブが用意されている。

gzipディレクティブ

コンテキスト	http, server, location, location中のif
説明	gzip圧縮を有効/無効にする
デフォルト値	false

では早速試してみたい。

検証

gzipの記述例のサンプルはこうだ

server {
.
.
.
    gzip on; 
    gzip_types text/css text/javascript
        image/jpeg image/jpg image/png
        application/x-javascript application/javascript
        application/json;
    gzip_min_length 1k; 
    gzip_disable "msie6";
    
    location / {
      ...
    }
.
.
.
}

server {

gzip on;

gzip_types text/css text/javascript

image/jpeg image/jpg image/png

application/x-javascript application/javascript

application/json;

gzip_min_length 1k;

gzip_disable "msie6";

location / {

...

}

追加で色々なディレクティブが出てきたんで都度解説を入れたい

gzip_typesディレクティブ

圧縮したいファイルタイプを指定するために必須

コンテキスト	http, server, location
説明	gzip圧縮対象のMIMEタイプを指定する
デフォルト値	text/html

gzip_min_lengthディレクティブ

デフォルトだと20Byte以上だと必ず圧縮するんだけど、圧縮対象範囲を狭めたほうがサーバで圧縮するためのCPU負荷を減らせるのでまあまあ必須

コンテキスト	http, server, location
説明	gzip圧縮対象となるファイルの最小サイズを指定する
デフォルト値	20

gzip_disableディレクティブ

なんかIEだとgzip圧縮したファイルをブラウザで回答してくれなかったりするみたいなので必須（IEほんまk...)

ちなみに"msie6"は正規表現の"MSIE[4-6]\.($!.*SV1)"を表すらしいのでこれも多分テストに出る

コンテキスト	http, server, location
説明	gzip圧縮を無効にするユーザエージェントのパターンを指定する
デフォルト値	なし

変更前

curlコマンドで確かめることができる

変更後

curlコマンド

一番したを見てみると"Content-Encodhing: gzip"と表示されているぞ、どうやら圧縮はされているっぽいな

ブラウザでもファイルサイズは(2KB -> 1.07KB)と小さくなっていた（画像めんどくてすまん

と、とりあえず圧縮はできてレスポンスは早くなるんじゃないかな

はい、検証終了！

まとめ

ファイルサイズが大きいファイルを送信する場合、Nginxではgzipを使えばファイルを圧縮してブラウザに返すので通信不可が軽減できる
gzipディレクティブにはgzip_types,gzip_min_length,gzip_disableなど色々必須の設定項目がある

nginx実践入門
nginxを現場で活用するための知識を、実践的なノウハウを交えて解説した書籍です。
nginxのインストール方法や基本的な設定方法からはじめ、nginxを利用した「静的コンテンツ配信サーバ」「HTTPSサーバ」「Webアプリケーションサーバ」「大規模コンテンツ配信システム」の構築方法をそれぞれ詳しく紹介しています。後半ではnginxサーバのモニタリングやログの収集、そして軽量スクリプト言語Luaでnginxを拡張する方法について解説しているので、nginxをこれから使う方はもちろん、さらに活用したい方にもお勧めです。

Amazon!