個人開発のWebサービスをCloudflareに載せてみた【無料でここまでできる】

DNS zoneの登録#

なにはともあれ、Cloudflareを使うための第1ステップはドメインのzoneを登録するところからです。

例えば、CloudflareのCDN（無料）だけを使いたかったとしてもDNS zoneをCloudflare上でホスティングする必要があります。Cloudflareの恩恵は受けられませんが、CloudflareのDNS zoneホスティングだけを使うと言ったことも無料で可能です。

（スクショは英語ですが、すべて日本語の表示もできます）

zoneを登録したら、各レコードを追加していきます。

レコードを追加する際に普通とは違うのが、“Proxy status” というスイッチがあることです。このスイッチをonにするとDNS zoneサーバのレスポンスは登録したIPアドレスなどではなく、CloudflareのReverse proxyサーバのアドレスに置き換わります。

では、”Proxy status”をonにしたら左の項目に登録したIPアドレスはどう扱われるのかといいますと、Reverse Proxyのoriginのホストとして扱われます。

独特な概念ではあって最初からつまずきやすいですが、一度理解してしまえば大丈夫ですし、段階的に切り替えられます。まずはReverse proxyをoffにした状態でDNS zoneを移行するのが良いです。

このblog.teraren.comのサイト自体もCloudflareを使っているのでDNSを引くとReverse proxyのアドレスが返ってきます。

Reverse proxyで受けられるようにoriginを設定#

既存のはorigin側のwebサーバの設定では、グローバルからリクエストを受ける設定になっているのでreverse proxyからアクセスを受けられるように設定します。

今までは、ユーザに見せるホスト名でのTLS terminationなどを行ったいた設定をreverse proxyからのアクセスを前提とした設定にします。

設定例: Configure Nginx Reverse Proxy behind Cloudflare

キャッシュルールの設定#

Reverse Proxy自体がCDN機能を持っているので、どのコンテンツをキャッシュするかどうかを設定します。

WebからわかりやすいUIで設定できるので自分のホスティングするサービスに応じてルールを書いていきます。

無料だと10個までしかルールセットを作れません。私はキャッシュの期間ごとにルールセットを作っています。

1ヶ月キャッシュ、7日キャッシュ、1日キャッシュ、キャッシュ無しという分類です。

（2つ目と3つ目は同義です。もともとは別の期間を設定していた名残です。）

私の環境における「キャッシュ無し」のスクショを書いておきます。

WordPressの管理画面、ヘルスチェック用エンドポイント、動的なスクリプト、RSSフィードなどを記載してあります。

逆に1ヶ月の長期間を設定している設定はこちらになります。主に画像などの静的アセットになります。昨今はCDNを考慮したアセットの構築が行われているので内容が変わればURLも変わるという前提のためです。

CDN周りだけでも以下のような設定が簡単に行えます。

• Query Stringごとにキャッシュするかどうか
• ブラウザキャッシュのヘッダを付加するか
• Originが落ちたときにキャッシュをサーブするか
• CDNの一時的に一括無効化

CloudflareのCDNのすごいところはinvalidationが数秒で終わることです。Amazonだと数分とかかかったりしちゃいますが。

統計情報#

Reverse ProxyとCDNを使いだすと以下のような統計情報が表示されてきます。眺めているだけでも楽しいです。

右にあるメニューに注目してほしいのですが、もしサービスが攻撃を受けていたら一時的に「Javascriptによる人間かどうかのチャレンジを挟む」というスイッチがあるのでONにすればoriginのサービスを過負荷から守れます。

トラフィックの統計も細かく表示されます。

Webサイトへの攻撃に関する統計情報

プロトコルやどれだけ待機を節約できたかの情報も表示されます。

30日で見てみると、300GBのトラフィックを節約できたみたいです。（無駄なトラフィックを節約することでCO2削減にも貢献！）

WordPressの設定#

WordPress用にCloudflareのプラグインが用意されています。

インストールしなくても使えることは使えるのですが、記事を更新すると自動でCDNの関連ページをpurgeしてくれます。あと、CDNでWordPressを運用するにあたってWordPressの挙動を勝手に裏で変更しているようです。

