Ubuntu 16.04でNginxのヘッダーモジュールを使用してブラウザーキャッシュを実装する方法

前書き

ウェブサイトの読み込みが速いほど、訪問者は滞在する可能性が高くなります。 ウェブサイトがバックグラウンドでロードされたスクリプトによって実行される画像とインタラクティブなコンテンツでいっぱいの場合、ウェブサイトを開くことは簡単な作業ではありません。 サーバーから多くの異なるファイルを1つずつ要求することで構成されます。 これらのリクエストの量を最小限に抑えることは、Webサイトを高速化する1つの方法です。

これはさまざまな方法で実行できますが、実行する最も重要な手順の1つは、browser cachingを構成することです。 これは、一度ダウンロードしたファイルをサーバーに何度も要求する代わりに、ローカルコピーから再利用できることをブラウザーに伝えています。 これを行うには、ブラウザに動作を指示する新しいHTTP応答ヘッダーを導入する必要があります。

これは、Nginxのヘッダーモジュールが作用する場所です。 このモジュールを使用して、任意のヘッダーを応答に追加できますが、その主な役割は、キャッシュヘッダーを適切に設定することです。 このチュートリアルでは、Nginxのヘッダーモジュールを使用してブラウザーのキャッシュを実装する方法を見ていきます。

前提条件

このチュートリアルを実行するには、次のものが必要です。

この記事では、ヘッダーモジュールに加えて、Nginxのマップモジュールも使用します。 マップモジュールの詳細については、How To Use Nginx’s map Module on Ubuntu 16.04を参照してください。

[[step-1 -—- creating-test-files]] ==ステップ1—テストファイルの作成

このステップでは、デフォルトのNginxディレクトリにいくつかのテストファイルを作成します。 これらのファイルを後で使用して、Nginxのデフォルトの動作を確認し、ブラウザのキャッシュが機能していることをテストします。

ネットワーク経由で提供されるファイルの種類を決定するために、Nginxはファイルの内容を分析しません。それは法外に遅いでしょう。 代わりに、ファイル拡張子を検索して、ファイルの目的を示すファイルのMIME typeを判別します。

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

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

sudo truncate -s 1k /var/www/html/test.html

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

sudo truncate -s 1k /var/www/html/test.jpg
sudo truncate -s 1k /var/www/html/test.css
sudo truncate -s 1k /var/www/html/test.js

次のステップでは、作成したばかりのファイルを使用して、新規インストールでキャッシュコントロールヘッダーを送信することに関するNginxの動作を確認します。

[[step-2 -—- checking-the-default-behavior]] ==ステップ2—デフォルトの動作を確認する

デフォルトでは、すべてのファイルに同じデフォルトのキャッシュ動作が設定されます。 これを調べるために、ステップ1で作成したHTMLファイルを使用しますが、これらのテストは任意のサンプルファイルで実行できます。

それでは、ブラウザが応答をキャッシュする時間に関する情報がtest.htmlに提供されているかどうかを確認しましょう。 次のコマンドは、ローカルのNginxサーバーにファイルを要求し、応答ヘッダーを表示します。

curl -I http://localhost/test.html

いくつかのHTTP応答ヘッダーが表示されるはずです。

Output: Nginx response headersHTTP/1.1 200 OK
Server: nginx/1.10.0 (Ubuntu)
Date: Sat, 10 Sep 2016 13:12:26 GMT
Content-Type: text/html
Content-Length: 1024
Last-Modified: Sat, 10 Sep 2016 13:11:33 GMT
Connection: keep-alive
ETag: "57d40685-400"
Accept-Ranges: bytes

最後から2番目の行には、ETagヘッダーがあります。このヘッダーには、要求されたファイルのこの特定のリビジョンの一意の識別子が含まれています。 前のcurlコマンドを繰り返し実行すると、まったく同じETag値が表示されます。

Webブラウザーを使用している場合、ブラウザーが同じファイルを再度要求するとき(たとえば、ページを更新するとき)に、ETag値が保存され、If-None-Match要求ヘッダーとともにサーバーに返送されます。

