タグ: さくらのレンタルサーバ

WordPress にCloudflare を導入

はじめに

WordPress の当ブログにCloudflare を導入した際の手順の記録です。
WordPress はさくらのインターネットのさくらのレンタルサーバ上に構築されています。
とりあえずCloudflare のCDN を導入したという程度の内容です。

手順

1. Cloudflare のアカウント作成

Cloudflare のサイトにアクセスしてサインアップのリンクをクリックします。

Cloudflare - Create Account

メールアドレスとパスワードを入力して[Create Account] をクリックします。

Cloudflare > ダッシュボード

管理画面が表示されました。

先程入力したメールアドレス宛てにメールアカウントを確認するためのリンクが記載されたメールが届くので、メールが届いたらリンクをクリックします。

2. サイトの追加

管理画面の上部にある[Add site] をクリックします。

Cloudflare > サイトの追加

登録するサイトのドメイン名を入力して[Add site] をクリックします。
当ブログを登録するのでmadoverload.com と入力しました。

Cloudflare > Freeプラン

プランを選択します。
今回はFree プランにするので、Free を選択して[Continue] をクリックします。
クリックすると登録するサイトのDNSレコードのスキャンが始まるので、そのまま終わるまで少し待ちます。

Cloudflare > DNSレコード(スキャン結果)

スキャンが終わると、スキャン結果が表示されます。

  • A レコードのContent にはIPv4 のアドレス、AAA レコードにはIPv6 のアドレスが表示されています（さくらのレンタルサーバで割り当てられているIPアドレス）

今回、下記のように変更しました。

Cloudflare > DNSレコード(変更後)
  • A レコードのContent は編集前と同じIPv4 のアドレス、AAAA レコードのContent は編集前のIPv6 のアドレスと同じです
  • ウェブサイト向けのレコードはCloudflare でキャッシュされるようにProxied に、それ以外のメール関係のレコードはキャッシュさせずDNS としてのみ扱われるようにDNS only にしました

変更後、[Continue] をクリックします。

3. ネームサーバの変更

ネームサーバの変更を求めるページが表示されました。

Cloudflare > Change your nameservers

当ブログのWordPress はさくらのレンタルサーバ上に構築しているので、さくらのレンタルサーバ側で設定されているmadoverload.com のネームサーバ情報を、Cloudflare のページ上に表示されているネームサーバ（プライマリとセカンダリの2つの .ns.cloudflare.com）に変更します。

さくらのレンタルサーバ側の設定変更

さくらのレンタルサーバのコントロールパネルを開き、[ドメイン/SSL] > [ネームサーバ設定] をクリックしてドメインコントロールパネルを開きます。

さくらインターネット 会員メニュー > さくらのドメイン一覧

[さくらのドメイン] > [さくらのドメイン一覧] に表示されている当ブログのドメインmadoverload.com の”Whois” をクリックします。

さくらのレンタルサーバ > Whois > ネームサーバ

[Whois] > [ネームサーバ] の[ネームサーバを編集] をクリックして、Cloudflare のネームサーバ（.ns.cloudflare.com）に変更します。

さくらのレンタルサーバ > Whois > ネームサーバ（変更後）

ネームサーバの変更は反映されるのに数時間かかるようです。
反映されたらCloudflare からメールが届くとのことなので、反映されるまでの間にCloudflare 側の各種設定を行います。

4. Quick Start Guide

Cloudflare の管理画面にQuick Start Guide が表示されていたので、この案内に従って設定を進めます。

Cloudflare > Quick Start Guide

[Get started] をクリックします。

Automatic HTTPS Rewrites

Cloudflare > Improve security > Automatic HTTPS Rewrites

混在コンテンツエラーという、https で提供されているウェブサイト上の画像やリンクなどがhttp とhttps が混在することで起きるエラーにならないようにするために、http のコンテンツをhttps に自動で書き換える設定です。

ON のままにしておきます。

Always Use HTTPS

Cloudflare > Improve security > Always Use HTTPS

サブドメインを含めた全てのhttp リクエストをhttps にリダイレクトさせる設定です。
オリジンサーバのリダイレクトも有効になっているとリダイレクトループエラーが起きるので、当機能を有効にする場合はオリジンサーバのリダイレクトを無効にしておくことが推奨されています。

OFF だったのでON にしました。

