Cloudflareでサブパスホスティングを設定する

Cloudflare Workerを使用して、ヘルプセンターをサブパス上にホストする方法を学びましょう。

1 分で読めます

Cloudflare Workersを使用すると、メイン ドメインのサブパスに Notiondesk ヘルプ センターをホストできます。

例えば、help.yourdomain.com のようなサブドメインを使用する代わりに、ヘルプセンターを次のドメインから提供できます。

この設定は、メインのウェブサイトで既にCloudflareを使用しており、ドキュメントやサポートコンテンツを同じドメイン内に維持したい場合に便利です。

始める前に

Cloudflareでサブパスホスティングを設定する前に、以下のものを用意してください。

yourdomain.com/help

yourdomain.com/docs

yourdomain.com/support


  • 既存の Notiondesk ヘルプセンター
  • Cloudflareを通じて管理されているドメイン
  • ヘルプセンターに使用したいサブパスの例:
    • /help
    • /docs
    • /support
  • Notiondesk でサブパスホスティングが有効になりました

アイコン
注:この設定は、メインのウェブサイトドメインで既にCloudflareを使用している場合に推奨されます。ウェブサイトが別のプロバイダーでホストされている場合は、代わりに他のサブパスホスティングガイドのいずれかを使用することをお勧めします。

Notiondesk でサブパス ホスティングを有効にする

まず、Notiondesk ダッシュボードからサブパスホスティングを有効にしてください。

  1. Notiondesk ダッシュボードを開きます。
  1. 設定 > 一般に移動
  1. ドメインセクションまでスクロールしてください。
  1. サブパススイッチを有効にする
  1. セットアッププロバイダーとしてCloudflareを選択してください。
  1. Notiondesk によって生成された Cloudflare Worker コードをコピーします。

Notiondesk は、ヘルプセンターに適した値を使用して Cloudflare Worker コードを自動的に生成します。

コードは、以下のような設定固有の値が含まれているため、ご自身のダッシュボードから直接コピーしてください。

  • あなたのNotiondeskオリジンホスト
  • お客様独自のドメイン
  • 選択したサブパス

Cloudflare Workerを作成する

次に、ヘルプセンターのサブパスをNotiondeskにプロキシするCloudflare Workerを作成します。

  1. Cloudflareダッシュボードを開く
  1. 従業員とページへ移動
  1. 「アプリケーションの作成」をクリックします。
  1. 作業員を選択
  1. 新しいワーカーを作成する
  1. ワーカーエディターを開きます
  1. デフォルトのコードをNotiondeskによって生成されたコードに置き換えてください。
  1. 「保存してデプロイ」をクリックします。

Workerをデプロイすると、CloudflareはWorkerを利用可能にしますが、ヘルプセンターのURL上ではまだ実行されません。CloudflareがWorkerを起動するタイミングを認識できるように、ルートを設定する必要があります。

Cloudflareルートを設定する

Workerをデプロイした後、Cloudflareに対して、このWorkerを実行するタイミングを指定する必要があります。Workerは、選択したヘルプセンターのサブパスでのみ実行されるように設定してください。

例えば、ヘルプセンターをyourdomain.com/helpで利用できるようにしたい場合は、yourdomain.com/help*のようなワーカールートを追加します。

これにより、Cloudflare は以下のワーカーを実行します。

  • yourdomain.com/help
  • yourdomain.com/help/collections/getting-started
  • yourdomain.com/help/articles/example-article
  • yourdomain.com/help/contact

また、内部ルート Notiondesk が処理されることを確認する必要があります: yourdomain.com/_nd/*

Cloudflareにルートを追加する

  1. Cloudflareダッシュボードでワーカーを開きます。
  1. 設定に移動
  1. ドメインとルートを開く
  1. 「ルートを追加」をクリック
  1. ゾーンを選択してください
  1. ヘルプセンターのルートを追加してください。例 yourdomain.com/help*
  1. 内部ルート Notiondesk を追加します。例: yourdomain.com/_nd/*
  1. 変更を保存してください

icon
Notiondesk で選択したサブパスを使用します。 を選択した場合、ルートは になります。/docsyourdomain.com/docs*

/supportを選択した場合、ルートはyourdomain.com/support*になります。

Cloudflareの公式ドキュメントには、 ワーカーのルーティングワーカー用のカスタムドメインの仕組みについても説明されているので、さらに詳しい情報が必要な場合は参照してください。

Cloudflare Worker の例

const ORIGIN_HOST = "your-help-center.notiondesk.help";
const CUSTOM_HOST = "yourdomain.com";
const SUBPATH = "/help";

function isSubpathRequest(pathname) {
  return pathname === SUBPATH || pathname.startsWith(SUBPATH + "/");
}

export default {
  async fetch(request) {
    const url = new URL(request.url);
    const shouldProxy =
      isSubpathRequest(url.pathname) || url.pathname.startsWith("/_nd/");

    if (!shouldProxy) {
      return fetch(request);
    }

    url.hostname = ORIGIN_HOST;

    const proxyRequest = new Request(url, request);
    proxyRequest.headers.set("Host", CUSTOM_HOST);
    proxyRequest.headers.set("X-Forwarded-Host", CUSTOM_HOST);
    proxyRequest.headers.set("X-Forwarded-Proto", "https");

    if (isSubpathRequest(url.pathname)) {
      proxyRequest.headers.set("X-Site-Path-Prefix", SUBPATH);
    }

    return fetch(proxyRequest);
  },
};
アイコン
これはあくまで一例です。ご自身のヘルプセンターには、Notiondesk ダッシュボードで生成されたワーカーコードを使用してください。

設定を確認してください

ワーカーがデプロイされ、ルートが設定されたら、選択したサブパスからヘルプセンターを開きます。メインのヘルプセンターページが正しく読み込まれることを確認してください。

チェックすべき事項

以下の点を確認してください。

  • ヘルプセンターはメインドメインで読み込まれます
  • 記事ページが正しく開きます
  • 画像、スクリプト、スタイルが正しく読み込まれます
  • ブラウザのURLはカスタムドメインのままです。

アイコン
Cloudflareの変更が反映されるまで数分かかる場合があります。ヘルプセンターがすぐに読み込まれない場合は、しばらく待ってからページを更新してください。

関連する記事

このページは役に立ちましたか?