Kinsta の WordPress に CloudFront を被せてみる

# ０．はじめに

![aws-cloudfront-eyecatch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/8ee0f4d2-5035-a50b-28f1-cfca5150ac68.png)

[Kinsta](https://kinsta.com/jp/) という [WordPress](https://wordpress.org/) のマネージドサービスがあリまして、

で、[Kinsta](https://kinsta.com/jp/) のサービスにも Kinsta CDN という [CDN](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%83%87%E3%83%AA%E3%83%90%E3%83%AA%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF) の機能はあるんですが、

- [あなたのWordPressウェブサイトでKinsta CDNを有効にする方法について](https://kinsta.com/jp/knowledgebase/kinsta-cdn/)

あまり細かい設定は出来ないみたいので、Kinsta CDN ではなく、[AWS](https://aws.amazon.com/jp/) の [CloudFront](https://aws.amazon.com/jp/cloudfront/) を利用出来ないか試してみました。

<br>

以前、[WordPress](https://wordpress.org/) @ [EC2](https://aws.amazon.com/jp/ec2/?ec2-whats-new.sort-by=item.additionalFields.postDateTime&ec2-whats-new.sort-order=desc) への [CloudFront](https://aws.amazon.com/jp/cloudfront/) の適用は、以下の記事にある様にやったことがありましたが、基本的にやり方は同じです。

- [SSL 化済みの WordPress サイトに CloudFront を適用してみる \- Qiita](https://qiita.com/kusokamayarou/items/21e4bcdaa7c8dd8523ab)

# １． [Kinsta](https://kinsta.com/jp/) 上の [WordPress](https://wordpress.org/) サイト の IP アドレスを確認

[Kinsta](https://kinsta.com/jp/) 側での対応は、基本的に無いんですが、

今回は、[Kinsta](https://kinsta.com/jp/) 上の [WordPress](https://wordpress.org/) サイトに新しいドメインを割り当てておきたかったので、サイト の IP アドレスを確認しておきます。

![FireShot Capture 653 - Support Genbasupport - MyKinsta - my.kinsta.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/ae61873c-ab24-ed79-727b-9f60b55808d0.png)

# ２． [CloudFront](https://aws.amazon.com/jp/cloudfront/) が参照するサイトドメインの DNS レコードの設定

1. 以下の DNS レコードの設定を追加する。
    * 新 : 
        * `???-kinsta.example.com` : 　`A`　`XXX.XXX.XXX.XXX`
            * `XXX.XXX.XXX.XXX` は [Kinsta](https://kinsta.com/jp/) で確認したサイトの IP　アドレス

# ３． [CloudFront](https://aws.amazon.com/jp/cloudfront/) に新しく Distribution を作成

作成した Distribution での設定項目は、以下。

## General

![FireShot Capture 624 - AWS CloudFront Management Console - console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/2dceb8af-0c46-22c8-1c4f-c57c37b4a4d5.png)

- Alternate Domain Names (CNAMEs)
    - [サイトドメイン]
    - ※ `???.example.com`
- AWS WAF Web ACL
    - ※ 任意
- SSL Certificate
    - [[AWS Certificate Manager](https://aws.amazon.com/jp/certificate-manager/) で登録した証明書]
    - ※ `*.example.com`
- Security Policy
    - ※ 任意
    - ※ 今回は、諸事情あって `TLSv1_2016` を設定
- Log Bucket
    - ※ 任意
- Log Prefix
    - ※ 任意
    - ※ `???.example.com`
- Cookie Logging
    - ※ 任意

## Origins and Origin Groups

![FireShot Capture 629 - AWS CloudFront Management Console - console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/9c2cd1a7-34dc-dd97-3daa-e235309bef36.png)

- Origin Domain Name
    - [新しく設定した [Kinsta](https://kinsta.com/jp/) 上の [WordPress](https://wordpress.org/) のサイトドメイン] 
    - ※ `???-kinsta.example.com`
- Origin ID
    - ※ 自動	
- Minimum Origin SSL Protocol
    - `TLSv1.2`
    - ※ [Kinsta](https://kinsta.com/jp/) は TLS1.2 以上が必須。
- Origin Protocol Policy
    - ※ 任意
    - ※ `HTTPS Only`

## Behavior

### `Default (*)` ※ キャッシュする場合の設定

デフォルトでは、原則全てのコンテンツをキャッシュする設定が作成されますが、サイトに合わせて変更して下さい。

![FireShot Capture 644 - AWS CloudFront Management Console - console.aws.amazon.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/e2cf0c66-6a94-756e-2a18-aa63951fb0b6.png)

- Path Pattern
    - Default (*)
    - ※ デフォルト
- Origin or Origin Group
    - ※ 作成した「Origins and Origin Groups」 を選択
- Viewer Protocol Policy
    - ※ 任意
    - `Redirect HTTP to HTTPS`
- Allowed HTTP Methods
    - `GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE`
- Cache and origin request settings
    - `Use legacy cache settings`
- Cache Based on Selected Request Headers
    - `Whitelist`
- Whitelist Headers
    - `CloudFront-Is-Desktop-Viewer`
    - `CloudFront-Is-Mobile-Viewer`
    - `CloudFront-Is-SmartTV-Viewer`
    - `CloudFront-Is-Tablet-Viewer`
    - `Host`
    - `User-agent`
- Forward Cookies
    - `Whitelist`
- Whitelist Cookies
    - `wordpress_logged_in*`
    - `wp-settings*`
- Query String Forwarding and Caching
    - `Forward all, cache based on all`

### `/wp-admin/*` , `*.php` ※ キャッシュしない場合の設定

とりあえず、管理者画面などへのアクセス用に追加で設定しました。これも、サイトに合わせて変更して下さい。

※ キャッシュする場合との設定の違いは、以下のみ。

- Object Caching : `Customize`
- Minimum TTL : `0`
- Maximum TTL : `0`
- Default TTL : `0`

# ４． 新しく作成した [CloudFront](https://aws.amazon.com/jp/cloudfront/) ドメインの DNS レコードの設定

1. 以下の DNS レコードの設定を変更する。
    * 旧 : 
        * ???.example.com : 　A　XXX.XXX.XXX.XXX
    * 新 : 
        * ???.example.com : 　CNAME　\*************.cloudfront.net
            * ※作成した CloudFront の Domain Name

# ９９．ハマりポイント

- 今回は、一度ほぼ同じ対応をしたことがありましたので、特にハマることはありませんでした。

# ＸＸ．まとめ

以前は、[EC2](https://aws.amazon.com/jp/ec2/?ec2-whats-new.sort-by=item.additionalFields.postDateTime&ec2-whats-new.sort-order=desc) で動かしていましたが、今回は、 [Kinsta](https://kinsta.com/jp/) で [WordPress](https://wordpress.org/) を動かす形で、[CloudFront](https://aws.amazon.com/jp/cloudfront/) を適用してみました。

[EC2](https://aws.amazon.com/jp/ec2/?ec2-whats-new.sort-by=item.additionalFields.postDateTime&ec2-whats-new.sort-order=desc) に比べて、[Kinsta](https://kinsta.com/jp/) での運用となると、コストは掛かりますが、その分 [Kinsta](https://kinsta.com/jp/) の便利な付加サービスを使えたり、[Kinsta](https://kinsta.com/jp/) 側で補ってくれるメンテナンスやセキュリティ、パフォーマンス、サポートの対応などもありますので、それなりにメリットもあるかなと思います。

さらに、[CloudFront](https://aws.amazon.com/jp/cloudfront/) を適用すると、[Kinsta](https://kinsta.com/jp/) だけでは出来ないことや、その他の細やかな [CDN](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%83%87%E3%83%AA%E3%83%90%E3%83%AA%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF) での対応も出来る様になりますので、結構良いんじゃないかと。

因みに、[Kinsta](https://kinsta.com/jp/) のチャットサポートは、だいたい 5 分以内に返事があるので、非常に使い勝手が良いですよ ♪♪♪

![kinsta-JP-OG.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/6bef77cc-31f1-d23f-61b6-5cf90dd15241.jpeg)

- [レンタルサーバー＆ホスティング サービスKinsta](https://kinsta.com/jp/)
- [プラン一覧：KinstaマネージドWordPressホスティングソリューション](https://kinsta.com/jp/plans/)
- [Kinstaレビュー2020年―高パフォーマンスですが、1つだけ重大なデメリットが](https://www.websiteplanet.com/ja/web-hosting/kinsta/#pricing)

<br>

ご参考になれば ♪♪♪

👋👋👋