【WEBサイト表示速度高速化シリーズ第二段】今回は、Apacheのキャッシュモジュールである「mod_expires」「mod_cache」「mod_cache_disk」を使い、クライアントサイド（ブラウザ）キャッシュとサーバーサイドキャッシュを設定します。静的リソースのHTTPヘッダー内で、有効期日や最大経過時間を設定すると…

【WEBアプリ高速化】Apacheのキャッシュモジュール「mod_expires」「mod_cache」「mod_cache_disk」を使いキャッシュを設定する

今回は、Apache のキャッシュモジュールである「mod_expires 」「mod_cache 」「mod_cache_disk 」を使い、 クライアントサイド（ブラウザ）キャッシュとサーバーサイドキャッシュを設定します。 
静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、 ブラウザがネットワークからではなくローカルディスクから以前にダウンロードしたリソースを読み込むようになり、WEB ページの表示高速化につながります。 
通常このしくみをクライアントサイドキャッシュと言いますが、この効果が現れるのは２回目のアクセスからです。 
今回は同時に、サーバーサイドキャッシュも設定し、初回のアクセス時にもキャッシュが効くようにします。 
キャッシュから読み込まれるリソース分、HTTP リクエストが無くなるため、サーバ負荷の軽減にもなります。 例えばブログサイトの画像であったり、 常に変動しないようなものに設定すると表示の高速化につながりますので是非設定しておきたいところです。
尚、今回のデモンストレーションは linux CentOS7 ですが、Amazon Linux でも同様の手順で設定できます。 
Apache のバージョンは 2.4 です。
<h2 id="各モジュールについて">各モジュールについて</h2>
まず、それぞれのモジュールの役割ですが以下のようになります。
<dl>
<dt>mod_cache</dt>
<dd>キャッシュの扱い方を設定するモジュール</dd>
<dt>mod_cache_disk</dt>
<dd>どのキャッシュをどこへ保存するかを設定するモジュール</dd>
<dt>mod_expires</dt>
<dd>キャッシュの期限を設定するモジュール</dd>
</dl>
<h2 id="モジュールがロードされているか確認">モジュールがロードされているか確認</h2>
まずは各モジュールがロードされているか確認します。 「/etc/httpd/conf.modules.d/」にある「00-base.conf 」を vim コマンドで開きます。
<pre><code class="hljs language-shell"># vim コマンドを使って「00-base.conf 」を開く
vim /etc/httpd/conf.modules.d/00-base.conf
</code></pre>
開いたら、以下の記載がある事を確認します。コメントアウトされている場合は、外します。 
もし記述がなければそのモジュール自体が入っていないので、導入する必要があります。 
（とはいえ、通常であれば Apache 2 系ならデフォルトで入っています。のはず。）
<pre><code class="hljs language-shell">LoadModule cache_module modules/mod_cache.so
LoadModule cache_disk_module modules/mod_cache_disk.so
LoadModule expires_module modules/mod_expires.so
</code></pre>
コメントアウトなく記述があれば確認 OK 。 
コメントアウトされていた場合は外し、一度 Apache を再起動します。
<pre><code class="hljs language-shell"># Apache 再起動
service httpd restart
</code></pre>
<h2 id="モジュールの設定">モジュールの設定</h2>
ではモジュールの設定を行っていきます。今回は、専用に conf ファイルを作成して記述していきます。
<ul>
<li>場所
<ul>
<li>/etc/httpd/conf.d</li>
</ul>
</li>
<li>ファイル名
<ul>
<li>mod_cache_setting.conf</li>
</ul>
</li>
</ul>
<pre><code class="hljs language-shell"># vim コマンドを使って「mod_cache_setting.conf 」を開く
vim /etc/httpd/conf.d/mod_cache_setting.conf
</code></pre>
ファイルを（作成）開いたら、以下を記述します。
<pre><code class="hljs language-shell">&#x3C;IfModule mod_cache.c>
 &#x3C;IfModule mod_cache_disk.c>
 CacheRoot /var/tmp/cache
CacheEnable disk /
&#x3C;/IfModule>
 CacheIgnoreCacheControl On
CacheIgnoreNoLastMod On
CacheDefaultExpire 86400
 CacheMaxExpire 2592000
&#x3C;/IfModule>
&#x3C;ifModule mod_expires.c>
 ExpiresActive On
