nginxでブラウザに静的ファイルをキャッシュさせる方法

このチュートリアルでは、nginxを設定して、静的ファイル（画像、CSS、JavaScriptファイルなど）のExpires HTTPヘッダーとCache-Control HTTPヘッダーのmax-ageディレクティブを将来の日付に設定する方法を説明します。これにより、これらのファイルが訪問者のブラウザにキャッシュされます。これにより、帯域幅が節約され、ウェブサイトがより速く表示されます（ユーザーがサイトを再度訪問した場合、静的ファイルはブラウザのキャッシュから取得されます）。

私はこれがあなたにとって機能することを保証するものではありません！

1 前提条件

私はあなたが動作するnginxのセットアップを持っていると仮定しています。例えば、このチュートリアルに示されているように：Ubuntu 12.04 LTSにPHP5（およびPHP-FPM）とMySQLサポートを持つNginxのインストール

2 nginxの設定

Expires HTTPヘッダーは、expiresディレクティブを使用して設定できます。このディレクティブは、http {}、server {}、location {}内、またはlocation {}ブロック内のif文の中に配置できます。通常、静的ファイル用のlocationブロックで使用します。例えば、以下のように：

| location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 365d; } |

上記の例では、すべての.jpg、.jpeg、.png、.gif、.ico、.css、.jsファイルに、ブラウザのアクセス時間から365日後の日付のExpiresヘッダーが付与されます。したがって、location {}ブロックには、ブラウザによってキャッシュ可能な静的ファイルのみが含まれていることを確認する必要があります。

変更後にnginxを再読み込みします：

/etc/init.d/nginx reload

expiresディレクティブで使用できる時間設定は次のとおりです：

• offは、ExpiresおよびCache-Controlヘッダーが変更されないことを意味します。
• epochは、Expiresヘッダーを1970年1月1日00:00:01 GMTに設定します。
• maxは、Expiresヘッダーを2037年12月31日23:59:59 GMTに設定し、Cache-Controlのmax-ageを10年に設定します。
• @プレフィックスのない時間は、ブラウザのアクセス時間に対する有効期限を意味します。負の時間を指定することができ、これによりCache-Controlヘッダーがno-cacheに設定されます。例：expires 10d;またはexpires 14w3d;
• @プレフィックスのある時間は、HhまたはHh:Mmの形式で書かれた絶対的な時刻の有効期限を指定します。ここで、Hは0から24まで、Mは0から59までの範囲です。例：expires @15:34;

次の時間単位を使用できます：

• ms：ミリ秒
• s：秒
• m：分
• h：時間
• d：日
• w：週
• M：月（30日）
• y：年（365日）

例：1h30mは1時間30分、1y6Mは1年6ヶ月です。

また、将来のExpiresヘッダーを使用する場合、コンポーネントが変更されるたびにコンポーネントのファイル名を変更する必要があります。したがって、ファイルにバージョン番号を付けるのが良いアイデアです。例えば、javascript.jsというファイルがあり、それを変更したい場合、変更されたファイルのファイル名にバージョン番号を追加する必要があります（例：javascript-1.1.js）ので、ブラウザはそれをダウンロードする必要があります。ファイル名を変更しない場合、ブラウザはキャッシュから（古い）ファイルを読み込みます。

Expiresヘッダーをブラウザのアクセス時間に基づいて設定する代わりに（例：expires 10d;）、ファイルの変更日付に基づいて設定することもできます（これは、ハードドライブに保存されている実際のファイルに対してのみ機能することに注意してください！）timeの前にmodifiedキーワードを使用します：

expires modified 10d;

3 テスト

設定が機能しているかどうかをテストするには、Firefox用のLive HTTP Headersプラグインをインストールし、Firefoxを通じて静的ファイル（例：画像）にアクセスします。Live HTTP Headersの出力には、Expiresヘッダーとmax-ageディレクティブを持つCache-Controlヘッダーが表示されるはずです（max-ageには秒単位の値が含まれます。例えば、31536000は1年後を意味します）：

4 リンク

• nginx HttpHeadersModule: http://wiki.nginx.org/HttpHeadersModule
• Firefox用Live HTTP Headersプラグイン: https://addons.mozilla.org/en-us/firefox/addon/live-http-headers/

著者について

ファルコ・ティメは、Timme Hosting（超高速nginxウェブホスティング）のオーナーです。彼はHowtoForgeのリードメンテイナー（2005年から）であり、ISPConfigのコア開発者の一人です（2000年から）。彼はまた、O’Reillyの書籍「Linux System Administration」にも貢献しています。