MENU
  1. ホーム
  2. Apache
  3. Apacheでmod_expiresを使ったキャッシュ有効期限の設定方法を解説

Apacheでmod_expiresを使ったキャッシュ有効期限の設定方法を解説

Apache

Apacheでmod_expiresを利用してキャッシュの有効期限を設定することは、Webサイトの表示速度を向上させ、ユーザー体験を改善する重要な施策です。キャッシュを適切に設定することで、ブラウザが静的ファイル（画像、CSS、JavaScriptなど）をローカルに保存し、再訪問時のロード時間を短縮できます。

しかし、キャッシュの設定が適切でないと、古いファイルが表示されたり、頻繁にサーバーリクエストが発生したりする原因となります。mod_expiresは、これらの課題を解決するために使用されるApacheモジュールで、特定のファイルタイプに対してキャッシュの有効期限を簡単に設定できます。

本記事では、mod_expiresの概要から導入方法、具体的なキャッシュ設定の例まで、ステップバイステップで詳しく解説します。初心者でもすぐに設定できるように、.htaccessを使った簡単な方法や、キャッシュの確認方法も紹介します。これにより、Webサイトの速度改善とサーバーの負荷軽減が実現できるでしょう。

目次

mod_expiresとは？仕組みとメリット

mod_expiresの概要

mod_expiresは、Apache HTTPサーバーで利用可能なモジュールの一つで、HTTPヘッダーの「Expires」や「Cache-Control」を通じて、クライアントブラウザがコンテンツをキャッシュする期間を指定する役割を担います。これにより、ブラウザがリソースを再ダウンロードする頻度を減らし、Webサイトのパフォーマンス向上とサーバー負荷の軽減が可能になります。

仕組み

mod_expiresは、ファイルの種類やディレクトリごとに異なるキャッシュポリシーを設定できます。たとえば、CSSやJavaScriptファイルは1週間キャッシュし、画像ファイルは1ヶ月キャッシュする、といった細かい調整が可能です。

クライアントがページを再訪問する際、ブラウザはローカルキャッシュを参照し、有効期限内であれば再ダウンロードを行わずにキャッシュ済みのデータを使用します。これにより、ページの読み込みが高速化します。

mod_expiresを使用するメリット

  1. ページ読み込み速度の向上
    ローカルキャッシュが利用されることで、不要なHTTPリクエストが減少し、ページが迅速に表示されます。
  2. サーバーの負荷軽減
    キャッシュが有効な場合、クライアントからのリクエストが減少するため、サーバーの負担が軽減されます。これにより、同時アクセス数が多い場合でも安定したパフォーマンスを維持できます。
  3. SEO効果の向上
    Googleなどの検索エンジンは、ページの読み込み速度を評価の一部としています。mod_expiresによるキャッシュ設定は、検索エンジン最適化（SEO）にも有利に働きます。
  4. ユーザー体験の向上
    ページ表示速度が速くなることで、訪問者の離脱率が低下し、ユーザー満足度が向上します。

次の項目では、Apacheにmod_expiresをインストールし、有効化する具体的な手順について説明します。

mod_expiresのインストールと有効化方法

1. mod_expiresがインストールされているか確認

まず、mod_expiresが既にインストールされているかを確認します。以下のコマンドを実行します。

apachectl -M | grep expires

このコマンドで、expires_module (shared)と表示されればmod_expiresはインストール済みで有効です。
表示されない場合は、次のステップでインストールを行います。

2. mod_expiresのインストール

Debian系（Ubuntuなど）とRHEL系（CentOSなど）では、以下のコマンドでmod_expiresをインストールできます。

Ubuntu/Debian

sudo apt update
sudo apt install apache2
sudo a2enmod expires

CentOS/RHEL

sudo yum install httpd
sudo yum install mod_expires

インストール後、Apacheを再起動して変更を反映します。

sudo systemctl restart apache2  # Ubuntu/Debian
sudo systemctl restart httpd    # CentOS/RHEL

