- 公開日: 2024-06-18
- 最終更新日:
さくらのレンタルサーバーのWordPressとCloudFrontを組み合わせて同時アクセスに強くしよう!
目次
前回の記事はこちらです
まだ前回の記事を見てない人は前回の記事を見てくれたら幸いです。
※すでにオリジンサーバーと、CloudFrontを連携させてたら見なくて大丈夫です。
※この記事はさくらインターネットと一切関係ありません。個人のブログです。
企業ロゴを画像に使っているのは、この会社のサービスなんだとわかりやすくするためです。
前提条件
- オリジンサーバー側でWordPressのセットアップが終わってること。
- 前回の記事で、CloudFrontとさくらのレンタルサーバー(もしくはその他カスタムオリジン)を連携していること。
WordPressを利用するための、CloudFront側での準備
対象のディストリビューションを選択し、ビヘイビアの設定に行きます
そして対象のビヘイビアを選択して、編集をクリック。
ビューワーの項目に行き、
「許可されたHTTPメソッド」をGET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
に変更してください。(一番種類が多いやつ)
キャッシュキーとオリジンリクエストの項目に行き、
Legacy cache settingsを選択する。
そしたら下記の画像のような項目が出てくると思うので、設定をしていきます。
「ヘッダー」は「なし」にしてください。
「クエリ文字列」は「すべて」にしてください。
Cookieは「すべて」にしてください。
オブジェクトキャッシュは何もいじらなくていいです。
CloudFront側でやるのは以上です。
お疲れさまでした。
WordPress側でやる設定
まずはオリジン側のドメインでWordPressにログインします。(例: cdn.pita-app.com/wp-login.php)
オリジンにCloudFront以外がアクセスできないようにしてる人はアクセス規制を解除してください。
このままだと、サイト内のURLがオリジン側に向いてしまうため、WordPressのアドレス系の設定
を変える必要があります。
WordPress アドレス (URL)
サイトアドレス (URL)
に実際に表示したいドメイン名を記述してください。
(CloudFrontで代替ドメイン名(CNAMEs)で設定したドメイン)
そしたら、実際に表示したいドメインにリダイレクトされると思うので、
もう一度ログインしてください。
そしたら完了です。
CloudFrontを経由しているとブロックエディタが使えない!?
どうやらWordPressはPCかPCじゃないかで、ブロックエディタを有効にするか決めているのですが
CloudFrontを経由しているとWordPressがPCからのアクセスじゃないなと誤認識して、
ブロックエディタが無効になるみたいです。何だこの仕様
対策として、functions.phpを編集してすべてのデバイスでブロックエディタを有効にできるみたいです。
下記のコードをfunctions.phpにコピーしてください。
function user_can_richedit_custom()
{
global $wp_rich_edit;
if (get_user_option('rich_editing') == 'true' || !is_user_logged_in()) {
$wp_rich_edit = true;
return true;
}
$wp_rich_edit = false;
return false;
}
add_filter('user_can_richedit', 'user_can_richedit_custom');
.htaccessで「wp-admin/*」をキャッシュしないようにしよう
また、キャッシュ系のヘッダを追加しよう
一旦WordPressの.htaccessファイルをダウンロードして、
その.htaccessに下記のコードを追加してください。
または、wp-adminファイルの中に.htaccessファイルを追加して、
「Header set Cache-Control “no-cache”」と記載してください。
s-maxageとはCDN向けのキャッシュヘッダです。
※2024/6/24にてmax-ageがmaxageとなっているのを修正
<Files ~ "\.(gif|jpe?g|png|webp|ico|svg|css|js|zip|pdf)$">
Header set Cache-Control "s-maxage=3600, max-age=3600"
</Files>
<Files "wp-admin/*">
Header set Cache-Control "no-cache"
</Files>
まとめ
WordPressサイトの場合静的サイトより少し手間がいりますが、前回の記事で設定したものに比べると、
項目が少ないので幾分か楽だと思います。
何か間違いなどがありましたら、問い合わせフォームまたはTwitterにて教えて下さい。
参考
https://sal-blog.com/wordpressでcloudfrontを利用する際にブロックエディタが使えな
https://qiita.com/Ichiro_Tsuji/items/38592e737257cb45ca13
よかったらグッドボタン&シェアお願いします!
記事の削除依頼や修正依頼については、問い合わせにて受け付けております。
ぜひお気軽に問い合わせください。
筆者のプロフィール
名前: Otusoa (本名: 小林 栄太)
主に1年半ぐらい趣味でWebサイトを作っています。
このブログは痒い所に手が届くニッチな技術を提供します。
当サイトでは、自分の好きなようなことをマイペースに発信していきます。
送信したコメントは承認作業を行うまで表示されません。ご了承ください。
なお名前の入力は任意でメールアドレスの入力も必要ありません。 CAPTCHA(画像認証)の文字が表示されない場合は再リロードしてください。