最近、雨の日が続いて自転車通勤ができていない naoya です。

今日は、先週ぐらいからフォト蔵に導入した Apache で mod_expires と mod_rewrite を使ったウェブサーバへのアクセスを減らす方法を紹介します。

通常のウェブサーバは、更新されていないリリースに対してアクセスすると、ステータスコード 304 とIf-Modified-Since ヘッダをつけて応答データを返しますが、CSS や JavaScript など比較的更新頻度の少ないファイルに対して、毎回応答を返すのはウェブサーバから見ると無駄なアクセスです。

Apache の mod_expires と mod_rewrite を使うと、この無駄なアクセスをブラウザキャッシュを有効活用にすることにより、静的なファイルに対するアクセスを減らすことができます。

まず、仕組みから説明すると、とても単純で mod_rewrite を使って CSS や JavaScript など比較的更新頻度の少ないファイルのファイル名を一意に見せかけます。同時に mod_expires を使って Expires ヘッダを設定することによりブラウザキャッシュを使って、ウェブサーバにアクセスさせないという方法です。この方法を使うと、

それでは、さっそく設定方法を紹介します。

1. Apahce に mod_expires と mod_rewrite が組み込まれていることを確認するため、Apache の設定ファイル httpd.conf を確認します。次のような設定がない場合は、追加してください。

  LoadModule expires_module modules/mod_expires.so
  LoadModule rewrite_module modules/mod_rewrite.so

2. mod_rewrite を使って、CSS と JavaScript のファイル名が一意になるので、実際の CSS と JavaScript ファイル名でアクセスできるように URL の変換ルールを次のように設定します。/css や /js は、フォト蔵の CSS と JavaScript ファイルのパスなので、環境に応じて置き換えてください。

  RewriteEngine on
  RewriteRule  ^/css/(.*?)\.v\d+\.(.*)$ /css/$1.$2 [QSA,L]
  RewriteRule  ^/js/(.*?)\.v\d+\.(.*)$ /js/$1.$2 [QSA,L]

3. mod_expires の設定を有効にして、CSS と JavaScript の Expired Date を設定します。

  ExpiresActive On
  ExpiresByType text/css "access plus 1 days"
  ExpiresByType application/x-javascript "access plus 1 days"

4. ページで読み込んでいる CSS と JavaScript のファイル名を一意に変更します。フォト蔵 では、すべて SVN で管理しているため、SVN リビジョンをつけて、常に一意になるように変更しました。

あとは、Apache を再起動して、HTTP のヘッダ情報に Expired が含まれていること、正しく CSS と JavaScript にアクセスできることを確認します。

この設定をするときの注意点は、mod_expires の設定に ExpiresDefault という項目があるのですがこの設定をすると、すべてのファイルに対して Expired ヘッダをつけてしまいます。そのため、動的なコンテンツまでブラウザキャッシュを使うようになってしまいますので注意してください。
また、Expired の期間は最初は 1 日くらいに設定して、徐々に長くていくのがいいと思います。

この設定をするにあたり、「mod_expiresとmod_rewriteを使ってサイトの帯域節約と体感速度を向上させる方法」を参考にさせていただきました。貴重な情報ありがとうございました。