ぼくのかんがえたさいきょうのWordpress@AWS環境(CloudFront構築編)

# はじめに
当記事は[ぼくのかんがえたさいきょうのWordpress@AWS環境](https://qiita.com/Shi-nakaya/items/7fb6d16c0adb5c7b47fd)にて記載している[作成手順](https://qiita.com/Shi-nakaya/items/7fb6d16c0adb5c7b47fd#作成手順概要)の
1. [WordPress入りのLightSailを作成](https://qiita.com/Shi-nakaya/items/a882963cf14dcc64fcac) 
2. [Route53にてドメインを取得](https://qiita.com/Shi-nakaya/items/edcd86a3a8811654573b)
3. [取得したドメインを元にSSL証明書を発行](https://qiita.com/Shi-nakaya/items/d35b5a0f7fb7a7689fce)
4. [CloudFront構築](https://qiita.com/Shi-nakaya/items/b00a04e07ca6e24887ca)← ここの手順の詳細です。
5. [DNSの設定](https://qiita.com/Shi-nakaya/items/30d2339c3570d012ca62)
6. [セキュリティ対策](https://qiita.com/Shi-nakaya/items/8812da74f5dca200cf45)

手順1のWordpress入りのLightsail
手順2のRoute53にて取得した独自ドメイン
手順3のAWS Certification Managerにて取得したSSL証明書(ワイルドカード証明書)
これらを利用してWordpressサイトを配信するCloudFrontを構築する手順を紹介致します。

# 手順
AWSにログインし、サービスから「CloudFront」をクリックします。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265300/a89b08b1-26d1-dd57-2fed-8a2457e008b7.png">
CloudFrontの管理画面が表示されるので、「Create Distribution」をクリックします。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265300/a956c0c1-1ad5-7c79-b4ad-379b1c3202b2.png">
Webの「Get Started」をクリックします。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265300/c6a78a5d-0611-e20d-e174-c5ee66434752.png">
CloudFrontの設定画面が表示されるので
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265300/151022cf-34a4-8aee-5793-70755b6dcb30.png">
下記の表の通りに設定を行う。
Origin Settings

| 設定項目       |     設定値 |
|-----------------|------------------|
| Origin Domain Name | 手順２で取得したドメイン名 |
| Origin Path | 空白 |
| Origin ID | 自動入力される内容が気に入らなければ変更 |
| Minimum Origin SSL Protocol | TLS1.2 |
| Origin Protocol Policy | HHTP Only |
| Origin Response Timeout | 30 |
| Origin Keep-alive Timeout | 5 |
| HTTP Port | 80 |
| (Origin Custom Headers ) Header  | 空白 |
| (Origin Custom Headers ) NameValue | 空白 | 


Default Cache Behavior Settings

| 設定項目       |     設定値 |
|-----------------|------------------|
| Viewer Protocol Policy | Redirect HTTP to HTTPS |
| Allowed HTTP Methods | GET, HEAD |
| Field-level Encryption Config | 空白 |
| Cached HTTP Methods | No check |
| Cache Based on Selected Request Headers | Whitelist |
| Whitelist Headers | Authorization<br>CloudFront-Forwarded-Proto<br>Host |
| Object Caching | Use Origin Cache Headers |
| Forward Cookies | All |
| Query String Forwarding and Caching | Forward all, cache based on all |
| Smooth Streaming | No |
| Restrict Viewer Access(Use Signed URLs or Signed Cookies) | No |
| Compress Objects Automatically | No |
| Lambda Function Associations | デフォルト空白 |

Distribution Settings

| 設定項目       |     設定値 |
|-----------------|------------------|
| Price Class | Use All Edge Locations (Best Performance) |
| AWS WAF Web ACL | None |
| Alternate Domain Names (CNAMEs) | 空白 |
| SSL Certificate | Default CloudFront Certificate (*.cloudfront.net) |
| Supported HTTP Versions | HTTP/2, HTTP/1.1, HTTP/1.0 |
| Default Root Object | 空白 |
| Logging | Off |
| Enable IPv6 | check |
| Comment | 空白 |
| Distribution State | Enabled | 

各種項目の値を設定したらCreateDistributionをクリックする
<img width="1211" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265300/a17b3a40-da5b-7369-2dcb-65914b27a21d.png">
作成したディストリビューションはStatusが「In Progress」となります。
Statusが「Deployed」になればディストリビューションの作成が完了となります。
<img width="994" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265300/4595a694-24f1-2792-0031-42c612171640.png">

これだけでは設定が不十分なので
作成したディストリビューションのIDをクリックして編集画面に遷移します。
ディストリビューションの編集画面に遷移したら上部の「Behaviors」をクリックします。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265300/b308a2e7-9c32-0a7a-237f-49764763c989.png">
「Create Behavior」をクリックし、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265300/bade9ca2-0893-dc27-aaf9-7dd3c1bffd6c.png)
新規にBehaviorの設定を4つ増やします。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265300/aeef506d-22af-73db-6706-743a99a56beb.png">
増やす4つの設定は下記の表の通り
※この4つを設定しないとアドオンが動きません。

*.php

| 設定項目 | 設定値 |
|---|---|
| Path Pattern | *.php |
Origin or Origin Group | 先程作成したDistributionのOrigin IDを選択
| Viewer Protocol Policy | Redirect HTTP to HTTPS |
| Allowed HTTP Methods | GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE |
| Field-level Encryption Config | 空白 |
| Cached HTTP Methods | No check |
| Cache Based on Selected Request Headers | Whitelist |
| Whitelist Headers | Authorization<br>CloudFront-Forwarded-Proto<br>Host |
| Object Caching | Customize |
| Minimum TTL | 0 |
| Maximum TTL | 0 |
| Default TTL | 0 |
| Forward Cookies | All |
| Query String Forwarding and Caching | Forward all, cache based on all |
| Smooth Streaming | No |
| Restrict Viewer Access(Use Signed URLs or Signed Cookies) | No |
| Compress Objects Automatically | No |
| Lambda Function Associations | デフォルト空白 |

/wp-json/*

| 設定項目 | 設定値 |
|---|---|
| Path Pattern | /wp-json/* |
Origin or Origin Group | 先程作成したDistributionのOrigin IDを選択
| Viewer Protocol Policy | Redirect HTTP to HTTPS |
| Allowed HTTP Methods | GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE |
| Field-level Encryption Config | 空白 |
| Cached HTTP Methods | No check |
| Cache Based on Selected Request Headers | Whitelist |
| Whitelist Headers | Authorization<br>CloudFront-Forwarded-Proto<br>Host<br>x-wp-nonce |
| Object Caching | Customize |
| Minimum TTL | 0 |
| Maximum TTL | 0 |
| Default TTL | 0 |
| Forward Cookies | All |
| Query String Forwarding and Caching | Forward all, cache based on all |
| Smooth Streaming | No |
| Restrict Viewer Access(Use Signed URLs or Signed Cookies) | No |
| Compress Objects Automatically | No |
| Lambda Function Associations | デフォルト空白 |

/wp-admin/*

| 設定項目 | 設定値 |
|---|---|
| Path Pattern | /wp-admin/* |
Origin or Origin Group | 先程作成したDistributionのOrigin IDを選択
| Viewer Protocol Policy | Redirect HTTP to HTTPS |
| Allowed HTTP Methods | GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE |
| Field-level Encryption Config | 空白 |
| Cached HTTP Methods | No check |
| Cache Based on Selected Request Headers | Whitelist |
| Whitelist Headers | Authorization<br>CloudFront-Forwarded-Proto<br>Host<br>x-wp-nonce |
| Object Caching | Customize |
| Minimum TTL | 0 |
| Maximum TTL | 0 |
| Default TTL | 0 |
| Forward Cookies | All |
| Query String Forwarding and Caching | Forward all, cache based on all |
| Smooth Streaming | No |
| Restrict Viewer Access(Use Signed URLs or Signed Cookies) | No |
| Compress Objects Automatically | No |
| Lambda Function Associations | デフォルト空白 |

/wp-login.php*

| 設定項目 | 設定値 |
|---|---|
| Path Pattern | /wp-login.php* |
Origin or Origin Group | 先程作成したDistributionのOrigin IDを選択
| Viewer Protocol Policy | Redirect HTTP to HTTPS |
| Allowed HTTP Methods | GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE |
| Field-level Encryption Config | 空白 |
| Cached HTTP Methods | No check |
| Cache Based on Selected Request Headers | Whitelist |
| Whitelist Headers | Authorization<br>CloudFront-Forwarded-Proto<br>Host |
| Object Caching | Customize |
| Minimum TTL | 0 |
| Maximum TTL | 0 |
| Default TTL | 0 |
| Forward Cookies | Whitelist |
| Whitelist Cookies |comment_author_<br>wordpress_logged_in_<br>wordpress_test_cookie<br>wp-settings-* |
| Query String Forwarding and Caching | Forward all, cache based on all |
| Smooth Streaming | No |
| Restrict Viewer Access(Use Signed URLs or Signed Cookies) | No |
| Compress Objects Automatically | No |
| Lambda Function Associations | デフォルト空白 |

4つ全てを登録したら
合計で5つの設定が下記の図の通りになっている事を確認（この順番が地味に重要なので順番が異なる場合は明細を選択して「Move UP」「Move Down」で順番を整える）
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265300/764e3e55-6829-6313-586d-3652d22196f9.png">

以上でCloudFrontの設定は完了。