以下の記事でLightsailでWordPressを利用する方法について書きました。
今回はLightsailにCloudFrontを適用してみます。
本記事ではLightsailの機能として提供されているCloudFrontを利用します。
AWSには独立したサービスとしてCloudFrontがありますが、Lightsailの機能の一部ということで、色々と便利になっている面がありそうです。
ディストリビューションの作成
Lightsailのページから「ネットワーキング」タブを選択し、「ディストリビューションを作成する」ボタンをクリックします。
![Lightsailのネットワーキングタブ](https://specially198.com/wp-content/uploads/2022/09/lightsail_net_working.jpg)
オリジンを選択します。
選択可能なインスタンスが選択肢に表示されます。
![オリジンを選択する](https://specially198.com/wp-content/uploads/2022/09/select_origin.jpg)
インスタンスを選択すると、以下のダイアログが表示されます。
選択したインスタンスがWordPressの場合、自動で読み取ってくれるようです。
WordPressに適したキャッシュ設定をしてくれるので、「はい、適用します」をクリックします。
![WordPressのキャッシュ動作プリセット](https://specially198.com/wp-content/uploads/2022/09/wordpress_cache_pre_set.jpg)
適用すると、キャッシュ動作が「WordPressに最適」に変わりました。
![キャッシュ動作](https://specially198.com/wp-content/uploads/2022/09/cache_behavior.jpg)
上記で選択したオリジンのところを確認すると、ディストリビューションはHTTPのみを使用するとなっているので、HTTPSに変更します。
右端の編集アイコンをクリックします。
![オリジンを選択する](https://specially198.com/wp-content/uploads/2022/09/origin_selected.jpg)
オリジンプロトコルポリシーを「HTTPSのみ」に変更します。
![オリジンプロトコルポリシー](https://specially198.com/wp-content/uploads/2022/09/origin_protocol_policy.jpg)
プランを選択します。
1か月当たりの転送量が決まった定額制になっています。
![ディストリビューションプランを選択する](https://specially198.com/wp-content/uploads/2022/09/select_plan.jpg)
「ディストリビューションを識別する」の欄で名前を入力します。
![ディストリビューションを識別する](https://specially198.com/wp-content/uploads/2022/09/Identify_distribution.jpg)
最後に「ディストリビューションを作成する」ボタンをクリックすると完了です。
![ディストリビューションを作成する](https://specially198.com/wp-content/uploads/2022/09/create_distribution.jpg)
作成が進行中になります。
![ディストリビューションの作成](https://specially198.com/wp-content/uploads/2022/09/create_distribution_in_progress.jpg)
しばらく待つとディストリビューションが作成されます。
僕の場合は10分程度で作成が完了しました。
![ディストリビューションの作成が完了](https://specially198.com/wp-content/uploads/2022/09/create_distribution_finished.jpg)
カスタムドメインの設定
カスタムドメインを設定します。
「カスタムドメイン」タブを選択します。
まず証明書を作成します。
「証明書を作成」をクリックします。
![カスタムドメインタブを選択](https://specially198.com/wp-content/uploads/2022/09/custom_domain_tab.jpg)
プライマリドメインに、設定したいドメインを入力して、「作成」をクリックします。
![証明書を作成する](https://specially198.com/wp-content/uploads/2022/09/create_certificate.jpg)
画面に表示されている内容でDNSレコードを設定します。
![DNS検証](https://specially198.com/wp-content/uploads/2022/09/dns_verification.jpg)
本記事では例としてRoute53の設定例を記載します。
DNSレコードを作成したら、検証が完了するのを待ちます。
![Route53のDNS設定](https://specially198.com/wp-content/uploads/2022/09/route53_dns-1024x613.jpg)
検証が完了すると、以下のようになります。
![検証が完了](https://specially198.com/wp-content/uploads/2022/09/certificate.jpg)
カスタムドメインを有効にします。
「カスタムドメインが無効になっています」というトグルをクリックします。
![カスタムドメインを有効にする](https://specially198.com/wp-content/uploads/2022/09/enable_custom_domain.jpg)
しばらく待つと以下のように有効になります。
![カスタムドメインが有効](https://specially198.com/wp-content/uploads/2022/09/custom_domain_enabled.jpg)
最後にLightsailに向いている独自ドメインのDNSレコードを変更します。
本記事ではRoute53を使用する場合の例を記載します。
ディストリビューションを作成すると、XXXXXX.cloudfront.netという名前が振られるので、それを使用します。
LightsailでDNS管理している場合は、エイリアスレコードが使用できます。
![DNSレコードを変更](https://specially198.com/wp-content/uploads/2022/09/dns_change.jpg)
動作確認
CloudFrontが利用できているかを確認します。
本記事ではChromeを利用する例で記載します。
デベロッパーツールで「ネットワーク」タブを開き、ページを読み込みます。
読み込んだ画像ファイルを選択すると、ヘッダーが確認できるので、via と x-cache の両方にcloudfront の記載があれば、ディストリビューションが画像ファイルをキャッシュしていることが確認できます。
![動作確認](https://specially198.com/wp-content/uploads/2022/09/operation_check.jpg)