前書き

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

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

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

前提条件

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

この記事では、ヘッダーモジュールに加えて、Nginxのマップモジュールも使用します。 マップモジュールの詳細については、https://www.digitalocean.com/community/tutorials/how-to-use-nginx-s-map-module-on-centos-7 [Nginxのマップの使用方法]を参照してください。 CentOS 7のモジュール]。

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

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

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

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

`+ truncate `を使用して、デフォルトのNginxディレクトリに ` test.html +`という名前のファイルを作成します。 この拡張機能は、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

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

手順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.1
Date: Thu, 06 Oct 2016 10:21:04 GMT
Content-Type: text/html
Content-Length: 1024
Last-Modified: Thu, 06 Oct 2016 10:20:44 GMT
Connection: keep-alive

Accept-Ranges: bytes

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

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

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

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

応答は異なります。

Output: Nginx response headersHTTP/1.1 304 Not Modified
Server: nginx/1.10.1
Date: Thu, 06 Oct 2016 10:21:40 GMT
Last-Modified: Thu, 06 Oct 2016 10:20:44 GMT
Connection: keep-alive
ETag: "57f6257c-400"

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

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

次のステップでは、ヘッダーモジュールを使用して、キャッシュ制御情報を追加します。 これにより、ブラウザはサーバーに明示的に問い合わせなくても一部のファイルをローカルにキャッシュできます。

手順3-Cache-ControlおよびExpiresヘッダーの構成

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

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

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

ヘッダーモジュールを追加するには、デフォルトのサーバーブロックNginx設定ファイルを + vi +`で開きます(https://www.digitalocean.com/community/tutorials/installing-and-using-the-vim-text-editor- on-a-cloud-server#modal-editing [+ vi +`の簡単な紹介])またはお好みのテキストエディター。

sudo vi /etc/nginx/nginx.conf

次のような `+ server +`設定ブロックを見つけます。

/etc/nginx/nginx.conf

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

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

変更された/etc/nginx/nginx.conf

. . .









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


. . .

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

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

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

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

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

  • 最後の設定は、「〜image / +」用です。これは、_MIME type_名に「 image / 」を含むすべてのファイルタイプに一致する正規表現です(「 image / jpg 」や「 image / png 」 `)。 スタイルシートと同様に、Webサイトには多くの場合、安全にキャッシュできる画像があるため、これも「 max +」に設定します。

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

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

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

sudo systemctl restart nginx

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

ステップ4-ブラウザーキャッシュのテスト

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

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

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

Nginx応答ヘッダー

HTTP/1.1 200 OK
Server: nginx/1.10.1
Date: Thu, 06 Oct 2016 10:24:42 GMT
Content-Type: text/html
Content-Length: 1024
Last-Modified: Thu, 06 Oct 2016 10:20:44 GMT
Connection: keep-alive
ETag: "57f6257c-400"


Accept-Ranges: bytes

`+ Expires `ヘッダーには過去の日付が表示され、 ` Cache-Control `には ` no-cache `が設定されます。これは、ブラウザにファイルの新しいバージョンがあるかどうかを常に問い合わせるように指示します(前と同様に、 ` ETag +`ヘッダー)。

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

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

Nginx応答ヘッダー

HTTP/1.1 200 OK
Server: nginx/1.10.1
Date: Thu, 06 Oct 2016 10:25:02 GMT
Content-Type: image/jpeg
Content-Length: 1024
Last-Modified: Thu, 06 Oct 2016 10:20:46 GMT
Connection: keep-alive
ETag: "57f6257e-400"


Accept-Ranges: bytes

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

結果は + test.js`と + test.cssの両方で似ているはずです。JavaScriptとスタイルシートの両方のファイルにはキャッシュヘッダーも設定されています。

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

結論

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

ヘッダーモジュールの詳細については、http://nginx.org/en/docs/http/ngx_http_headers_module.html [Nginxの公式ヘッダーモジュールドキュメント]をご覧ください。