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

前回の記事はこちらです

PitaHexブログ

2024.06.12

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

https://www.pitahex.com/sakura-rs-cloudfront

さくらのレンタルサーバー, Route 53, Certificate Manager, 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