SSL 化済みの WordPress サイトに CloudFront を適用してみる

# ０．はじめに

Amimoto AMI を使って WordPress サイトを構築して SSL 化していたんですが、パフォーマンス向上や今後のセキュリティ対応を考慮して、CloudFront を導入したいと思います。

* [AMIMOTO AMI を使って、WordPress を立ち上げて、接続先を RDS に変更してみる \- Qiita](https://qiita.com/kusokamayarou/items/58d550b82b960c321c3a)

<img width="801" alt="スクリーンショット 2019-02-05 16.25.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/161939/b58dbcaa-d798-fae9-7538-1a6120799aef.png">

事前状況としては、

* Amimoto AMI を使って WordPress サイトを構築
* SSL 化済み
* ドメイン管理は、名付けてネット

って感じです。

# １．CloudFront Distribution を作成する
1. 以下のページの手順に従って、CloudFront Distribution を作成します。
    * [WordPressサイトをCloudFrontで配信する \- Qiita](https://qiita.com/Ichiro_Tsuji/items/38592e737257cb45ca13)
        * [AWS CloudFront Management Console](https://console.aws.amazon.com/cloudfront/home?region=ap-northeast-1#)
    * <font color="red"><b>異なる点は、以下。</b></font>
        * Origin Settings
            * ![FireShot Capture 418 - AWS CloudFront Management C_ - https___console.aws.amazon.com_cloudfront_home.png](https://qiita-image-store.s3.amazonaws.com/0/161939/f82756f0-a48d-491d-239a-2a90ba743efe.png)
            * Origin Domain Name :
                * EC2 の新しいドメイン (ex : www-cf.xxx.com)
            * Origin Protocol Policy :
                * HTTPS Only
        * Default Cache Behavior Settings
            * ![FireShot Capture 427 - AWS CloudFront Management C_ - https___console.aws.amazon.com_cloudfront_home.png](https://qiita-image-store.s3.amazonaws.com/0/161939/c7b4443d-2ad1-782c-d8ef-5ea200c40004.png)
            * Viewer Protocol Policy :
                * Redirect HTTP to HTTPS
            * Object Caching :
                * Use Origin Cache Headers ※　Default 設定のまま
        * Distribution Settings
            * ![FireShot Capture 421 - AWS CloudFront Management C_ - https___console.aws.amazon.com_cloudfront_home.png](https://qiita-image-store.s3.amazonaws.com/0/161939/3628580a-60cd-4c9c-080d-bf2fdbb68361.png)
            * Alternate Domain Names (CNAMEs) :
                * 元々のドメイン　(ex : www.xxx.com)
        * <font color="red"><b>※ WordPress の設定は変更しない!!</b></font>
            * <font color="red"><b>「WordPress アドレス (URL)」、「サイトアドレス (URL)」など。</b></font>
            * <font color="red"><b>wp-config.phpなども。</b></font>
        * <font color="red"><b>※ DNS の設定は後述。</b></font>
        * <font color="red"><b>※ 各種 Behavior の設定も後述。</b></font>

# ２．名づけてねっとの DNS アウトソーシングサービスで、DNS レコードの設定
1. 名づけてねっとの DNS アウトソーシングサービスで、以下の DNS レコードの設定を変更する。
    * [DNSアウトソーシングサービス｜ドメイン取得は名づけてねっと](https://www.nadukete.net/spec/dns.html)
    * 旧 : 
        * www.xxx.com : 　A　XXX.XXX.XXX.XXX
    * 新 : 
        * www.xxx.com : 　CNAME　\*************.cloudfront.net
            * ※作成した CloudFront の Domain Name
        * www-cf.xxx.com : 　A　XXX.XXX.XXX.XXX
            * ※元々ドメインの IP　アドレス

# 3．AWS Certificate Manager での証明書の作成と DNS レコードの登録
1. 以下のページの手順に従って、AWS Certificate Manager で証明書を作成します。
    * [ACM\(AWS Certificate Manager\)で証明書を作成する \| 南西通信](https://www.southwest59.net/aws-acm/)
        * [AWS Certificate Manager](https://console.aws.amazon.com/acm/home?region=us-east-1#/)
    * <font color="red"><b>注意する点は、以下。</b></font>
        * <font color="red"><b>上記ページにも記載していますが、CloudFront で利用する場合は、バージニアリージョンで発行する必要があります</b></font>
1. 以下の設定で、DNSレコードを登録します。
    * \*.xxx.com : 　CNAME　\*\*\*\*.\****.acm-validations.aws
    * ![FireShot Capture 392 - ゾーン編集 - https___nadukete.online-navi.jp_dnsui_customer_user_U872411da7_zone.png](https://qiita-image-store.s3.amazonaws.com/0/161939/e0416b6d-d976-0828-7692-1868a72301b7.png)
    * <font color="red"><b>CNAMEレコードの登録において、名付けてネットなどのアンダースコアを認めないドメイン管理サービスでは、アンダースコアを取り除いて設定すればいい様です。</b></font>
        * [DNS 検証の問題のトラブルシューティング \- AWS Certificate Manager](https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/troubleshooting-DNS-validation.html)

# 4．CloudFront Distribution に、作成した証明書を適用する
1. 以下のページの手順に従って、CloudFront Distribution に、作成した証明書を適用します。
    * [AMIMOTO AMI版WordPressをAmazon CloudFrontとACM\(AWS Certificate Manager\)で常時SSL化する \| 南西通信](https://www.southwest59.net/wordpress-cloudfront-acm-aws-certificate-manager-ssl/)

# 5．CloudFront Distribution のキャッシュヒット率向上の設定をする
1. 以下のページの手順に従って、CloudFront Distribution を作成します。
    * [CloudFrontのキャッシュヒット率向上 \- 合同会社ジョートー](https://jyo-to.okinawa/20170521/1107/)

# 6．各種 Behavior の Whitelist Headers の設定に Host ヘッダーを追加する
1. 以下のページの手順に従って、各種 Behavior の Whitelist Headers の設定に Host ヘッダーを追加します。
    * [ホストヘッダーを転送するように CloudFront を設定する](https://aws.amazon.com/jp/premiumsupport/knowledge-center/configure-cloudfront-to-forward-headers/)
        * [CloudFrontの下でWordpressを実行する時に色々ハマった話 後編 \- Qiita](https://qiita.com/kunitaya/items/876a12cc803c5d495f43)
            * [CloudFrontの下でWordpressを実行する時に色々ハマった話 前編 \- Qiita](https://qiita.com/kunitaya/items/1a78cd2d4d2971394e0d)

# 7．CloudFront のログ出力を設定する
1. 以下のページの手順に従って、CloudFront の S3 バケットへの出力の設定をします。
    * [AWS CloudFrontのアクセスログを確認する \- Qiita](https://qiita.com/ran/items/f44bb7d6e18f72eac1c6)

# 8．C3 Cloudfront Cache Controller プラグインの設定
1. 以下のページの手順に従って、C3 Cloudfront Cache Controller プラグインの設定をします。これを設定することで、記事が投稿されたら、自動でキャッシュが作成されるみたいです。便利♪
    * [C3 Cloudfront Cache Controller プラグインの設定方法 \| Amimoto Help Center](https://support.amimoto-ami.com/%E6%97%A5%E6%9C%AC%E8%AA%9E/%E3%83%97%E3%83%AA%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%B8%88%E3%81%BF%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/c3-cloudfront-cache-controller-%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95)
        * [C3 Cloudfront Cache Controller プラグインの使用方法 \| Amimoto Help Center](https://support.amimoto-ami.com/%E6%97%A5%E6%9C%AC%E8%AA%9E/%E3%83%97%E3%83%AA%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%B8%88%E3%81%BF%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/c3-cloudfront-cache-controller-%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AE%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95)

# ９９．ハマりポイント

* 今回は、結構ハマっちゃいました…。
<br><br>
* とにかく、DNS レコードの設定が…。
* 最初、 「WordPress アドレス (URL)」と「サイトアドレス (URL)」を変更したら、当然表示される URL が www-cf.xxx.com になってしまったので…、設定を元に戻して、DNS レコードの設定も www と www-cf を入れ替えて…、
* 一度、設定を変更した為にデータベースの値も変更されてしまったので、データベースをコンバートして…、
* CloudFront から Origin へのアクセスにおいて、Host ヘッダーが www-cf になってしまったので、各種 Behavior の Whitelist Headers の設定に Host ヘッダーを追加したり…、
* よく考えずにやってみたので、色々ハマっちゃいました…。
<br><br>
* ただ、WP の設定やコードを何も変更せずに CloudFront を適用できたので、良かったです。
* 変更点は、CloudFront の作成と DNS レコードの設定変更だけで、切り戻しも非常に楽にできますね。
<br><br>
* <font color="red"><b>※2019.03.05 以下追記。</b></font>
* ちょっとトラブルが発生したので追記。
* ある Windows アプリで該当サイトのページを　Inline Frame で表示していたんですが、CloudFront 適用後にページへのアクセスが出来なくなってしまいました。
* 結構わからなくて色々調べたところ、アプリが TLS1.0 でアクセスしていた為に CloudFront で弾いていたので、以下の設定をしてアクセスできる様になりました。
    * Security Policy : TLSv1_2016
    * ![FireShot Capture 003 - AWS CloudFront Management Console - console.aws.amazon.com.png](https://qiita-image-store.s3.amazonaws.com/0/161939/7c5c6a6d-2e48-557c-597a-9f0cf1ff45fd.png)
* ただ、先々 TLS1.0 や 1.1 を廃止して、TLS1.2 以上にしよう、という流れがあるみたいなので、アプリ側の対応を行い、CloudFront の再設定を行った方がいいみたいですね。
* 今回は結構ハマって大変でした…。
* 新しいことをすると何かと問題が発生するには、世の常…。
* 少しでもご参考になれば幸いです♪

# ＸＸ．まとめ

とりあえず、CloudFront を設定したことで、AWS WAF の設定などもできる様になったので、また AWS WAF の設定の記事も投稿できればと思います。

では♪