Cloudflare CDN を使う場合はこのプラグインは必須と言っていいです。物理的にはインストールしなくても動きますが、様々な運用上のユースケースに対応する機能が入っているので、入れておかないと予想外のコンテンツがキャッシュされてしまうリスクがあります。

内部でどんなことをやっているのか軽く紹介します。

public function initAutomaticPlatformOptimization()
{
    // it could be too late to set the headers,
    // return early without triggering a warning in logs
    if (headers_sent()) {
        return;
    }

    // add header unconditionally so we can detect plugin is activated
    $cache = apply_filters('cloudflare_use_cache', !is_user_logged_in());
    if ($cache) {
        header('cf-edge-cache: cache,platform=wordpress');
    } else {
        header('cf-edge-cache: no-cache');
    }
}

public function purgeCacheOnPostStatusChange($new_status, $old_status, $post)
{
    if ('publish' === $new_status || 'publish' === $old_status) {
        $this->purgeCacheByRelevantURLs($post->ID);
    }
}

public function purgeCacheOnCommentStatusChange($new_status, $old_status, $comment)
{
    if (!isset($comment->comment_post_ID) || empty($comment->comment_post_ID)) {
        return; // nothing to do
    }

    // in case the comment status changed, and either old or new status is "approved",
    // we need to purge cache for the corresponding post
    if (($old_status != $new_status) &&
        (($old_status === 'approved') || ($new_status === 'approved'))) {
        $this->purgeCacheByRelevantURLs($comment->comment_post_ID);
        return;
    }
}

まとめ#

IPv6対応、HTTP3/QUICK対応、DDoS対策、TLS証明書更新自動化、HSTS設定、CDN利用、DNSSECが行えてます。今までは自分で頑張って設定していたことがもうすでに用意されている感じです。

Cloudfalreは昨今の面倒なWebサイト運用における設定をWebサービスの1レイヤー上で面倒を見てくれるようなサービスです。

しかも無料。。。申し訳なくなってきます。

tunnelのセットアップ#

origin側にCloudflareのdaemonを動かして、tunnelを設定できます。cloudflareとoriginの間のトラフィックをこのtunnelを通すことによってoriginサーバ側でポート開放をする必要が無くなります。

tunnelを使うためにはCloudflare上のZero Trustの管理画面で設定します。

1ホストに対して1本のトンネルを作ってある設定例です。

daemonのインストールも非常に楽で管理画面上に表示されている例にあるコマンドを叩くだけです。

以下のようにpublicのホスト名と、originのサービス名を登録していきます。ここで登録するとCloudflareのDNSの設定にレコードが追加されていきます。既存のレコードと重複する場合はエラーが出ます。

tunnel経由でoriginへアクセス#

1つ前のトンネルの設定をする際に、Cloudflareとoriginの通信を安全にしておくことをおすすめします。ブラウザとCloudflare間の設定はグローバルなのでLet’s encryptといった枠組みでTLS証明書の発行と運用簡単に設定できますが、originへのアクセスはprivateネットワークなのでそう簡単にはできません。

そこで、Cloudflareが発行する証明書をoriginサーバにインストールすることでCloudflareから発行された証明書がインストールされたoriginサーバということを担保する証明書を利用します。

その設定が完了すれば、上記のようにCloudflareを挟んでも安全にoriginの信頼性を保証できることになります。

Cloudflare上ではこのことをE2EEと呼んでますが、TLS terminationをCloudflare上で行っているのでE2Eでの秘匿性と、完全制は保証できないですね。紛らわしいです。

また、ここでは触れませんがsshなどのサービスもzero trustのサービスによってtunnel経由でアクセスできるように設定できるのでsshのポートすら空けないですみます。

BICはOFFにしたほうが良さそう#

Security > Settingメニューに有るBrowser Integrity Checkはオフにしたほうが良さそうです。プログラムからアクセスされるAPIサービスを運用していると、このルールによってblockされているリクエストが存在します。

24時間以内に10件くらいがブロックされてしまっていました。