プログラミング

SSLありのWordPressだけど高速化したいからCloudFlareのCDNを無料で使う

高橋文樹

2011 年 12 月 9 日
読了5分（3,306文字）
SSL WordPress サーバ

この投稿は 12年半前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

最近WordPress界隈では高速化の話題が多いですが、僕もちょくちょく試しています。静的キャッシュのプラグインとかYahooの人が提唱している14の秘訣は昔から有名ですが、最近のホットトピックは以下の2つじゃないでしょうか。

nginx（特にproxy cache）による高速化
CDNの導入

nginxのproxy cacheはdogmap.jpかさくらたんどっとび〜ずを見れば設定できると思います。今回は2番目のCDN導入ですね。

CDNとは？

CDNとはコンテンツ・デリバリー・ネットワークの略でして、社長秘書みたいなものですね。普通WebサイトというのはHTML・JS・CSS・画像・その他（Flashとか）から構成されています。WordPressのようなPHPアプリケーションは最終的にHTMLを吐き出すので、ネットワーク的にはHTMLと同質になりますが、吐き出される内容は都度変わります。Amazonの「こんにちは、◯◯さん」の部分などがそうです。

PHPはサーバがごちゃごちゃ計算して返す必要がありますが、画像ファイルやCSSなどは単に求められているものをそのまま返せば済むので、大してリソースはいりません。

CDNの仕組みはこんな感じ

社長「大事なお客さんだったら俺に教えて、どうでもいい情報だったら適当に返事しておいて」

秘書「御意」

という状況ですね。

で、このCDNというのは高価だったのでGoogleやAdobeという膨大なアクセスを誇るサイトしか導入できなかったのですが、最近はCloudFlareという無料でもオッケーなCDNが誕生してしまったのでかなり敷居が低くなってきました。設定も簡単です。百式さんのサイトに導入方法が書いてあります。

CloudFlareはSSLありだと有料

さて、問題はこのCloudFlare無料版がSSLに対応していないということですね。SSLの場合はPro版（月額$20）利用者のみCloudFlareから証明書が代理で発行されるという仕様です。

Facebookみたいにサイト全体がSSLの場合はそれでもいいかもしれませんが、僕のサイトみたいに部分的にSSLという場合、そのためだけに年額$240払うのは嫌だなーという気分になってしまいます。まあ、ある程度収益を上げているサイトであれば、年額$240なんてタダみたいなものですが、僕のサイトはまだそうなっていないので……

対応方法

さて、ではどうやって対応するかです。基本的な理念は以下の通りです。

SSLの場合はCDNを経由しない
SSLを利用しない通常のページにおいて、画像・JS・CSSはサブドメイン（ex. s.example.jp）経由で読み込む
CloudFlareはs.example.jpのみキャッシュする

1. サブドメインを作成する

まず静的ファイルを読み込むサブドメインを作成します。example.jpであれば、s.example.jpとかでいいと思います。サブドメインの作成方法は環境によって異なるので、がんばってください。今回は下記のようなケースを想定します。

/var/www/example.jp #http://example.jpのドキュメントルート
/var/www/s.example.jp #http://s.example.jpのドキュメントルート

で、この静的ファイル用サブドメインからメインドメインへシンボリックリンクを張ります。「シンボリックリンクってなあに？」という方はググってください。SSH（黒い画面）が使えないサーバではこの方法は使えません。

cd /var/www/s.example.jp
#シンボリックリンク作成
ln -s /var/www/example.jp/wp-admin ./wp-admin
ln -s /var/www/example.jp/wp-includes ./wp-includes
ln -s /var/www/example.jp/wp-content ./wp-content

Apacheの場合は Options FollowSymLinks とかが必要ですが、よくわからない人はググってみてください。

さて、サーバの設定がきちんとしていれば、これでexample.jpとs.example.jpの静的ファイルは同じファイルを参照することになります。WordPressはデフォルトだと/wp-content/uploads/2011/12/photo.jpgといった具合に画像を保存しますが、下記のURLはまったく同じファイルを参照することになります。以下の2つのURLで同じ画像が表示されれば、上手く設定できているということになります。

http://example.jp/wp-content/uploads/2011/12/photo.jpg
http://s.example.jp/wp-content/uploads/2011/12/photo.jpg

これでとりあえずオーケーです。

2. URLを書き換える

さて、続いてURLの書き換えです。ここが一番めんどくさいんですが、がんばりましょう。

WordPressにおいて静的URLを読み込む方法は沢山ありますが、今回はAPIに準拠しているものみ読み込むという男前なルールで行きたいと思います。以前bloginfo削るメソッド意味ないということを書きましたが、なんかよくわからないURLの書き方をすると対応できないので、そういうのは切り捨てます。ob_startでなんとかするというのもありますが、やりたい人はやってみてください。

WordPressで静的ファイルを読み込まれるケースはだいたい以下の通りですね。

テーマにbloginfo(‘template_directory’)とか書いてる
投稿内に画像等の静的ファイルが記載される（メディアップローダでimgタグが書き込まれる場合）
プラグインなどによってJSやCSSがwp_headおよびwp_footerで出力される

これらのURLをSSLでない限りにおいてhttp://s.example.jpに書き換えてしまえばいいんですね。テーマのfunctions.phpにこんなのを書き込みます。

/**
 * 投稿内のsrc属性をCDN対応にする
 * @param string $content
 * @return string
 */
function _my_cdn_content($content){
     if(!is_ssl()){
          $upload_dir = wp_upload_dir();
          $upload_dir_url = $upload_dir['baseurl'];
          $upload_dir_cdn_url = str_replace('http://', 'http://s.', $upload_dir_url);
          $content = str_replace($upload_dir_url, $upload_dir_cdn_url, $content);
     }
     return $content;
}
add_filter('the_content', '_my_cdn_content');

/**
 * テーマディレクトリのURLをCDN対応にする
 * @param string $url
 * @return string
 */
function _my_static_url($url){
     if(!is_ssl()){
          //SSLじゃなかったらCDN用URLに変える
          $root_uri = home_url();
          $static_uri = str_replace('http://', 'http://s.', $root_uri);
          $url = str_replace($root_uri, $static_uri, $url);
     }
     return $url;
}
add_filter('template_directory_uri', '_my_static_url');

/**
 * wp_enqueue_scriptで読み込まれたJavascriptのSRC属性をCDN対応
 * @param type $src
 * @return type
 */
function _my_script_loader_src($src){
     $home_url = home_url();
     if(!is_ssl() && false !== strpos($src, $home_url)){
          $src = str_replace('http://', 'http://s.', $src);
     }
     return $src;
}
add_filter('script_loader_src', '_my_script_loader_src');

/**
 * CSSのURLを書き換える
 * @param string $tag
 * @return string
 */
function _my_style_loader_tag($tag){
     $home_url = home_url();
     if(!is_ssl() && false !== strpos('href="'.$home_url, $tag)){
          $tag = str_replace('href="http://', 'href="http://s.', $tag);
     }
     return $tag;
}
add_filter('style_loader_tag', '_my_style_loader_tag');

これでサイトを確認してみて、CSSやJSのURLがhttp://s.example.jpになっていれば問題ありません。

なお、プラグインによってはwp_enqueue_scriptなどのAPIを使っていないことがあるので、その場合はCDNの恩恵を受けられないことになります。