開発運用

Nginx キャッシュ設定方法

最終更新： 2月 24, 2025
1分未満

Nginxにおけるブラウザキャッシュの活用方法: ヘッダーを使用した最適化

ウェブサイトのパフォーマンスを向上させるための手法のひとつに、ブラウザキャッシュの利用があります。Nginxを使っている場合、特にUbuntu 16.04で運用している環境において、HTTPヘッダーを活用することによって、効率的にキャッシュを管理し、ユーザーのブラウザにリソースを保持させることができます。本記事では、Nginxのheaderを使用したブラウザキャッシュの最適化方法について、具体的な手順とともに解説します。

1. ブラウザキャッシュの仕組みとは？

ブラウザキャッシュとは、ウェブサイトにアクセスする際に、ユーザーのブラウザがウェブサーバーから取得した静的リソース（画像、CSS、JavaScriptなど）を一時的に保存し、次回以降のアクセス時に再度サーバーから取得せずにローカルに保存されたリソースを使用する仕組みです。これにより、サーバーへの負荷を軽減し、ページの読み込み速度が向上します。

関連記事

2. Nginxでのキャッシュ制御の基本

Nginxでは、Cache-ControlやExpiresといったHTTPヘッダーを設定することによって、リソースのキャッシュ制御を行います。これらのヘッダーを正しく設定することで、ブラウザがどの程度リソースをキャッシュするか、そしてその期限を指定できます。

  • Cache-Controlヘッダー: このヘッダーを使って、リソースのキャッシュポリシーを指定します。例えば、max-ageを使ってキャッシュが有効な期間を設定することができます。
  • Expiresヘッダー: このヘッダーはリソースがキャッシュされる期限を指定します。Expiresは特定の日時を指定するため、Cache-Controlと併用されることが多いです。

3. Ubuntu 16.04でNginxを使ったブラウザキャッシュ設定方法

ここでは、Ubuntu 16.04でNginxを使用して、ブラウザキャッシュを設定する方法を説明します。

3.1 Nginxの設定ファイルを開く

まずは、Nginxの設定ファイルを開きます。通常、Nginxの設定ファイルは/etc/nginx/nginx.confや、サイト固有の設定ファイル（例えば/etc/nginx/sites-available/default）にあります。以下のコマンドで設定ファイルを開きます。

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

3.2 キャッシュ設定を追加する

Nginxの設定ファイル内で、serverブロックやlocationブロックにキャッシュ制御のヘッダーを追加します。例えば、静的リソース（画像、CSS、JavaScript）のキャッシュ期間を設定するには、以下のように設定します。

nginx
server {
    listen 80;
    server_name example.com;
    
    location / {
        # 通常のリクエスト処理
        try_files $uri $uri/ =404;
    }

    location ~* \.(jpg|jpeg|png|gif|css|js|woff|woff2|ttf|svg|eot)$ {
        # 静的ファイルのキャッシュ設定
        add_header Cache-Control "public, max-age=31536000, immutable";
        add_header Expires "Thu, 31 Dec 2037 23:55:55 GMT";
    }
}

上記の設定では、画像（jpg, jpeg, png, gif）、CSS、JavaScript、フォントファイル（woff, woff2, ttf, svg, eot）に対して、以下の設定を行っています。

  • Cache-Control: publicは全てのキャッシュを許可し、max-age=31536000はリソースが最大で1年間キャッシュされることを指定しています。また、immutableを追加することで、そのリソースが変更されないことを示しています。
  • Expires: 具体的な日付を設定することによって、リソースがキャッシュされる期限を指定しています。この場合、2037年12月31日までキャッシュが有効となります。

3.3 設定を確認する

設定ファイルを編集したら、Nginxの設定をテストしてエラーがないか確認します。

bash
sudo nginx -t

エラーがないことを確認したら、設定を再読み込みします。

bash
sudo systemctl reload nginx

4. キャッシュの有効期限を動的に設定する

静的リソースの有効期限を設定するだけではなく、動的コンテンツにも適切なキャッシュを設定することが重要です。例えば、APIレスポンスやHTMLファイルなどには、動的な内容が含まれるため、Cache-Controlヘッダーにno-storeやprivateを使用してキャッシュを制御します。

以下のように、動的コンテンツに対する設定を行います。

nginx
location /api/ {
    # APIレスポンスのキャッシュ設定
    add_header Cache-Control "no-store, no-cache, must-revalidate";
    add_header Expires "0";
}

この設定により、/api/以下のリクエストに対して、ブラウザはキャッシュを行わないように設定されます。

5. キャッシュ戦略の最適化

キャッシュの設定はサイトによって異なりますが、以下のような戦略を採ることができます。

  • 長期的なキャッシュ: 画像、CSS、JavaScriptなど、変更が少ないリソースには長期間のキャッシュを設定します。これにより、ユーザーが再度訪問した際にリソースの再ダウンロードを避けることができます。
  • 短期的なキャッシュ: 動的コンテンツや頻繁に変更されるリソースには、短期間のキャッシュ設定を行い、適宜更新を反映させます。

6. 効果的なキャッシュ管理のためのツール

Nginxの設定だけでなく、以下のツールや方法を併用することで、キャッシュの効果を最大化できます。

  • ブラウザキャッシュの監視: Google ChromeやFirefoxの開発者ツールを使用して、キャッシュが正しく動作しているかを確認することができます。
  • Purging Cache: リソースが更新された場合、古いキャッシュを削除することが重要です。Nginxではngx_cache_purgeモジュールを使用してキャッシュの削除を自動化できます。

7. まとめ

Nginxを使用したブラウザキャッシュの設定は、ウェブサイトのパフォーマンスを大きく向上させる手段の一つです。適切なCache-ControlやExpiresヘッダーを設定することにより、ユーザーのブラウザにリソースをキャッシュさせ、再度アクセスする際の読み込み速度を速め、サーバーの負荷を軽減することができます。サイトの特性に応じてキャッシュ戦略を最適化し、ブラウザキャッシュを効果的に活用しましょう。

最終更新： 2月 24, 2025
1分未満
Back to top button