Ubuntu14.04でgzipモジュールをNginxに追加する方法
序章
Webサイトの読み込み速度は、ブラウザでダウンロードする必要のあるすべてのファイルのサイズによって異なります。 送信するファイルのサイズを小さくすると、Webサイトの読み込みが速くなるだけでなく、帯域幅の使用量を支払う必要がある人にとっても安価になります。
gzipは人気のあるデータ圧縮プログラムです。 使用するようにNginxを構成できます gzip
その場で提供するファイルを圧縮します。 これらのファイルは、取得時にそれをサポートするブラウザによって解凍されますが、Webサーバーとブラウザ間で転送されるデータの量が少ないという利点があります。
圧縮が一般的に機能する方法だけでなく、どのように機能するか gzip
動作し、特定のファイルは他のファイルよりも圧縮率が高くなります。 たとえば、テキストファイルは非常によく圧縮され、結果として2分の1以上小さくなることがよくあります。 一方、JPEGやPNGファイルなどの画像は、その性質上すでに圧縮されており、2番目の圧縮は gzip
結果はほとんどまたはまったくありません。 ファイルを圧縮するとサーバーリソースが消費されるため、結果としてサイズが大幅に減少するファイルのみを圧縮することをお勧めします。
このガイドでは、Ubuntu14.04サーバーにインストールされているNginxを構成して利用する方法について説明します。 gzip
Webサイトの訪問者に送信されるコンテンツのサイズを縮小するための圧縮。
前提条件
このチュートリアルに従うには、次のものが必要です。
-
sudo非rootユーザーを持つ1つのUbuntu14.04サーバー
-
Ubuntu14.04チュートリアルにNginxをインストールする方法に従ってサーバーにインストールされたNginx
ステップ1—テストファイルの作成
このステップでは、デフォルトのNginxディレクトリにいくつかのテストファイルを作成してテキストを送信します gzip
の圧縮。
ネットワーク上で提供されるファイルの種類を決定するために、Nginxはファイルの内容を分析しません。これは、十分な速度が得られないためです。 代わりに、ファイル拡張子を検索して、ファイルの目的を示すMIMEタイプを判別します。
この動作のため、テストファイルの内容は関係ありません。 ファイルに適切な名前を付けることで、Nginxをだまして、1つの完全に空のファイルが画像であり、もう1つのファイルがスタイルシートであると思わせることができます。
この構成では、Nginxは非常に小さなファイルを圧縮しないため、正確に1キロバイトのサイズのテストファイルを作成します。 これにより、Nginxが必要な場所で圧縮を使用しているかどうかを確認でき、あるタイプのファイルを圧縮し、他のタイプのファイルでは圧縮しません。
名前の付いた1キロバイトのファイルを作成します test.html
デフォルトのNginxディレクトリで truncate
. 拡張子は、それがHTMLページであることを示します。
- sudo truncate -s 1k /usr/share/nginx/html/test.html
同じ方法でさらにいくつかのテストファイルを作成しましょう:1つ jpg
画像ファイル、1つ css
スタイルシート、および1つ js
JavaScriptファイル。
- 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がどのように動作するかを確認することです。
名前の付いたHTMLファイルかどうかを確認しましょう test.html
圧縮で提供されます。 このコマンドは、Nginxサーバーからファイルを要求し、提供しても問題がないことを指定します gzip
HTTPヘッダーを使用して圧縮されたコンテンツ(Accept-Encoding: gzip
).
- 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
同じやり方で。
- 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スタイルシートを使用してテストを繰り返すことができます。
- 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
構成、メインのNginx構成ファイルを開きます nano
またはお気に入りのテキストエディタ。
- 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
ディレクティブですが、いくつかの追加設定はコメントアウトされています #
コメント記号。 このセクションにいくつかの変更を加えます。
- コメントされたすべての行のコメントを解除する(つまり、
#
行頭) - 追加します
gzip_min_length 256;
256バイト未満のファイルを圧縮しないようにNginxに指示するディレクティブ。 これは非常に小さいファイルであり、圧縮によるメリットはほとんどありません。 - 追加する
gzip_types
Webフォントを示す追加のファイルタイプを含むディレクティブ、ico
アイコン、およびSVG画像。
これらの変更が適用されると、設定セクションは次のようになります。
. . .
##
# `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—新しい構成を確認する
次のステップは、構成への変更が期待どおりに機能したかどうかを確認することです。
手順2で行ったのと同じように、次を使用してこれをテストできます。 curl
各テストファイルで、出力を調べます。 Content-Encoding: gzip
ヘッダ。
- 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
出力のヘッダー。
その場合は、構成済みです gzip
Nginxでの圧縮に成功しました!
結論
完全に使用するためにNginx構成を変更する gzip
圧縮は簡単ですが、そのメリットは計り知れません。 帯域幅が限られている訪問者はサイトをより速く受け取るだけでなく、Googleはサイトの読み込みがより速くなることを喜んでいます。 速度は、現代のWebの重要な部分として注目を集めており、 gzip
それを改善するための1つの大きなステップです。