次のコマンドを使用して、コマンドラインでこれをシミュレートできます。 このコマンドのETag値を、前の出力のETag値と一致するように変更してください。

curl -I -H 'If-None-Match: "57d40685-400"' http://localhost/test.html

応答は異なるようになります。

Output: Nginx response headersHTTP/1.1 304 Not Modified
Server: nginx/1.10.0 (Ubuntu)
Date: Sat, 10 Sep 2016 13:20:31 GMT
Last-Modified: Sat, 10 Sep 2016 13:11:33 GMT
Connection: keep-alive
ETag: "57d40685-400"

今回は、Nginxは304 Not Modifiedで応答します。 ネットワーク経由でファイルを再度送信することはありません。代わりに、既にローカルにダウンロードしたファイルを再利用できることをブラウザに伝えます。

これはネットワークトラフィックを削減するので便利ですが、優れたキャッシュパフォーマンスを達成するには十分ではありません。 ETagの問題は、ブラウザーalwaysがサーバーに要求を送信して、キャッシュされたファイルを再利用できるかどうかを尋ねることです。 サーバーは、ファイルを再度送信する代わりに304で応答しますが、要求を作成して応答を受信するにはまだ時間がかかります。

次のステップでは、ヘッダーモジュールを使用して、キャッシュ制御情報を追加します。 これにより、ブラウザは、サーバーにキャッシュしても問題ないかどうかを明示的に確認することなく、いくつかのファイルをローカルにキャッシュします。

[[step-3 -—- configuring-cache-control-and-expires-headers]] ==ステップ3—Cache-ControlおよびExpiresヘッダーの構成

ETagファイル検証ヘッダーに加えて、Cache-ControlExpiresの2つのキャッシュ制御応答ヘッダーがあります。 Cache-Controlは新しいバージョンであり、Expiresよりも多くのオプションがあり、キャッシュ動作をより細かく制御したい場合は一般的に便利です。

これらのヘッダーが設定されている場合、リクエストされたファイルは、再度リクエストすることなく、一定時間(永久に含む)ローカルに保持できることをブラウザに伝えることができます。 ヘッダーが設定されていない場合、ブラウザーは常にサーバーにファイルを要求し、200 OKまたは304 Not Modifiedの応答を期待します。

ヘッダーモジュールを使用して、これらのHTTPヘッダーを設定できます。 ヘッダーモジュールはコアNginxモジュールです。つまり、使用するために個別にインストールする必要はありません。

ヘッダーモジュールを追加するには、デフォルトのNginx構成ファイルをnanoまたはお気に入りのテキストエディターで開きます。

sudo nano /etc/nginx/sites-available/default

次のようなserver構成ブロックを見つけます。

/etc/nginx/sites-available/default

. . .
# Default server configuration
#

