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

{% stepper %}
{% step %}

### GitBook サイトの設定

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

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

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

{% step %}

### Cloudflare worker を作成する

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

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

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

worker に、次のようなよりわかりやすい名前を付けます `mydocs-subpath-proxy`。worker の名前の変更が終わったら、次をクリックします **デプロイ**. 
{% 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 %}