Cloudflare 連携 - はじめに

当社のCloudflare連携機能では、Cloudflareのエッジコードソリューションである「Cloudflare Workers」を活用し、アプリケーションのコードやWebサーバーに変更を加えることなく、CDNから直接動作する待合室サービスを提供します。

はじめに

この記事では、CrowdHandlerとCloudflareを連携させるために必要な手順を順を追って解説します。

このガイドを進めていく中で、どこかで行き詰まったり、質問があったりした場合は、サポートサイトからお気軽にお問い合わせください。

前提条件

  1. 有効なCrowdHandlerアカウント。まだ登録がお済みでない場合は、こちらから登録できます。
  2. Cloudflareアカウント。
  3. 保護対象のドメインは、Cloudflareで「プロキシ設定」として設定する必要があります。「DNSのみ」モードでは機能しません。

注： WordPress や WooCommerce のサイトを保護したいですか？必ず設定を行ってください ORIGIN_TYPE = wordpress ガイドのステップ2で。

ステップ 1: Cloudflare Worker を作成する

  1. Cloudflareアカウントにログインしてください。

  2. 左側のナビゲーションから「ドメイン」を選択してください。

  3. お持ちのドメインから1つ選択してください：

  4. 左側のナビゲーションから「作業員のルート」メニューを選択してください。

  5. ページの右上に「ワーカーの管理」というボタンがあります。それをクリックして、次の手順に進んでください。

  6. 右上にある「アプリケーションを作成」ボタンをクリックしてください。

  7. このページで、「Hello World! から始める」を選択してください。

  8. ワーカー名を設定できるようになりました。crowdhandler-integration に設定してください。

    注：現時点ではコードを変更することはできません。これはあくまで基本的なワーカーの設定です。

  9. 「デプロイ」をクリックして、ワーカーの作成に進んでください。

  10. それでは、「コードを編集」をクリックして、コードの統合を適用してみましょう。

  11. デフォルトの「Hello World」コードが表示されます。

  12. GitHubから当社の連携コードをコピーし、スクリプトに貼り付けてください。

  13. 「デプロイ」ボタンをクリックしてください。

ステップ 2: ワーカー変数の設定

  1. スクリプト編集ページの「戻る」ボタンをクリックしてください。

  2. 「設定」→「変数」に移動します。

  3. 以下の変数をプレーンテキストとして追加し、「保存してデプロイ」をクリックしてください。

    1. API_ENDPOINT = https://api.crowdhandler.com/v1
    2. API_KEY = ここに公開鍵を入力してください （CrowdHandlerの管理画面の「アカウント」→「API」セクションで確認できます。）
    3. （任意） WHITELABEL = false (デフォルト) | true
    4. （任意） ORIGIN_TYPE = WordPress （WordPress または WooCommerce のウェブサイトを保護する場合は、このオプション変数を設定してください）
    5. （任意） NO_BYPASS = ここにランダムなトークンを入力してください
    6. （任意） FAIL_TRUST = false | true (デフォルト)
    7. （任意） SAFETY_NET_SLUG = ここに待合室のスラッグを入力してください
    8. （任意） COOKIE_DOMAIN = YOUR_COOKIE_DOMAIN_HERE
    9. （任意） IP_HEADER = ここにカスタムヘッダーを入力してください

オプションの変数

WHITELABEL (デフォルト false) — デフォルトでは、ユーザーは CrowdHandler の wait.crowdhandler.com ドメインでキューに入れられます。もし WHITELABEL が true に設定されている場合、ユーザーは CrowdHandler が保護しているドメインのキューに入れられます。たとえば、CrowdHandler が以下を保護するように設定されている場合、 www.example.com, ユーザーは www.example.com/ch/ パス。アプリケーション内に「/ch/」というルートが存在する必要はありません。詳細については、 こちらのホワイトラベル待合室.

ORIGIN_TYPE — 値を WordPress WordPress または WooCommerce のオリジンを保護している場合。これにより、以下の正規表現パターンに一致する URL リクエストが CrowdHandler API のチェック対象から除外されます： /(w[cp][-_](?![-_])(?!order_).*|xmlrpc\.php|readme\.html|license\.txt|trackback|feed(?:\/.*)?|comments\/feed(?:\/.*)?)(\?.*)?/

NO_BYPASS — 『ザ・ NO_BYPASS この値は、x-ch-no-bypass ヘッダーの値としてオリジンに送信されます。アプリケーション内でこのヘッダーを確認することで、リクエストが CrowdHandler を経由したことを検証できます。実装例については、 この記事.