オリジンサーバであるさくらのレンタルサーバ側のリダイレクトが有効になっていたので無効にします。

  1. コントロールパネルを開き、[ドメイン/SSL] > 対象ドメインの[設定] をクリック
  2. [ドメイン設定] > [HTTPS転送設定] > [HTTPSに転送する] のチェックをOFF にして[保存する] をクリック
さくらインターネット > ドメイン設定 > HTTPS転送設定

Auto Minify

Cloudflare > Optimize performance > AutoMinify

HTML、CSS、JavaScript ファイルを自動圧縮する設定です。

OFF のままにしておきます。

Brotli

Cloudflare > Optimize performance > Brotli

Brotli アルゴリズムを使って圧縮するための設定です。
この設定で行われる圧縮は、Auto Minify に加えて行われるもののようで、HTTP レスポンスのcontent-type ヘッダを見て圧縮する対象を判断するとのことです。

ON のままにしておきます。

Cloudflare > Quick Start Guide > Summary

最後、Summary で設定した内容を確認したら[Finish] をクリックします。

6. SSL/TLS

サイドバーの[SSL/TLS] をクリックします。

Cloudflare > SSL/TLS

Cloudflare とオリジンサーバ間の接続のSSL/TLS のモードを選択します。
4つのオプションから、http, https のどちらにするか、オリジンサーバから提示されたSSL 証明書がどのように検証されるようにするかを選択します。
オリジンサーバへの悪意のある接続を防ぐために、Full, Full(Strict) のどちらかにすることが推奨されています。

Flexible からFull に変更します。

7. Page Rules

Cloudflare でキャッシュするページのルールを設定します。
Free プランではルールを3つ設定することができます。

今回はWordPress 向けのルールを設定します。

Cloudflare > Rules > Page Rules

サイドバーの[Rules] > [Page Rules] のページを開き、[Create Page Rule] をクリックします。

ルール1. WordPress の管理画面をキャッシュしない