3. Apacheの設定ファイルでmod_expiresを有効化

もしmod_expiresが有効でない場合は、Apacheの設定ファイルでモジュールを明示的にロードします。

/etc/httpd/conf/httpd.conf または /etc/apache2/apache2.confを開きます。

sudo nano /etc/apache2/apache2.conf

以下の行を追加または有効にします。

LoadModule expires_module modules/mod_expires.so

4. 有効化の確認

再度モジュールの一覧を表示してmod_expiresが有効か確認します。

apachectl -M | grep expires

問題がなければ、次は実際にmod_expiresを使って.htaccessでキャッシュの設定を行います。

.htaccessでキャッシュ設定を行う基本構文

1. .htaccessファイルの作成・編集

mod_expiresは.htaccessファイルを使って、ディレクトリごとに簡単にキャッシュ設定を行えます。まずは.htaccessファイルが存在するか確認し、無ければ作成します。

cd /var/www/html
nano .htaccess

もしすでに.htaccessが存在する場合は、以下のように編集します。

2. 基本的なmod_expiresの記述例

以下は、HTML、CSS、JavaScript、画像ファイルなどにキャッシュ有効期限を設定する基本的な例です。

# mod_expiresの有効化
ExpiresActive On  

# 各ファイルタイプごとのキャッシュ設定
ExpiresByType text/html "access plus 1 hour"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType application/pdf "access plus 1 year"

3. 基本構文の解説

  • ExpiresActive On：キャッシュ機能を有効にします。
  • ExpiresByType：ファイルのMIMEタイプに応じてキャッシュの有効期限を設定します。
  • access plus X [時間/日/月/年]：ファイルがアクセスされてからX時間後、またはX日後にキャッシュが無効になるよう設定します。

4. すべてのファイルに一律のキャッシュ設定を行う例

もしすべてのファイルに対して一律のキャッシュを設定したい場合は、次のように記述します。

ExpiresDefault "access plus 1 week"

これにより、すべてのファイルがアクセス後1週間キャッシュされます。

5. .htaccessが機能しているか確認

.htaccessファイルが正しく適用されているかを確認するには、Apacheの設定でAllowOverrideが有効である必要があります。

/etc/apache2/apache2.conf（Ubuntu系）または/etc/httpd/conf/httpd.conf（CentOS系）を開きます。

<Directory /var/www/html>
    AllowOverride All
</Directory>

変更後、Apacheを再起動します。

sudo systemctl restart apache2

次回はHTML、CSS、JavaScriptファイルの具体的なキャッシュ設定例を解説します。

HTML、CSS、JSファイルのキャッシュ設定例

1. HTML、CSS、JavaScriptファイルごとのキャッシュ設定

以下は、HTMLファイルは短期間、CSSやJavaScriptは長期間キャッシュする設定例です。

# mod_expiresの有効化
ExpiresActive On

# HTMLファイルのキャッシュ期間（1時間）
ExpiresByType text/html "access plus 1 hour"

# CSSファイルのキャッシュ期間（1週間）
ExpiresByType text/css "access plus 1 week"

# JavaScriptファイルのキャッシュ期間（1週間）
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"

2. 設定の意図

  • HTMLファイルは頻繁に更新される可能性があるため、キャッシュ期間を短く設定します。
  • CSSやJavaScriptは更新頻度が低く、長期間キャッシュすることでパフォーマンスを向上させます。

3. 変更後の反映を迅速に行う方法

CSSやJavaScriptファイルが更新された場合、キャッシュが残っていると変更が反映されないことがあります。この問題を防ぐには、ファイルのバージョン管理やURLのクエリパラメータを活用します。

例：クエリパラメータを使用

<link rel="stylesheet" href="style.css?v=1.2">
<script src="app.js?v=2.0"></script>

これにより、URLが変わるたびにキャッシュがリセットされ、新しいファイルが読み込まれます。

4. .htaccessでのキャッシュ制御の例

