はじめに
当記事はぼくのかんがえたさいきょうのWordpress@AWS環境にて記載している作成手順の
- WordPress入りのLightSailを作成
- Route53にてドメインを取得
- 取得したドメインを元にSSL証明書を発行
- CloudFront構築← ここの手順の詳細です。
- DNSの設定
- セキュリティ対策
手順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の設定は完了。