CloudFront経由の配信に変更

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

CDNによるサーバ負荷軽減
常時SSL対応　(Amazon Certificate Managerの証明書を用いれば無料だし！)

DNSサーバをRoute53に変更
Amazon Certificate Managerで証明書取得
CloudFrontの設定
不具合対応
追記

DNSサーバをRoute53に変更

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

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

Amazon Route 53のALIASレコード利用のススメ | DevelopersIO

Amazon Certificate Managerで証明書取得

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

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

CloudFrontの設定

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

WordPressサイトをCloudFrontで配信する - Qiita

#概要##CloudFrontとはCloudFrontはAWSのCDN(Contents Delivery Network)サービスで、Webサイトの前段に入れるだけでサイトアクセスが爆速になり…

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

不具合対応

ユーザエージェントの転送
標準ではOrigin側にUser-agentヘッダは転送されず、WordPressテーマによるレスポンシブデザイン変換が動作しない問題が発生しました。以下記事を参考にUser-AgentヘッダをOriginにそのまま転送されるように設定しました。

CloudFrontを導入してもUser-agentの値は書き換えられないようにする方法。 - Qiita
はじめにCloudFrontの導入の際に、特に何も設定を行わないと、CloudFrontを通過する時点で_User-agent_の値が「Amazon CloudFront」に書き換えられてしまいま…
qiita.com
JavaScriptやcssをhttpsに変換
CloudFrontを経由してhttpsでアクセスした際、体裁が崩れる問題が発生した。
原因はJavaScriptやcssがhttpで配信されてしまいブラウザが受付を拒否したことでした。本サイトはCloudFront⇒Originの通信をhttpにしているので、自動的にhttpで記載されてしまう模様です。
そこで、SSL Insecure Content Fixerを用いて解決しました。
詳しい使い方は以下サイトを参照ください。

ワードプレス　HTTPS化で、CSSやjavaScriptの読み込みがhttpのままになってしまうとき : プログラマー社長の「日々発見」
ワードプレス　HTTPS化で、CSSやjavaScriptの読み込みがhttpのままになってしまう時。サクラインターネットのレンタルサーバーを使っていると、この現象が発生するかも。。。httpsのサイトでは、ｃｓｓの読み込みも本来なら
blog.livedoor.jp
埋め込み画像をhttpsに変更
記事に埋め込まれた画像をhttpsに変換します。
Search Regexプラグインを用いて、https://kizawa.infoをhttps://kizawa.infoに置換しました。
ヘッダ画像を修正
最後にヘッダ画像がhttpのままだったので手作業で再登録。

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

追記

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

CloudFrontのキャッシュヒット率向上方法

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