# Default
 ExpiresDefault "access plus 0 seconds"
 # JavaScript
 ExpiresByType text/js "access plus 1 month"
 ExpiresByType text/javascript "access plus 1 month"
 ExpiresByType application/javascript "access plus 1 month"
 ExpiresByType application/x-javascript "access plus 1 month"
 # CSS
 ExpiresByType text/css "access plus 1 month"
 # images
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/jpg "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType image/svg+xml "access plus 1 month"
 # Favicon and cursor images
 ExpiresByType image/x-icon "access plus 1 month"
 # PDF
 ExpiresByType application/pdf "access plus 1 month"
 # Fonts
 ExpiresByType application/x-font-ttf "access plus 1 month"
 ExpiresByType application/x-font-woff "access plus 1 month"
 ExpiresByType application/x-font-opentype "access plus 1 month"
 ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
&#x3C;/ifModule>
</code></pre>
上記の記述に関して、上から説明します。
<dl>
<dt>CacheRoot</dt>
<dd>キャッシュを保存する場所をフルパスで指定します。</dd>
<dt>CacheEnable</dt>
<dd>キャッシュストレージタイプを指定します。</dd>
<dd>
 <dl>
 <dt>mem /manual</dt>
 <dd>メモリ</dd>
 <dt>disk /</dt>
 <dd>ディスクストレージ</dd>
 <dt>fd /images</dt>
 <dd>より細かく設定する場合</dd>
 </dl>
</dd>
<dt>CacheIgnoreCacheControl</dt>
<dd>強制的にキャッシュを返す設定。</dd>
<dd>クライアントからのリクエストに「no-cache」の値、つまり、 キャッシュされているデータを返すなとあってもそれを無視し、キャッシュを返す設定。</dd>
<dt>CacheIgnoreNoLastMod</dt>
<dd>Last-Modifiedが指定されていないドキュメントでもキャッシュするようになる。（通常ではLast-Modified による最終修正時刻の無いドキュメントはキャッシュされない）</dd>
<dt>CacheDefaultExpire</dt>
<dd>デフォルトのキャッシュ期限。秒で記述します。ここでは１日に設定しています。</dd>
<dt>CacheMaxExpire</dt>
<dd>キャッシュの最大保持期限。秒で記述します。ここでは１ヵ月に設定しています。</dd>
<dt>ExpiresActive</dt>
<dd>モジュールの機能を有効・無効にする設定。ここではONにしています。</dd>
<dt>ExpiresDefault</dt>
<dd>デフォルトの有効期限。</dd>
<dd>ExpiresByTypeディレクティブで指定していないものの有効期限はここで設定されます。今回の場合は、指定のないものに関してはキャッシュを効かせない設定にする為、０秒を指定しています。</dd>
<dt>ExpiresByType</dt>
<dd>キャッシュの有効期限を指定。MIMEタイプと有効期限を記述します。</dd>
<dd>
有効期限には、以下の書式が使えます。
<ul>
<li>months</li>
<li>weeks</li>
<li>days</li>
<li>hours</li>
<li>minutes</li>
<li>seconds</li>
</ul>
</dd>
</dl>
ちなみに今回は、Google Developers / PageSpeed Insights のガイドラインに沿って設定してみました。 
主なルールはおおよそ、以下の通り
<ul>
<li>キャッシュ有効期限は、１週間以上１年以内で設定</li>
<li>有効期限は、1 年以上先には設定しない（RFC のガイドラインに違反する）</li>
<li>HTML はキャッシュさせない</li>
<li>基本的にはある程度長めに設定をして、変更がある場合には URL フィンガープリントで対応する</li>
</ul>
記述が終わったらファイルを閉じて、記述・書式が正しいかテストを行います。
<pre><code class="hljs language-shell">httpd -t
Syntax OK ←これが出れば OK
</code></pre>
次に、CacheRoot ディレクティブで指定した場所へ、キャッシュを格納するためのディレクトリを作成します。
<pre><code class="hljs language-shell">mkdir /var/tmp/cache
</code></pre>
作成したディレクトリの所有者を apache へ変更します。
<pre><code class="hljs language-shell">chown apache:apache /var/tmp/cache
</code></pre>
設定を適用させる為、Apache を再起動します。
<pre><code class="hljs language-shell"># Apache 再起動
service httpd restart
</code></pre>
<h2 id="まとめ">まとめ</h2>
以上で設定は完了です。サーバーサイドのキャッシュが正しく行われているかどうかは、CacheRoot ディレクティブで指定した場所を見てキャッシュが生成されていれば確認できます。 
最後に一点、キャッシュの有効期限に関しては慎重に決めてください。公開しているページに 一度キャッシュを設定すると、クライアントには有効期限に達するまでキャッシュが表示されます。 
更新される頻度などと相談して上手に調整していく事が大切です。

Author