• 公開日: 2024-06-18
  • 最終更新日:

さくらのレンタルサーバーのWordPressとCloudFrontを組み合わせて同時アクセスに強くしよう!

さくらのレンサバのWordPressとCloudFrontを組み合わせて同時アクセスに強くしよう!

前回の記事はこちらです

まだ前回の記事を見てない人は前回の記事を見てくれたら幸いです。
※すでにオリジンサーバーと、CloudFrontを連携させてたら見なくて大丈夫です。

※この記事はさくらインターネットと一切関係ありません。個人のブログです。
企業ロゴを画像に使っているのは、この会社のサービスなんだとわかりやすくするためです。

前提条件

  • オリジンサーバー側でWordPressのセットアップが終わってること。
  • 前回の記事で、CloudFrontとさくらのレンタルサーバー(もしくはその他カスタムオリジン)を連携していること。

WordPressを利用するための、CloudFront側での準備

対象のディストリビューションを選択し、ビヘイビアの設定に行きます
そして対象のビヘイビアを選択して、編集をクリック。

AWS CloudFront ビヘイビアの設定

ビューワーの項目に行き、
「許可されたHTTPメソッド」をGET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
に変更してください。(一番種類が多いやつ)

キャッシュキーとオリジンリクエストの項目に行き、
Legacy cache settingsを選択する。
そしたら下記の画像のような項目が出てくると思うので、設定をしていきます。

「ヘッダー」は「なし」にしてください。

「クエリ文字列」は「すべて」にしてください。
Cookieは「すべて」にしてください。
オブジェクトキャッシュは何もいじらなくていいです。

AWS CloudFront ビヘイビア キャッシュキーとオリジンリクエスト

CloudFront側でやるのは以上です。
お疲れさまでした。

WordPress側でやる設定

まずはオリジン側のドメインでWordPressにログインします。(例: cdn.pita-app.com/wp-login.php)
オリジンにCloudFront以外がアクセスできないようにしてる人はアクセス規制を解除してください。

WordPressログイン画面 (オリジン側のドメイン)

このままだと、サイト内のURLがオリジン側に向いてしまうため、WordPressのアドレス系の設定
を変える必要があります。

WordPress アドレス (URL)
サイトアドレス (URL)
に実際に表示したいドメイン名を記述してください。
(CloudFrontで代替ドメイン名(CNAMEs)で設定したドメイン)

そしたら、実際に表示したいドメインにリダイレクトされると思うので、
もう一度ログインしてください。

そしたら完了です。

WordPress 設定 > 一般 サイトアドレスとWordPressアドレスを実際に表示したいドメインに変えてる

CloudFrontを経由しているとブロックエディタが使えない!?

どうやらWordPressはPCかPCじゃないかで、ブロックエディタを有効にするか決めているのですが
CloudFrontを経由しているとWordPressがPCからのアクセスじゃないなと誤認識して、
ブロックエディタが無効になるみたいです。
何だこの仕様

対策として、functions.phpを編集してすべてのデバイスでブロックエディタを有効にできるみたいです。
下記のコードをfunctions.phpにコピーしてください。

WordPress 投稿 ブロックエディタが有効ではない画面
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

よかったらグッドボタン&シェアお願いします!

送信したコメントは承認作業を行うまで表示されません。ご了承ください。
なお名前の入力は任意でメールアドレスの入力も必要ありません。 CAPTCHA(画像認証)の文字が表示されない場合は再リロードしてください。

CAPTCHA


記事の削除依頼や修正依頼については、問い合わせにて受け付けております。
ぜひお気軽に問い合わせください。

筆者のプロフィール

profile-img

名前: Otusoaオツソア (本名: 小林 栄太)

主に1年半ぐらい趣味でWebサイトを作っています。
このブログは痒い所に手が届くニッチな技術を提供します。
当サイトでは、自分の好きなようなことをマイペースに発信していきます。

Contact