server {
    listen 80 default_server;
    listen [::]:80 default_server;

. . .

ここに次の2つの新しいセクションを追加します。1つはserverブロックの前に、さまざまなファイルタイプをキャッシュする時間を定義し、もう1つはその中にキャッシュヘッダーを適切に設定します。

変更された/ etc / nginx / sites-available / default

. . .
# Default server configuration
#

# Expires map
map $sent_http_content_type $expires {
    default                    off;
    text/html                  epoch;
    text/css                   max;
    application/javascript     max;
    ~image/                    max;
}

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    expires $expires;
. . .

serverブロックの前のセクションは、新しいmapブロックであり、ファイルタイプとその種類のファイルをキャッシュする期間との間のマッピングを定義します。

このマップではいくつかの異なる設定を使用しています:

  • デフォルト値はoffに設定されており、キャッシュ制御ヘッダーは追加されません。 キャッシュがどのように機能するかについての特別な要件はありません。

  • text/htmlの場合、値をepochに設定します。 これは、キャッシュを明示的に行わない特別な値であり、Webサイト自体が最新かどうかを常にブラウザに確認させます。

  • スタイルシートとJavascriptファイルであるtext/cssapplication/javascriptの場合、値をmaxに設定します。 これは、ブラウザがこれらのファイルをできる限りキャッシュすることを意味し、通常これらのファイルが多数あるため、要求の量を大幅に削減します。

  • 最後の設定は~image/用です。これは、MIME type名にimage/を含むすべてのファイルタイプ(image/jpgimage/pngなど)に一致する正規表現です。 。 スタイルシートのように、安全にキャッシュできるWebサイトには多くの画像があるため、これもmaxに設定します。

サーバーブロック内で、expiresディレクティブ(ヘッダーモジュールの一部)がキャッシュ制御ヘッダーを設定します。 マップに設定された$expires変数の値を使用します。 この方法では、結果のヘッダーはファイルの種類によって異なります。

ファイルを保存して閉じ、終了します。

新しい構成を有効にするには、Nginxを再起動します。

sudo systemctl restart nginx

次に、新しい構成が機能することを確認します。

[[step-4 -—- testing-browser-caching]] ==ステップ4—ブラウザのキャッシュをテストする

テストHTMLファイルに対して、以前と同じリクエストを実行します。

curl -I http://localhost/test.html

今回は応答が異なります。 2つの追加のHTTP応答ヘッダーが表示されます。

Nginx応答ヘッダー

HTTP/1.1 200 OK
Server: nginx/1.10.0 (Ubuntu)
Date: Sat, 10 Sep 2016 13:48:53 GMT
Content-Type: text/html
Content-Length: 1024
Last-Modified: Sat, 10 Sep 2016 13:11:33 GMT
Connection: keep-alive
ETag: "57d40685-400"
Expires: Thu, 01 Jan 1970 00:00:01 GMT
Cache-Control: no-cache
Accept-Ranges: bytes

Expiresヘッダーは過去の日付を示し、Cache-Controlno-cacheで設定されます。これは、ファイルの新しいバージョンがあるかどうかを常にサーバーに確認するようにブラウザーに指示します(%を使用) (t3)sヘッダー(前と同じ)。

テスト画像ファイルとの差分応答が表示されます。

curl -I http://localhost/test.jpg

Nginx応答ヘッダー

HTTP/1.1 200 OK
Server: nginx/1.10.0 (Ubuntu)
Date: Sat, 10 Sep 2016 13:50:41 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Sat, 10 Sep 2016 13:11:36 GMT
Connection: keep-alive
ETag: "57d40688-400"
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Cache-Control: max-age=315360000
Accept-Ranges: bytes

この場合、Expiresは遠い将来の日付を示し、Cache-Controlにはmax-age情報が含まれます。これは、ファイルを秒単位でキャッシュできる時間をブラウザに通知します。 これは、ダウンロードされた画像をできる限りキャッシュするようブラウザに指示するため、この画像の以降の表示ではローカルキャッシュが使用され、サーバーにリクエストが送信されません。

JavaScriptファイルとスタイルシートファイルの両方にキャッシュヘッダーも設定されているため、結果はtest.jstest.cssの両方で同様になるはずです。

これは、キャッシュ制御ヘッダーが適切に構成されていることを意味し、Webサイトはパフォーマンスの向上と、ブラウザーのキャッシュによるサーバーリクエストの減少の恩恵を受けます。 Webサイトのコンテンツに基づいてキャッシュ設定をカスタマイズする必要がありますが、この記事のデフォルトは開始するのに妥当な場所です。

結論

headersモジュールを使用して、任意のヘッダーを応答に追加できますが、キャッシュコントロールヘッダーを適切に設定することは、最も便利なアプリケーションの1つです。 特にモバイルキャリアネットワークのように待ち時間が長いネットワークで、Webサイトユーザーのパフォーマンスが向上します。 また、速度テストを結果に組み込む検索エンジンでのより良い結果につながる可能性があります。 ブラウザのキャッシュヘッダーの設定は、GoogleのPageSpeedテストツールからの主要な推奨事項の1つです。

ヘッダーモジュールの詳細については、in Nginx’s official headers module documentationを参照してください。

Related