CloudFront経由の配信に変更

正式公開を前に、本サイトをCloudFront経由の配信に変更しました。
期待している効果は以下の2点となります。

DNSサーバをRoute53に変更

本サイトはzone apex(トップレベル)でサイト公開していますが、通常はzone apexではCNAMEレコードが利用できないため、CDNが利用できない仕様となります。

但しAWSのRoute53の場合は独自拡張のAliasレコードがあり利用可能となるため、DNSサーバをRoute53に変更しました。詳細は以下参照

よく訓練されたアップル信者、都元です。 Amazon Route 53は、AWSが提供するDNSサービスです。通常、ドメインを取得すると、ドメインレジストラからDNSがサービスで提供されることが多いと思います。費用は大抵

Amazon Certificate Managerで証明書取得

Amazon Certificate Managerにて証明書を取得します。
当該ドメインの特定アカウント(admin もしくはwebmaster等)で承認メールを受信できるよう事前に設定しておきます。

あとは画面に従いポチポチ進めるだけで難なくSSL証明書を取得することができました。

CloudFrontの設定

CloudFrontの基本的な設定は以下Qiita記事の通りで問題ありませんでした。

但し、本サイトの場合は不具合が発生したため、以下の箇所で修正を施しました。

不具合対応

  1. ユーザエージェントの転送
    標準ではOrigin側にUser-agentヘッダは転送されず、WordPressテーマによるレスポンシブデザイン変換が動作しない問題が発生しました。以下記事を参考にUser-AgentヘッダをOriginにそのまま転送されるように設定しました。
    # はじめに CloudFrontの導入の際に、特に何も設定を行わないと、CloudFrontを通過する時点で_User-agent_の値が「Amazon CloudFront」に書き換えられてしまいます。 その場合、今まで_User...
  2. JavaScriptやcssをhttpsに変換
    CloudFrontを経由してhttpsでアクセスした際、体裁が崩れる問題が発生した。
    原因はJavaScriptやcssがhttpで配信されてしまいブラウザが受付を拒否したことでした。本サイトはCloudFront⇒Originの通信をhttpにしているので、自動的にhttpで記載されてしまう模様です。
    そこで、SSL Insecure Content Fixerを用いて解決しました。
    詳しい使い方は以下サイトを参照ください。
    ワードプレス HTTPS化で、CSSやjavaScriptの読み込みがhttpのままになってしまう時。サクラインターネットのレンタルサーバーを使っていると、この現象が発生するかも。。。httpsのサイトでは、cssの読み込みも本来なら
  3. 埋め込み画像をhttpsに変更
    記事に埋め込まれた画像をhttpsに変換します。
    Search Regexプラグインを用いて、http://kizawa.infoをhttps://kizawa.infoに置換しました。
  4. ヘッダ画像を修正
    最後にヘッダ画像がhttpのままだったので手作業で再登録。

これで正しく表示されるようになりました。

追記

続編を掲載しました。こちらもご覧ください。

WordPressサイトをCloudFrontにより配信する際、ヘッダやクッキーの設定が適切に行われていないとキャッシュにヒットせず、折角のCDNが活かせません。 CloudFront設定をチューニングしヒット率を上昇させる設定方法を記載します。