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

{% stepper %}
{% step %}

#### GitBookサイトの設定

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

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

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

{% step %}

#### Cloudflare Worker を作成する

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

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

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

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

{% step %}

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

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

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

{% step %}

#### Worker のコードを更新する

Worker のデプロイが完了したら、 **コードを編集**をクリックするか、 **プロジェクトに進む**をクリックしてから、右上の **コードを編集** ボタンをクリックします。

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

{% code lineNumbers="true" %}

```javascript
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));
  }
};
```

{% endcode %}

{% hint style="info" %}
5行目の URL を、最初の手順で GitBook から取得したプロキシ URL に更新してください。
{% endhint %}

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