Ubuntu14.04でgzipモジュールをNginxに追加する方法

投稿日: 2019-11-08 2022-04-20
タグ: nginx, Server Optimization, ubuntu

序章

Webサイトの読み込み速度は、ブラウザでダウンロードする必要のあるすべてのファイルのサイズによって異なります。送信するファイルのサイズを小さくすると、Webサイトの読み込みが速くなるだけでなく、帯域幅の使用量を支払う必要がある人にとっても安価になります。

gzipは人気のあるデータ圧縮プログラムです。 gzipを使用して、オンザフライで提供されるファイルを圧縮するようにNginxを構成できます。これらのファイルは、取得時にそれをサポートするブラウザによって解凍されますが、Webサーバーとブラウザ間で転送されるデータの量が少ないという利点があります。

圧縮が一般的に機能する方法だけでなく、gzipがどのように機能するかにより、特定のファイルは他のファイルよりも圧縮率が高くなります。たとえば、テキストファイルは非常によく圧縮され、結果として2分の1以上小さくなることがよくあります。一方、JPEGやPNGファイルなどの画像は、その性質上すでに圧縮されており、gzipを使用した2回目の圧縮ではほとんどまたはまったく結果が得られません。ファイルを圧縮するとサーバーリソースが消費されるため、結果としてサイズが大幅に減少するファイルのみを圧縮することをお勧めします。

このガイドでは、Ubuntu 14.04サーバーにインストールされているNginxを構成して、gzip圧縮を利用して、Webサイトの訪問者に送信されるコンテンツのサイズを減らす方法について説明します。

前提条件

このチュートリアルに従うには、次のものが必要です。

sudo非rootユーザーを持つ1つのUbuntu14.04サーバー
Ubuntu14.04チュートリアルにNginxをインストールする方法に従ってサーバーにインストールされたNginx

ステップ1—テストファイルの作成

このステップでは、デフォルトのNginxディレクトリにいくつかのテストファイルを作成して、gzipの圧縮をテキスト化します。

ネットワーク上で提供されるファイルの種類を決定するために、Nginxはファイルの内容を分析しません。これは、十分な速度が得られないためです。代わりに、ファイル拡張子を検索して、ファイルの目的を示すMIMEタイプを判別します。

この動作のため、テストファイルの内容は関係ありません。ファイルに適切な名前を付けることで、Nginxをだまして、1つの完全に空のファイルが画像であり、もう1つのファイルがスタイルシートであると思わせることができます。

この構成では、Nginxは非常に小さなファイルを圧縮しないため、正確に1キロバイトのサイズのテストファイルを作成します。これにより、Nginxが必要な場所で圧縮を使用しているかどうかを確認でき、あるタイプのファイルを圧縮し、他のタイプのファイルでは圧縮しません。

truncateを使用して、デフォルトのNginxディレクトリにtest.htmlという名前の1キロバイトのファイルを作成します。拡張子は、それがHTMLページであることを示します。

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

同じ方法でさらにいくつかのテストファイルを作成しましょう。1つはjpg画像ファイル、1つはcssスタイルシート、もう1つはjsJavaScriptファイルです。

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

ステップ2—デフォルトの動作を確認する

次のステップは、作成したばかりのファイルを使用して、新規インストールでの圧縮に関してNginxがどのように動作するかを確認することです。

test.htmlという名前のHTMLファイルが圧縮されて提供されているかどうかを確認しましょう。このコマンドは、Nginxサーバーからファイルを要求し、HTTPヘッダー（Accept-Encoding: gzip）を使用してgzip圧縮コンテンツを提供しても問題がないことを指定します。

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

応答として、いくつかのHTTP応答ヘッダーが表示されます。

Nginx応答ヘッダー

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という名前のテスト画像をリクエストできます。

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

結果は以前とは少し異なるはずです。

Nginx応答ヘッダー

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スタイルシートを使用してテストを繰り返すことができます。

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

繰り返しになりますが、出力には圧縮についての言及はありません。

CSSファイルのNginx応答ヘッダー

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構成を変更するには、メインのNginx構成ファイルをnanoまたはお好みのテキストエディターで開きます。

sudo nano /etc/nginx/nginx.conf

次のようなgzip設定セクションを見つけます。

/etc/nginx/nginx.conf

. . .
##
# `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ディレクティブによって有効になっていますが、いくつかの追加設定は#コメント記号でコメント化されています。このセクションにいくつかの変更を加えます。

コメントされたすべての行のコメントを解除して（つまり、行の先頭にある#を削除して）、追加の設定を有効にします。
gzip_min_length 256;ディレクティブを追加します。これは、Nginxに256バイト未満のファイルを圧縮しないように指示します。これは非常に小さいファイルであり、圧縮によるメリットはほとんどありません。
gzip_typesディレクティブに、Webフォント、icoアイコン、およびSVGイメージを示す追加のファイルタイプを追加します。

これらの変更が適用されると、設定セクションは次のようになります。

/etc/nginx/nginx.conf

. . .
##
# `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を再起動します。

sudo service nginx restart

ステップ4—新しい構成を確認する

次のステップは、構成への変更が期待どおりに機能したかどうかを確認することです。

各テストファイルでcurlを使用し、Content-Encoding: gzipヘッダーの出力を調べることで、手順2で行ったのと同じようにこれをテストできます。

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

これで、画像ファイルであるtest.jpgのみが非圧縮のままになります。他のすべての例では、出力にContent-Encoding: gzipヘッダーが含まれているはずです。

その場合は、Nginxでgzip圧縮を正常に構成しています。

結論

gzip圧縮を完全に使用するようにNginx構成を変更するのは簡単ですが、そのメリットは計り知れません。帯域幅が制限されている訪問者は、サイトをより速く受信するだけでなく、Googleはサイトの読み込みがより速くなることを喜んでいます。スピードは現代のウェブの重要な部分として勢いを増しており、gzipを使用することはそれを改善するための大きな一歩です。

getdocs

13036