もし特定のディレクトリ内のファイルすべてに同じキャッシュ期間を設定したい場合は、ディレクトリ単位で記述します。

<Directory "/var/www/html/css">
    ExpiresActive On
    ExpiresByType text/css "access plus 1 week"
</Directory>

<Directory "/var/www/html/js">
    ExpiresActive On
    ExpiresByType application/javascript "access plus 1 week"
</Directory>

この設定により、CSSフォルダ内のすべてのCSSファイルと、JSフォルダ内のすべてのJavaScriptファイルにキャッシュが適用されます。

次は、画像ファイルのキャッシュ設定方法について解説します。

画像ファイルのキャッシュ有効期限の設定方法

1. 画像ファイルに対するキャッシュ設定の重要性

画像ファイルは通常頻繁に変更されることが少ないため、長期間のキャッシュを設定するのが一般的です。これにより、ユーザーの再訪問時にページの読み込み速度が大幅に向上し、サーバーの負荷も軽減されます。

2. 基本的なキャッシュ設定例

以下は、JPEG、PNG、GIFなどの画像ファイルに対して1ヶ月のキャッシュを設定する例です。

# mod_expiresの有効化
ExpiresActive On

# 画像ファイルのキャッシュ期間（1ヶ月）
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/webp "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"

3. 各ファイルタイプのキャッシュ期間の設定理由

  • JPEG/PNG/GIF/WebP：1ヶ月のキャッシュ。一般的な画像は頻繁に更新されないため長めに設定。
  • SVG：アイコンやロゴに使われることが多く、通常頻繁に変更しないため1ヶ月設定。
  • ICO（ファビコン）：1年キャッシュ。頻繁に変更しないことが多いため、長期間キャッシュ。

4. ディレクトリ単位でのキャッシュ設定

特定のディレクトリ内の画像すべてにキャッシュを適用したい場合は、ディレクトリ単位で設定を行います。

<Directory "/var/www/html/images">
    ExpiresActive On
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
</Directory>

これにより、/imagesディレクトリ内のすべての画像ファイルにキャッシュが適用されます。

5. ファイル更新時のキャッシュクリア方法

画像ファイルを更新した際にキャッシュが残ってしまう問題を防ぐために、ファイル名にバージョン情報を付与する方法が効果的です。

例：バージョン付きファイル名

<img src="logo.png?v=2.1" alt="サイトロゴ">

このようにクエリパラメータを付けることで、画像を更新するたびにキャッシュがクリアされます。

次は、キャッシュ期間の調整や更新反映の方法について詳しく解説します。

キャッシュ期間の調整と更新反映の方法

1. キャッシュ期間の調整が必要な理由

Webサイトのコンテンツは頻繁に更新されるものと、長期間変更しないものがあります。適切なキャッシュ期間を設定することで、パフォーマンス向上と最新情報の即時反映を両立できます。

2. キャッシュ期間の柔軟な設定方法

以下は、ファイルの種類ごとに異なるキャッシュ期間を設定する例です。

# mod_expiresの有効化
ExpiresActive On

# HTMLは1時間
ExpiresByType text/html "access plus 1 hour"

# CSSとJavaScriptは1週間
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"

# 画像は1ヶ月
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"

# PDFなどのドキュメントは1年
ExpiresByType application/pdf "access plus 1 year"

3. キャッシュクリアと更新反映の方法

1. クエリパラメータを使う方法

ファイルのURLにバージョンを付与することで、ブラウザのキャッシュを強制クリアできます。

<link rel="stylesheet" href="style.css?v=3.5">
<script src="app.js?v=2.1"></script>
<img src="logo.png?v=1.4" alt="ロゴ">

URLが変わるたびに新しいリソースとして認識され、古いキャッシュが使われません。

2. ETagを無効化してキャッシュ制御

ETag（Entity Tag）はファイルの更新日時やサイズに基づいてキャッシュを制御しますが、これを無効化することで更新反映を早められます。

