ブログのユーザビリティを良くするため速度改善しました
なにが不安なのか？
なにをしたのか？
サイトの速度をAmazon CloudFrontで改善をしました
CDNってなに？
CDNとはContent Delivery Network（コンテンツデリバリーネットワーク）の略で、
一言でいうとキャッシュサーバです
ブログを表示しているサーバが貧弱な場合でも、
このキャッシュサーバを置くことで大量のリクエストが来ても問題なく処理することができます
CDNがないとき
たくさんの閲覧があるとサーバが処理しきれずダウンします
CDNがあるとき
CDNがブログの内容を予めコピー（キャッシュ）し、そのコピー情報をアクセスしてきた人に見せます
この仕組みにより大量のアクセスが来てもブログまでアクセスが来ないのでブログサーバは落ちません
どのCDNを使ったの？
AWSのCloudFrontを使いました
Amazonが提供しているサービスです
今の構成は？
このブログはWordPressのMultisiteで作っています
| レンタルサーバ | Amazon Lightsail |
| ソフトウェア | WordPress（Multisite） |
どんな構成にしたのか？
CDNに元のドメインを指定し、本体は別のドメインで運用します
どうやったのか？
基本的にはAmazonが提供しているマニュアルでやっています
AWS アカウントの作成
本家で丁寧な解説があるので手順通り行えば作成できます
IAM ユーザーの作成
アカウントみたいなものです
プラグインから自動でCDNの設定をするときにこのユーザを使います
手順通りに行えば特に問題なく作成できると思います
IAM ユーザーに認証情報追加
作成したユーザにはなにも権限がありません
CloudFrontの設定ができる権限を付与します
手順のIAM ユーザーの認証情報の保護を実施すればかんたんに設定できます
ユーザーの認証情報（アクセスキー ID とシークレットアクセスキー）は必ずダウンロードしてください
ブログのドメインを追加する
お名前ドットコムやバリュードメインなど、
利用しているドメインサービスで設定します
今回は「origin.otobou.com」をブログに設定しました
バリュードメインの場合はこのような設定になります
a origin 123.456.789.123
※123.456.789.123はブログのIPアドレスです
ブログのドメインにSSLを設定する
https://origin.otobou.comでアクセスできるようにSSLの設定をします
LightSailの場合はコマンド一つで設定できます
sudo /opt/bitnami/bncert-tool
WordPressにAWS for WordPressプラグインをインストール
WordPressにAWS for WordPressをインストールします
WordPressの管理画面からプラグインを選択肢インストールします
WordPressにAWS for WordPressプラグインでCloudFrontの設定をする
マニュアルには画像がないのでここは丁寧に解説します
アクセスキーの設定
WordPressのAWSのGeneralで鍵の設定をします
AWS access key：「IAM ユーザーに認証情報追加」の手順で取得したアクセスキー ID
AWS secret key：「IAM ユーザーに認証情報追加」の手順で取得したシークレットアクセスキー
AWS Region：Asia Pacific(Tokyo) ※適宜変更してください
CloudFrontのドメインとオリジンの設定
Original Domain Nameにブログのドメイン
CloudFront Alternate Domain Nameにアクセスしてほしいドメインを書きます
Initiate Setupを押します
ドメインの検証
先程入力したドメインの持ち主かどうか確認するための認証を行います
Name、Type、Valueの値をご利用のドメインサービスで設定します
バリュードメインの場合はこんなかんじで設定します
cname _325ff5ea64b92bbdf2e04806f7ae9956 _d5d1203232007ec31e0ab22bf232550f.vjldqjsdcd.acm-validations.aws.
cname Nameのサブのメイン Value＋ドット
CloudFrontにDNSの設定を追加する
CloudFrontにアクセスしてほしいドメインを設定します
Name、Type、Valueの値をご利用のドメインサービスで設定します
バリュードメインの場合は以下のとおりです
cname @ d3nklcd8r1ump5.cloudfront.net.
cname Nameのサブのメイン Value＋ドット
サブドメインがない場合は@で設定します
DNSの設定が反映されるまで待つ
curlコマンドでX-Cacheが帰ってきていたら成功です
% curl –head otobou.com -s | grep “X-Cache”
X-Cache: Redirect from cloudfront
ブラウザで動作確認をしましょう
設定お疲れさまでした
結果どうなったか？
GoogleのPageSpeed Insightで確認しました
応答速度は倍に上がって改善はしました
ただ他のプラグインやJSが足を引っ張っているので目に見えて効果は出てなかったです
対応前
対応後
不安は解消した？
まとめてみると簡単だったけど、
実際はCloudFrontを手動で設定してたりとか迷走してでかなり時間かかりました
コメント