FAIL_TRUST (デフォルト true) — デフォルトでは、CrowdHandlerのAPIによるチェックインに失敗したユーザーは信頼されます。これを false, CrowdHandlerのAPIによるチェックインに失敗したユーザーは、CrowdHandlerがそれらのユーザーに対する対応を決定できるまで、セーフティネットの待機室に送られます。「Trust on Fail」の詳細についてはこちらをご覧ください。 こちら.

SAFETY_NET_SLUG — もし SAFETY_NET_SLUG が定義され、 FAIL_TRUST は次のように設定されています false、この待機室のスラグはセーフティネット室として使用されます。もし SAFETY_NET_SLUG 価値と FAIL_TRUST は次のように設定されています false, セーフティネットルームとしては、汎用の待合室テンプレートが使用されます。待合室のスラグは、CrowdHandler コントロールパネルのルーム設定にある「URL」フィールドで確認できます。

COOKIE_DOMAIN — デフォルトでは、CrowdHandler クッキーはホスト限定です。設定するには COOKIE_DOMAIN 親ドメイン（例：example.com）に設定して、サブドメイン間で共有できるようにします。これは、以下の場合に役立ちます。 www.example.com および api.example.com でのセッションの検証。ワーカーのホスト名の親ホスト名である必要があります。無効な値は無視されます。

IP_HEADER — デフォルトでは、ワーカーはCloudflareの「cf-connecting-ip」ヘッダーからクライアントのIPアドレスを読み取ります。トラフィックが、元のクライアントIPアドレスを別のヘッダーに挿入するアップストリームプロキシ（zScalerやImpervaなど）を経由してCloudflareに到達する場合は、次のように設定してください。 IP_HEADER そのヘッダー名（例：x-forwarded-for）を指定して、代わりにそこからIPアドレスを取得します。複数値のヘッダーの場合は、左端のエントリが使用されます。設定されたヘッダーが存在しない、空である、または解析中に何らかの問題が発生した場合、ワーカーは安全にcf-connecting-ipにフォールバックするため、この変数が設定されていない場合でも、既存のデプロイメントには影響がありません。

重要：この設定を有効にするのは、トラフィックが、ご自身が管理する信頼できるアップストリームプロキシを経由することが確実な場合に限ってください。

ステップ 3: 保護対象のルート設定

  1. 左側のナビゲーションから「Websites」をクリックし、CrowdHandlerを統合するドメインをクリックしてください。

  2. 左側のナビゲーションを再度使用して、「Workers Routes」を選択してください。

  3. 保護したいルートを追加してください。

上記のパターンにより、次の手順で設定する除外ルートを除き、サイト上のすべてのルートに対してCrowdHandlerワーカーが起動されます。

重要

より具体的なルートを保護することにした場合は、例えば *tulipmania.net/enroll-now, かつ、オプションの変数を設定している場合 WHITELABEL true に設定するには、以下をカバーするルートを追加する必要があります。 *tulipmania.net/ch*. このルートがなければ、Cloudflare Workerは起動せず、待合室はレンダリングされません。

ステップ 4：ルートの除外

  1. CrowdHandlerによる保護の対象外とするルートを除外するには、ルートを手動で追加し、ワーカーのドロップダウンメニューから「なし」を選択してください。

CrowdHandler は、デフォルトでは、以下のファイル拡張子を持つルートを自動的にキューに入れようとはしません：

avi、css、csv、eot、gif、ico、jpg、js、json、map、mov、mp4、mpeg、mpg、ogg、ogv、ott、pdf、png、svg、ttf、webmanifest、wmv、woff、woff2、xml

除外を検討した方が良いルートの例としては、次のようなものがあります：

  • 静的アセットやメディアを保存するために使用されるパス。例：/images/*
  • サードパーティの決済プロバイダーによって生成されたコールバックURL。
  • JSONおよびRSSフィード。

ステップ 5: 設定を確定する

CrowdHandlerはお客様のCloudflareアカウントと連携されています。これからは、CrowdHandler管理コンソールを通じて、CrowdHandlerの設定をカスタマイズしていただくことになります。基本操作について解説した、おすすめのサポート記事を以下にご紹介します：

  1. はじめに（JavaScript 統合のインストールに関する部分は無視して構いません。）
  2. 待合室
  3. ドメインの設定

手順 6（推奨）：Cloudflare Workers のレート制限を解除する

Cloudflare Workersの無料プランでは、1日あたり10万リクエストという制限があり、UTC基準の深夜0時にリセットされます。トラフィック量に対してこの制限が低すぎると思われる場合は、1日あたりの制限がないWorkersの有料プランのご利用をお勧めします。

ステップ7：簡単な統合テストの実施

設定手順が完了したら、こちらのガイド「待合室をテストするには？」に記載されている手順に従って、設定の動作確認を行うことをお勧めします。