Cloudflare > Page Rule 1
  • URL > madoverload.com/wp-admin/*
  • Cache Level > Bypass
  • Disable Performance

ルール2. WordPress のプレビューページをキャッシュしない

Cloudflare > Page Rule 2
  • URL > madoverload.com/*&preview=true*
  • Cache Level > Bypass
  • Disable Performance

ルール3. 上記ルール以外のページをキャッシュする

Cloudflare > Page Rule 3
  • URL > madoverload.com/*
  • Cache Level > Cache Everything
  • Edge Cache TTL > 4 hours
Cloudflare > Page Rules (Position)

登録した3つのPage Rule を登録した順番に並び替えます。（優先度の高い順に並び替えます）

8. Cloudflare のWordPress プラグイン

Cloudflare 社が提供するWordPress 用プラグインです。

このプラグインをWordPress にインストールするとページの読み込みの高速化、SEOの改善、DDoS攻撃やWordPress固有の脆弱性からの保護など、何かとメリットがあるようです。
他にも、Cloudflare のユニバーサル SSL が有効になっている場合に発生するリダイレクトループを防止するヘッダーの書き換えもしてくれます。
ユニバーサルSSL が何のことか分からなかったので思い調べると、どうやらSSL/TLS の設定のことのようで、Flexible, Full, Full(strict) のいずれかにしていたら有効になっているということのようです。

Cloudflare のWordPress 用プラグインのインストール

WordPress にCloudflare のプラグインをインストールします。
今回はWordPress の管理画面の[プラグイン] > [新規追加] で検索したら見つかったので、[今すぐインストール] をクリックしてインストールしました。

Cloudflare WordPress プラグイン > インストール

インストールが完了したらプラグインを有効化して、Cloudflare プラグインの管理画面を表示します。（サイドバーの[設定] > [Cloudflare]）

Cloudflare WordPress プラグイン > 有効化

Cloudflare の認証を求めるページが表示されました。
前述の手順「1. Cloudflare のアカウント作成」で既にCloudflare のアカウントを作成しているので、”Sign in here” のhere をクリックします。

Cloudflare WordPress プラグイン > API Credentials 入力

Cloudflare のアカウント作成時に登録したメールアドレスと、Global API Key またはAPI Token を入力して[Save API Credentials] をクリックします。

Global API Key は、Cloudflare の管理画面の[My Profile] > [API Tokens] > [API Keys] > [Global API Key] の[View] をクリックすると表示されるのでこれを入力します。

Cloudflare WordPress プラグイン > ダッシュボード

Cloudflare プラグインの管理画面が使える状態になりました。

Home の一番上に表示されているApply Recommended Cloudflare Settings for WordPress が[Apply] をクリックするだけでWordPress 向けの推奨設定を適用してくれるようで便利そうでしたが、どのような設定をするのかを一つ一つ確認すると時間がかかりそうだったので、今回は適用しないでおきました。

後ほど時間がある時に設定内容を確認したいので、適用される設定の内容が記載されたページのリンクを貼っておきます。

9. Cloudflare が有効になる

Cloudflare の管理画面を見ると、Overview のページに “Great news! Cloudflare is now protecting your site” と表示されていました。

Cloudflare > 有効化 1

左上の[← madoverload.com] をクリックすると、Home 画面のmadoverload.com がActive になっています。

Cloudflare > 有効化 2

Cloudflare のアカウント作成時に登録したメールアドレスに、Cloudflare から”Status Active” と記載されたメールが届いていました。
前述「3. ネームサーバの変更」で行ったネームサーバの変更が反映されたようです。

DomainTools でmadoverload.com のWhois 情報を調べるとIP Location が”Cloudflare inc.” になっていました。

Cloudflare がCDN として期待した通りに動作しているか確認します。

  • ブラウザで登録したウェブサイトが正常に表示されるか確認する
  • 登録したドメインのメールアドレスにテストメールを送り受信できるか確認する

問題なければひとまず、Cloudflare の導入が完了です。

あとがき

トラブルと解消方法

上手くいかなかったことがあったので、記録として残しておきます。
一応、今回は下記の方法で解消させることができたという情報です。

  • リダイレクトループ
    • Cloudflare が”Active” になったらオリジンサーバ（WordPress）のページが表示されなくなった。Chrome では”リダイレクトが繰り返し行われました”、Safari では”多くのリダイレクトが発生しています”というメッセージが表示されるようになった。
    • SSL/TLS をFlexible → Full に変更したら解消された（ページが表示されるようになった）
  • WordPress のプレビューページの不具合
    • WordPress のプレビューページが表示されなくなった（プレビューページのタブは開くがページの内容が全く表示されない）
    • CloudflareのWordPressプラグインをインストールしたら解消された（プレビューのページが表示されるようになった）

どうしてCloudflare を導入したのか

CDN を導入することでページの読み込みを高速化できると思われますが、当ブログのアクセス数は1日に100件未満、アクセス元の99%以上が日本なので必要性は全くなかった。なので、これまでWordPress CDN も導入していなかった。

昨年の年末にCloudflare がYubiKey を$10 で購入できるキャンペーンをCloudflare で有効なゾーンを持っているユーザー向けにやっていることを知り、急ぎ年末にCloudflare を導入した次第です。
なお、この特別キャンペーンは2022年12月31日で終了しています。

これを機会にCloudflare のCDN のことをもっと知ることができればと思っています。

参照

さくらのレンタルサーバ新サーバーに移行

さくらインターネットのさくらのレンタルサーバが「表示速度および処理能力が従来の最大5倍となる新サーバー」の提供を始めました。

提供開始は2022年2月16日で、既存のユーザ向けの新サーバーへの移行ツールの提供は7月13日に始まりました。

New さくらのレンタルサーバ

当ブログはさくらのレンタルサーバを使っていてパフォーマンスを改善したかったので、新サーバに移行することにしました。
移行ツール自体は管理画面でボタンを押せばよいだけの単純なものでしたが、移行にあたり前提事項など確認する必要があったので記録しておきます。

事前確認

さくらのレンタルサーバの公式サイトに移行ツールについての説明が書かれていましたが、解説ページのリンクをクリックするとどのページを読んでいるのかよく分からなくなり混乱してきたので、WordPress を使っている自分に関係していそうなことを箇条書きしておきます。

  • 対象者
    • 旧仕様のさくらのレンタルサーバ（2022年2月16日11:00以前に提供していたサーバー）に契約している
  • 条件
    • 同一プランへの移行のみ
    • サーバー上のすべてのコンテンツが新サーバーに移行される
    • 移行後は旧サーバーにアクセスできなくなる
  • 移行ツールを利用できない対象者
    • MySQL4.0、5.1、5.5を利用中（5.7にアップグレードする必要がある）
    • バックアップ&ステージングを利用中（バックアップ＆ステージングの利用解除を行う必要がある）
    • 料金未納によりサーバーが停止中
  • 移行による変更点
    • クイックインストールまたは手動でインストールしたWordPress は、参照先データベース情報が「mysqlNNN.db.sakura.ne.jp」から「mysql57.アカウント名.sakura.ne.jp」に変わる
    • PHP7以上でcgiモードを利用している場合、モジュールモードに切り替わる
    • サーバーのIPアドレスが変わる
  • 移行作業の制約事項など
    • 移行される日時は数時間の幅があり正確に指定できない
    • 移行準備時間中は、サーバーコントロールパネル、Webメールへのログイン及び各種操作が利用できない（最大2時間目安）
    • 移行作業が開始するとサーバーの全機能が利用できなくなる（時間はデータの容量、ファイル数により異なるが、10GBで40分、100GBで約4時間程度を想定）

移行の操作手順

  1. サーバーコントロールパネルにログイン
  2. サイドメニューの[サーバ情報] > [移行ツール]
  3. [移行の申し込みに進む] ボタンをクリック
  4. 同意のチェックをONにし、[移行ツールを実行する] ボタンをクリック(8/14 22:04)
  5. 申し込みが完了するとコントロールパネルから強制ログアウトされる
    • “サーバ移行中です”と表示されるので[ログイン画面へ移動] ボタンをクリック
    • しばらくしてウェブページにアクセスすると、”現在、メンテナンス中です”と表示される
  6. 移行が完了すると、完了メールが送信される(8/15 0:00 に受信した)
    • 移行に失敗した場合、コントロールパネルにエラーメッセージが表示される

移行完了後の確認

  1. 翌朝、8時頃にWordPress のトップページを表示しようとしたら「このサーバは、さくらのレンタルサーバで提供されています」というページが表示された。そのまま放置して昼頃に再度表示するとWordPress のページが表示された
    • Jetpack のダウンタイムのモニターで検知された通知メールを見ると、23:46 にサイトのダウンを検知し、23:59にサイトのオンラインを検知していた（約13分のオフライン）
  2. WordPress のページが表示されたが、Chrome で表示するとアドレスバーのURL は”https” で始まり、”保護されていない通信” と表示されるようになった
    • Safari、Firefox、Brave Browser では保護された通信として表示される
    • スマホ版のChrome では保護された通信として表示される
    • 解消できないか少し調べたけれど原因を特定できなかったので、とりあえずこのまま放置することにした (解消できたので以下に訂正)
    • デベロッパーツールのSecurity タブを開くと、”Resources – active content with certificate errors” と表示されていたので、下記の手順を行って解消した
      1. デベロッパーツールのApplication タブを開き、サイドバーのApplication > Storage に[Clear site data] ボタンと”including third-party cookies” チェックボックスがあるので、チェックをONにしてボタンをクリック
      2. ブラウザのタブを閉じて、新しいタブを開きURLを入力すると、”保護されていない通信” が表示されなくなった（解消）
      3. デベロッパーツールのSecurity タブを開くと、”Resources – all served securely” と表示されていた
保護されていない通信（パソコン版Chrome）
デベロッパーツールのSecurityタブ（Resources - active content with certificate errors）
(デベロッパーツール) “Security” タブ > This page is not secure (broken HTTPS). > Resources – active content with certificate errors
(デベロッパーツール) “Application” タブ > サイドバーの”Application > Storage”
デベロッパーツールのSecurityタブ（Resources - all served securely）
(デベロッパーツール) “Security” タブ > This page is secure (valid HTTPS). > Resources – all served securely

あとがき

新サーバへの移行後、リンクをクリックした時の反応が明らかに良くなっている。

パソコン版Chrome で”保護されていない通信” と表示されてしまうのが悲しい。常時SSL化の時もChrome は前のめりだったので、今回も何かしらの仕様に引っ掛かっているのかもしれない。
解消させる上で参考になるかもしれないサイトのリンクを以下、貼り付けておいて今回はここまでとする。 (解消できたので以下に訂正)

パソコン版Chrome で”保護されていない通信” と表示された原因は、サイトの何かしらの情報がキャッシュに残っていたことが原因だったようです。
Command + Shift + R のハード再読み込みと、デベロッパーツールのモードで使える”キャッシュの消去とハード再読み込み” を試したけれど、その時はタブを閉じて新しいタブで表示させるということをしなかったので、もしかしたらそれで解消できていたのかも？気になるけれど気にしないことにします。