０．はじめに

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

AMIMOTO AMI を使って、WordPress を立ち上げて、接続先を RDS に変更してみる - Qiita

事前状況としては、

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

って感じです。

１．CloudFront Distribution を作成する

以下のページの手順に従って、CloudFront Distribution を作成します。
- WordPressサイトをCloudFrontで配信する - Qiita
  - AWS CloudFront Management Console
- 異なる点は、以下。
  - Origin Settings
    - Origin Domain Name :
      - EC2 の新しいドメイン (ex : www-cf.xxx.com)
    - Origin Protocol Policy :
      - HTTPS Only
  - Default Cache Behavior Settings
    - Viewer Protocol Policy :
      - Redirect HTTP to HTTPS
    - Object Caching :
      - Use Origin Cache Headers ※　Default 設定のまま
  - Distribution Settings
    - Alternate Domain Names (CNAMEs) :
      - 元々のドメイン　(ex : www.xxx.com)
  - ※ WordPress の設定は変更しない!!
    - 「WordPress アドレス (URL)」、「サイトアドレス (URL)」など。
    - wp-config.phpなども。
  - ※ DNS の設定は後述。
  - ※ 各種 Behavior の設定も後述。

２．名づけてねっとの DNS アウトソーシングサービスで、DNS レコードの設定

名づけてねっとの DNS アウトソーシングサービスで、以下の DNS レコードの設定を変更する。
- DNSアウトソーシングサービス｜ドメイン取得は名づけてねっと
- 旧 :
  - 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 レコードの登録

以下のページの手順に従って、AWS Certificate Manager で証明書を作成します。
- ACM(AWS Certificate Manager)で証明書を作成する | 南西通信
  - AWS Certificate Manager
- 注意する点は、以下。
  - 上記ページにも記載していますが、CloudFront で利用する場合は、バージニアリージョンで発行する必要があります
以下の設定で、DNSレコードを登録します。
- *.xxx.com : 　CNAME　****.****.acm-validations.aws
- CNAMEレコードの登録において、名付けてネットなどのアンダースコアを認めないドメイン管理サービスでは、アンダースコアを取り除いて設定すればいい様です。
  - DNS 検証の問題のトラブルシューティング - AWS Certificate Manager

4．CloudFront Distribution に、作成した証明書を適用する

以下のページの手順に従って、CloudFront Distribution に、作成した証明書を適用します。
- AMIMOTO AMI版WordPressをAmazon CloudFrontとACM(AWS Certificate Manager)で常時SSL化する | 南西通信

5．CloudFront Distribution のキャッシュヒット率向上の設定をする

以下のページの手順に従って、CloudFront Distribution を作成します。
- CloudFrontのキャッシュヒット率向上 - 合同会社ジョートー

6．各種 Behavior の Whitelist Headers の設定に Host ヘッダーを追加する

以下のページの手順に従って、各種 Behavior の Whitelist Headers の設定に Host ヘッダーを追加します。
- ホストヘッダーを転送するように CloudFront を設定する
  - CloudFrontの下でWordpressを実行する時に色々ハマった話後編 - Qiita
    - CloudFrontの下でWordpressを実行する時に色々ハマった話前編 - Qiita

7．CloudFront のログ出力を設定する

以下のページの手順に従って、CloudFront の S3 バケットへの出力の設定をします。
- AWS CloudFrontのアクセスログを確認する - Qiita

8．C3 Cloudfront Cache Controller プラグインの設定

以下のページの手順に従って、C3 Cloudfront Cache Controller プラグインの設定をします。これを設定することで、記事が投稿されたら、自動でキャッシュが作成されるみたいです。便利♪
- C3 Cloudfront Cache Controller プラグインの設定方法 | Amimoto Help Center
  - C3 Cloudfront Cache Controller プラグインの使用方法 | Amimoto Help Center

９９．ハマりポイント

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

ＸＸ．まとめ

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

では♪

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