こんばんは！ヒカリです。
Webエンジニアを目指してプログラミングを勉強している初心者の方向けに情報を発信しています。
今回はこのような質問をいただきました。
WordPressにCloudFront経由でアクセスしたい！
今回はCDNであるCloudFrontを使ってみたいと思います。
サーバーへの直アクセスでも良いのですが、CloudFrontを経由しておいたほうがいろいろ便利なんですよね。
ブログでは画像を扱うことも多いのでCDNは導入しておきたいところ。
そこで今回はこちらの質問について解説していきます！
CloudFrontを経由してWordPressにアクセス！
CloudFrontを作成する
AWSのコンソールにログインして「CloudFront」を選択します。
「Distributions」の「Create Distribution」をクリック。
Get Started！
以下のように設定します。
指定されてない項目はデフォルトでOK!
- Origin Settings
- Origin Domain Name：wp.hikari-blog.com
- Default Cache Behavior Settings
- Allowed HTTP Methods：GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
- Cache and origin request settings：Use legacy cache settings
- Cache Based on Selected Request Headers：Whitelist
- Whitelist Headers：CloudFront-Forwarded-Proto, Host, User-agent
- Forward Cookies：ALL
- Query String Forwarding and Caching：Forward all, cache based on all
日本語化されてUIも変わっていたので画像だけ載せておきます。
「Cache and origin request settings」以下の設定はこんな感じになります！
設定できたら「Create Distribution」をクリック！
作成が終わるまで少し時間がかかるので、この時間で別の設定も行っておきましょう。
作成したDistributionのIDをクリック。
「Behaviors」タブの「Create Behavior」をクリック。
以下のように設定します。
- Path Pattern：/wp-login.php*
- Allowed HTTP Methods：GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
- Cache and origin request settings：Use legacy cache settings
- Cache Based on Selected Request Headers：Whitelist
- Whitelist Headers：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
設定できたら「Create」をクリック。
同様に以下の2つも作成します。
- Path Pattern：/wp-admin/*
- Allowed HTTP Methods：GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
- Cache and origin request settings：Use legacy cache settings
- Cache Based on Selected Request Headers：Whitelist
- Whitelist Headers：CloudFront-Forwarded-Proto, Host, User-agent
- 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
- Path Pattern：/wp-json/*
- Allowed HTTP Methods：GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
- Cache and origin request settings：Use legacy cache settings
- Cache Based on Selected Request Headers：Whitelist
- Whitelist Headers：CloudFront-Forwarded-Proto, Host, X-WP-Nonce
- Forward Cookies：ALL
- Query String Forwarding and Caching：Forward all, cache based on all
これで設定完了！
こんな感じになっていると思います。
最後に「General」タブに表示されている「Domain Name」にアクセスしてみましょう！
無事にWordPressが表示されましたね。
あれ？せっかくドメイン取得したのに別のドメインになっちゃったよ？
って思った方。鋭いですね。
でも今はこの状態で大丈夫です。
次回、取得したドメインからアクセスできるように設定します。
また、今はhttpでアクセスしていますが、httpsでアクセスできるようにします。
あとがき
CloudFrontを導入するメリットはやっぱり証明書の自動更新ができること。
ここまでやったら証明書も入れないとですね。
実務だとS3に静的ファイルを配置してCloudFront経由でアクセスすることが多いですね。
静的ファイルだとほとんどキャッシュでOKなのでかなりリーズナブルです。
次は証明書を発行します！
