はじめに

当記事はぼくのかんがえたさいきょうのWordpress@AWS環境にて記載している作成手順の

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

手順

AWSにログインし、サービスから「CloudFront」をクリックします。

CloudFrontの管理画面が表示されるので、「Create Distribution」をクリックします。

Webの「Get Started」をクリックします。

CloudFrontの設定画面が表示されるので

下記の表の通りに設定を行う。
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 CloudFront-Forwarded-Proto 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をクリックする

作成したディストリビューションはStatusが「In Progress」となります。
Statusが「Deployed」になればディストリビューションの作成が完了となります。

これだけでは設定が不十分なので
作成したディストリビューションのIDをクリックして編集画面に遷移します。
ディストリビューションの編集画面に遷移したら上部の「Behaviors」をクリックします。

「Create Behavior」をクリックし、

新規にBehaviorの設定を4つ増やします。

増やす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 CloudFront-Forwarded-Proto 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 CloudFront-Forwarded-Proto Host 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 CloudFront-Forwarded-Proto Host 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 CloudFront-Forwarded-Proto Host
Object Caching	Customize
Minimum TTL	0
Maximum TTL	0
Default TTL	0
Forward Cookies	Whitelist
Whitelist Cookies	comment_author_ wordpress_logged_in_ wordpress_test_cookie 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」で順番を整える）

以上でCloudFrontの設定は完了。