Cloudflareでサブディレクトリを設定する

Cloudflareを使って /docs サブディレクトリでドキュメントをホストします

1

GitBook サイトの設定

GitBook 組織で、サイドバー内のドキュメントサイト名をクリックし、次に サイトを管理 または、 設定 タブを開きます。 ドメインとリダイレクト セクションを開き、「Subdirectory」の下で サブディレクトリを設定.

docs をホストしたい URL を入力します。次に、docs にアクセスするためのサブディレクトリを指定します。例: tomatopy.pizza/docsを入力し、 設定.

の下で 追加の設定、これでプロキシ URL が表示されます。これは、Cloudflare worker を設定する次の手順で使用します。クリップボードにコピーしてください。

2

Cloudflare worker を作成する

Cloudflare アカウントにサインインして、次へ移動します Workers & Pages

次のボタンをクリックします ページグループを作成 ボタンをクリックしてください。

「アプリケーションを作成」画面で、次のボタンをクリックします Hello world 「テンプレートから始める」カード内のボタン。

worker に、次のようなよりわかりやすい名前を付けます mydocs-subpath-proxy。worker の名前の変更が終わったら、次をクリックします デプロイ.

3

カスタムドメインを設定する

worker には、使用できるデフォルト URL が割り当てられます。代わりにカスタムドメインを設定する場合（たとえば tomatopy.pizza）、次をクリックします 設定。 次に、「Domains & Routes」セクションで、次をクリックします + Add.

開いた「Domains & Routes」トレイで、次をクリックします カスタムドメイン、その後に続くテキストボックスにカスタムドメインを入力します。カスタムドメインを指定する際は、 絶対に サブディレクトリを含めないでください。たとえば、 tomatopy.pizza は正しく、 tomatopy.pizza/docs は正しくありません。

4

worker コードを更新する

worker のデプロイが完了したら、次をクリックします コードを編集、または次をクリックします プロジェクトへ続行、そして右上の コードを編集 ボタン。

開いたコードエディタで、サンプルコードを次のスニペットに置き換えてください:

export default {
  fetch(request) { 
    const SUBDIRECTORY = '/docs';
    const url = new URL(request.url);
    const target = "<INSERT YOUR PROXY URL FROM GITBOOK>" + url.pathname.slice(SUBDIRECTORY.length);
    const proxy = new URL(
      target.endsWith('/') ? target.slice(0, -1) : target 
    )
    proxy.search = url.search;
    return fetch(new Request(proxy, request));
  }
};

5 行目の URL を、最初の手順で GitBook から取得したプロキシ URL に更新することを忘れないでください。

終わったら、次をクリックします デプロイ。この処理には少し時間がかかる場合があります。完了したら、URL にアクセスしたときにドキュメントサイトが表示されるはずです！