テレビ放映に備えてWordPressサイトにCloudFrontを設置した話

2014/10/16
ウェブ業界情報 社長ブログ

先日弊社のお客様が夜のビジネス番組で放映される予定だと連絡があったので何かサーバー負担を軽減する策を考えてみました。

ちょうどネット界隈では「CloudFlare、全ユーザーにSSL接続を無料提供」とかいうニュースが出ていたのでそうかCDNかと思い、早速CloudFlareをみてみたのだが、弊社で使っているDNSサービスとの相性やサービスのダウンタイムもあると散見したのでそれではAmazon CloudFrontをやってみようとなりました。

CDNというとこれまではAkamaiさんなどが有名で「凄い仕組みだけどお高いんでしょう」と思っていたので弊社では利用する機会がなかったのですが、こちらの紹介サイトをみるととても簡単に設置できるという書き方だったのでやってみることにした。ちなみにS3のホスティングの時もこのサイトを見て「やべっ簡単そうだ」と思ったのがきっかけなのでこういった表現は新しいサービスを取っ付き易くするのに有効だと思いました。

さて、早速着手しようとしたところで選択肢が出てきました。

1. 紹介サイトにあるようにファイルをCDN経由にするためにCSS, JavaScriptなどのパスを書き換える
2. パスを書き換えずに全て自動でCloudFront経由にする

という2種類だったのですが、迷わず2でやってみました。これはCloudFrontをリバースプロキシとして利用する方法となり、この記事「WP管理者必見!AWSで構築する新スケーラブルなWordPress構成〜CloudFront as Reverse Proxy」が役に立ちましたが、この記事と違う箇所がいくつかありました。1つは既存の外部のホスティングを使って実装したかった点と、さらにCloudFrontのアドレスをそのまま使いたくなかった点です。CookieとかHeaderとかオリジンとかの設定をどうすればよいのかわからなかったので、得意そうな人を探すことにしました。

…でCloudFrontの経験者様に話を聞いてわかったことがあるので、まとめたいと思います。

  • Origin Domain Name:これはホストアドレスを入れる。
  • Forward Cookies:ログイン時などに発行されるCookie名を調べて逐一CloudFrontのWhite Listに登録
  • Forward Headers:Whitelist にしてHost を設定
  • DNS:wwwをCloudFrontのアドレスに変更

これでサイトが見え、WordPressにログインも出来ました。

が、ビジュアルエディタが使えない問題があったのでこれはこの記事「WordPress visual editor not visible (because of user-agent sniffing)」を参考にfunction.phpを直しました。

最適なソリューションをご提案します。

アロハワークスではお客様の立場から規模、予算、拡張性などを考慮し、お手伝いできる分野について無料でご提案いたします。お困りの点について、まずは一度ご相談ください。