# Cloudflare UI 経由でのインストール

### 前提条件

Netacea を使用して正常に統合するには、以下をご確認ください。

1. Cloudflare ダッシュボードへのアクセス権を持つ有効な Cloudflare アカウント。
2. リクエスト制限などの問題を回避するための「有料」Cloudflare サブスクリプション。
3. Cloudflare Workers 製品へのアクセス権。
4. Netacea が提供する webpack コンパイル済みコードバンドル。

### **実装手順**

Netacea は、関連するすべての API 情報がプロビジョニングされた Webpack コンパイル済み Worker を提供します。以下では、Worker を Cloudflare にアップロードする方法を詳しく説明します。

### Worker の作成 <a href="#create-worker" id="create-worker"></a>

保護対象ドメインのアカウントに新しいサービス（Worker）を作成する必要があります。アカウント内のウェブサイトに移動し、Workers > Overview > Create の順に進みます。

<figure><img src="https://2885909206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKs3gGgxDF9S8O56fhTGU%2Fuploads%2Fgit-blob-8dc8820b1ae03dfea248286fd265a4c38eb78afb%2FScreenshot%202024-11-22%20095317.png?alt=media" alt=""><figcaption></figcaption></figure>

次に、選択可能な複数のテンプレートオプションが表示されます。コードは別途追加するため、Create Worker を選択します。\ <br>

<figure><img src="https://2885909206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKs3gGgxDF9S8O56fhTGU%2Fuploads%2Fgit-blob-f1ab7df70063971f838278c928f3ca562015d67e%2Fimage%20(1)%20(1)%20(1)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

Worker にわかりやすい名前を付け、「Deploy」をクリックします。

<figure><img src="https://2885909206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKs3gGgxDF9S8O56fhTGU%2Fuploads%2Fgit-blob-7560ccaece338bc22bc0e97aee05777cda96c19f%2Fimage%20(3)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

### Worker の編集 <a href="#edit-worker" id="edit-worker"></a>

新しく作成された Worker のサマリーページで、「Edit Code」を選択します。

<figure><img src="https://2885909206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKs3gGgxDF9S8O56fhTGU%2Fuploads%2Fgit-blob-23477ab46dc1000d4087e7817e19ad39d771c490%2FScreenshot%202024-12-13%20142104.png?alt=media" alt=""><figcaption></figcaption></figure>

編集ページで、バンドルされた Worker JavaScript コードをコピーして貼り付け、Save または Deploy をクリックします。

<figure><img src="https://2885909206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKs3gGgxDF9S8O56fhTGU%2Fuploads%2Fgit-blob-54d7686f2e7e110ae78b4e92ef8ebf1ae362aeff%2FScreenshot%202024-12-13%20142556.png?alt=media" alt=""><figcaption></figcaption></figure>

### トリガーの作成 <a href="#create-trigger-s" id="create-trigger-s"></a>

編集ビューを終了し、Worker の「Settings」タブに移動して「Domains & Routes」を選択し、「+Add」ボタンをクリックして続行します。

<figure><img src="https://2885909206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKs3gGgxDF9S8O56fhTGU%2Fuploads%2Fgit-blob-844ac77c7ff959af361421f2bc36210559d513a1%2FScreenshot%202024-12-13%20144330.png?alt=media" alt=""><figcaption></figcaption></figure>

その後、Route を選択するよう求めるポップアップが表示されます。

<figure><img src="https://2885909206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKs3gGgxDF9S8O56fhTGU%2Fuploads%2Fgit-blob-bf697a5dd92145207254588224f1bf16631aeeef%2FScreenshot%202024-11-22%20094718.png?alt=media" alt=""><figcaption></figcaption></figure>

この Worker をトリガーするルート（ドメイン/パス）を追加します。

<figure><img src="https://2885909206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKs3gGgxDF9S8O56fhTGU%2Fuploads%2Fgit-blob-2be306aef7c5b963f00bdcd409bb45b33bae13ec%2FScreenshot%202024-11-22%20094806.png?alt=media" alt=""><figcaption></figcaption></figure>

ページ中央の情報を確認することで、どの Worker がどの特定のルートで実行されているかを確認できます。

Worker がルートにデプロイされたことを確認したら、実装は完了です。

### Worker のテスト <a href="#test-the-worker" id="test-the-worker"></a>

Worker が動作していることをテストするには、統合されたドメイン（ルート）にアクセスしてユーザートラフィックを生成します。

{% hint style="info" %}
***注意:** 指定したルートで **Workers がトリガーされない**問題が発生している場合は、そのルート（DNS レコード）の DNS 設定で **Proxy Status**（オレンジクラウドとも呼ばれます）が「**Proxied**」（有効）に設定されていることを確認してください。*
{% endhint %}

<figure><img src="https://2885909206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKs3gGgxDF9S8O56fhTGU%2Fuploads%2Fgit-blob-aa9673d34879a3b3a918e7b63c931fb5a4b0ed37%2Fimage%20(5)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>
