Cloudflare を使ったサブディレクトリの設定

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

1

GitBookサイトの設定

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

ドキュメントをホストしたいURLを入力します。次に、ドキュメントへのアクセス用のサブディレクトリを指定します。例： tomatopy.pizza/docs、そして 設定.

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

2

Cloudflare Worker を作成する

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

クリックして 作成 ボタンをクリックしてください。

「アプリケーションを作成」画面で、 Hello world カードの「テンプレートから開始」の

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

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 にアクセスすると、ドキュメントサイトが表示されるはずです！