WordPressMultisiteをAmazonCloudFrontでキャッシュしたけど早くなっているのかわからないので不安です

AWS

ブログのユーザビリティを良くするため速度改善しました

なにが不安なのか?

なにをしたのか?

サイトの速度を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を手動で設定してたりとか迷走してでかなり時間かかりました

コメント

タイトルとURLをコピーしました