# ETagの無効化
Header unset ETag
FileETag None

これにより、更新後すぐに新しいリソースがダウンロードされます。

4. キャッシュ期間の例外設定

特定のファイルだけ短期間キャッシュさせたい場合、<Files>ディレクティブを使います。

<Files "important-update.js">
    ExpiresByType application/javascript "access plus 1 hour"
</Files>

これにより、important-update.jsだけが1時間のキャッシュとなり、他のJavaScriptは1週間のキャッシュが維持されます。

5. .htaccessでキャッシュクリアを強制する方法

一時的にキャッシュをクリアしたい場合、no-cacheヘッダーを送信します。

<FilesMatch "\.(html|css|js)$">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
</FilesMatch>

これにより、HTML、CSS、JSファイルはキャッシュされず、常に最新のファイルがダウンロードされます。

次は、キャッシュ設定の確認とデバッグ方法を解説します。

キャッシュ設定の確認とデバッグ方法

1. キャッシュ設定が正しく適用されているかの確認方法

mod_expiresで設定したキャッシュが想定通り機能しているかを確認することは重要です。誤った設定があると、キャッシュが効かずにページ読み込み速度が低下したり、逆に古いファイルが表示され続けたりする可能性があります。

2. ブラウザでキャッシュヘッダーを確認する方法

Google ChromeやFirefoxなどのブラウザには、HTTPヘッダーを確認するデベロッパーツールが搭載されています。

Chromeでの確認手順

  1. ブラウザで対象のページを開きます。
  2. キーボードでF12キーを押し、デベロッパーツールを起動します。
  3. Network（ネットワーク）タブを選択し、ページをリロードします。
  4. キャッシュ対象のファイルをクリックし、Headers（ヘッダー）セクションを確認します。
  5. Cache-Control や Expires ヘッダーが表示されているかチェックします。

例：

Cache-Control: max-age=604800  
Expires: Mon, 25 Jan 2025 12:00:00 GMT

このように表示されていれば、キャッシュが正しく設定されています。

3. curlコマンドを使った確認方法

サーバー側で直接キャッシュヘッダーを確認したい場合は、curlコマンドが便利です。

curl -I https://example.com/style.css

-Iオプションを使うことで、HTTPヘッダーだけを取得できます。

出力例：

HTTP/1.1 200 OK  
Expires: Fri, 20 Jan 2024 12:00:00 GMT  
Cache-Control: max-age=2592000

このようにExpiresやCache-Controlヘッダーが返されれば、mod_expiresの設定が適用されています。

4. Apacheログでキャッシュの動作を確認する方法

Apacheのアクセスログやエラーログを使って、キャッシュの挙動を確認できます。

tail -f /var/log/apache2/access.log

キャッシュがヒットした場合は、304 Not Modifiedが記録されます。これは、リソースがキャッシュされており、再ダウンロードされていないことを示しています。

5. キャッシュ設定が反映されない場合の対処法

もしキャッシュが想定通り機能しない場合は、以下を確認してください。

  1. mod_expiresが有効か確認
   apachectl -M | grep expires


expires_module (shared)が表示されていなければ、mod_expiresがロードされていません。

  1. .htaccessが正しく動作しているか確認
    .htaccessが有効でない場合、Apacheの設定でAllowOverride Allが必要です。
   <Directory /var/www/html>
       AllowOverride All
   </Directory>
  1. Apacheを再起動
    設定変更後は、Apacheを再起動して変更を反映させます。
   sudo systemctl restart apache2

6. ブラウザキャッシュをクリアして再確認

キャッシュが適用されていないと感じた場合は、ブラウザのキャッシュをクリアして確認します。

Ctrl + Shift + R  （強制リロード）


またはキャッシュを削除してページを再読み込みします。

次は、異なるページで異なるキャッシュ設定を行う応用例を解説します。

応用例：異なるページで異なるキャッシュ設定を行う方法

1. ページごとに異なるキャッシュ設定を行う理由

