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

０．はじめに

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

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

事前状況としては、

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

って感じです。

１．CloudFront Distribution を作成する

1. 以下のページの手順に従って、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 レコードの設定

1. 名づけてねっとの 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 レコードの登録

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

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

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

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

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

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

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

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

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

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

1. 以下のページの手順に従って、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 の設定の記事も投稿できればと思います。

では♪