Webサイト内のページやコンテンツには、更新頻度が異なるものがあります。たとえば、トップページやブログ記事は頻繁に更新される一方で、画像ギャラリーやダウンロード用PDFファイルは長期間変更されません。
このような場合、ページごとに異なるキャッシュ設定を行うことで、効率的にパフォーマンスを向上させ、かつ最新の情報を保持できます。

2. ディレクトリ単位で異なるキャッシュ期間を設定する方法

ディレクトリごとに個別のキャッシュルールを設定することで、更新頻度に応じた柔軟なキャッシュ制御が可能です。

例：/blogディレクトリと/imagesディレクトリで異なるキャッシュ設定

<Directory "/var/www/html/blog">
    ExpiresActive On
    ExpiresDefault "access plus 1 hour"
</Directory>

<Directory "/var/www/html/images">
    ExpiresActive On
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
</Directory>
  • ブログ記事（/blog）：1時間のキャッシュ設定で頻繁に更新されるページに適用。
  • 画像ファイル（/images）：1ヶ月のキャッシュ設定で、静的コンテンツのダウンロード回数を削減。

3. ファイル単位で異なるキャッシュ設定を行う方法

特定のファイルだけ異なるキャッシュ期間を設定したい場合は、<Files>ディレクティブを使用します。

例：重要なJavaScriptファイルのみ短期間キャッシュ

<Files "critical.js">
    ExpiresByType application/javascript "access plus 1 hour"
</Files>

<Files "app.js">
    ExpiresByType application/javascript "access plus 1 week"
</Files>
  • critical.js：更新頻度が高いため、1時間キャッシュ。
  • app.js：通常のJavaScriptは1週間キャッシュ。

4. クエリストリングでキャッシュを制御する方法

ファイル名にクエリパラメータを追加することで、ブラウザがキャッシュを回避して最新のファイルを取得できます。

<script src="app.js?v=3.1"></script>
<link rel="stylesheet" href="style.css?v=5.4">

v=3.1などのバージョン情報を変更することで、ファイル更新時にキャッシュクリアを強制します。

5. ページの種類によって異なるキャッシュポリシーを設定

特定のページタイプ（動的ページや静的ページ）に応じてキャッシュを使い分けることができます。

例：HTMLファイルの種類ごとに異なるキャッシュ設定

<FilesMatch "\.(html|htm)$">
    ExpiresByType text/html "access plus 2 hours"
</FilesMatch>

<FilesMatch "index.html">
    ExpiresByType text/html "access plus 30 minutes"
</FilesMatch>
  • すべてのHTMLファイル：2時間キャッシュ。
  • index.html（トップページ）：30分キャッシュで即時反映を優先。

6. キャッシュ期間の例外設定

no-cacheを使って特定のページはキャッシュしないよう設定できます。

<Files "update-notice.html">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
</Files>

これにより、重要な更新情報が含まれるページはキャッシュなしで即時反映されます。

次は、この記事のまとめを行います。

まとめ

本記事では、Apacheのmod_expiresを活用したキャッシュ有効期限の設定方法について詳しく解説しました。
mod_expiresを導入することで、ページの読み込み速度が向上し、サーバーの負荷を軽減することが可能です。

  • mod_expiresの仕組みとメリットを理解し、キャッシュ設定の重要性を確認しました。
  • HTML、CSS、JavaScript、画像などのファイルごとに適切なキャッシュ期間を設定する方法を紹介しました。
  • 特定のディレクトリやファイル単位で異なるキャッシュポリシーを適用し、柔軟な管理ができるようになりました。
  • クエリパラメータを利用して、キャッシュクリアを強制する方法も解説しました。

適切なキャッシュ設定を行うことで、Webサイトのユーザー体験が向上し、SEO対策にもつながります。必要に応じてキャッシュ期間を調整し、最新のコンテンツが常に正しく反映されるよう管理を徹底しましょう。

Apache
Apache キャッシュ設定 mod_expires

コメント

コメントする

目次