> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Fastly CDNでのアプリケーションファイルセルフホスティング

> デフォルトのKameleoon CDNを使用する場合と比較して、DNS遅延とSSLハンドシェイクのオーバーヘッドを削減するために、Fastly CDNでKameleoonアプリケーションファイルをセルフホストします。

<Info>
  `kameleoon.js`は非推奨となり、すべてのKameleoon実装スニペットで`engine.js`に置き換えられました。`kameleoon.js`は**2026年6月1日**以降サポートされなくなります。この日付以降、`kameleoon.js`を参照しているWebサイトのキャンペーンは機能しなくなります。実装スニペットを適宜更新してください。
</Info>

## Fastlyの構成

Fastlyアカウントにログインし、以下のようにオリジンホストと2つのコンテンツヘッダーを作成します。

### オリジンホストを作成する

1. `Service configuration`タブに移動し、左側のエントリ`Origins > Hosts`をクリックします。`Create host`をクリックし、Kameleoonアプリケーションファイルをターゲットにする新しい条件を作成します。**Kameleoon JavaScript Application File**のような分かりやすい名前を付けてください。
2. Apply ifボックスに、`req.url ~ "^/kameleoon/engine.js"`という条件を入力します。
3. 新しい条件を保存し、新しいオリジンホストに適用します。
4. オリジンホストに以下の構成パラメータを適用します。`YOUR_SITECODE`はKameleoonプロジェクト IDに置き換えます(取得手順については[この記事](/user-manual/faq#how-do-i-find-my-sitecode)を参照してください)。

* **Name**: YOUR\_SITECODE.kameleoon.io
* **Address**: YOUR\_SITECODE.kameleoon.io
* **Certificate hostname**: YOUR\_SITECODE.kameleoon.io

<Frame>
  ![Origin host configuration](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/fastly-origin-host.png)
</Frame>

<Note>
  注:Kameleoonスクリプトのドメインはプロジェクトごとに異なる場合があります。プロジェクトは作成日に応じて`kameleoon.eu`または`kameleoon.io`のいずれかでホストされる可能性があります。Kameleoonアプリのプロジェクトに表示されているドメインを使用してください。
</Note>

### ヘッダーを作成する

Webサイトからユーザーにコンテンツを提供する方法を指定するためにヘッダーを作成する必要があります。

1. 左側のエントリ`Content > Headers`をクリックします。`Create a header`をクリックします。
2. ホスト用に作成したのと同じ条件を添付して、サイト上の新しいKameleoon JavaScript Application Fileをターゲットにします。
3. ヘッダーに名前を付け(例:YOUR\_SITECODE.direct.kameleoon.io host)、以下のように構成されていることを確認します。`YOUR_SITECODE`はKameleoonプロジェクト IDに置き換えます。

* **Type / Action**: Request - Set
* **Destination**: http.Host
* **Source**: "YOUR\_SITECODE.direct.kameleoon.io"

4. Createをクリックしてヘッダーを保存します。

<Frame>
  \[![Header 1 configuration](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/fastly-header-1.png)
</Frame>

新しい構成を有効化する前に、リクエストのベースを変更する2つ目のヘッダーを作成する必要があります。

1. `Create a header`をクリックします。
2. ホスト用に作成したのと同じ条件を添付して、サイト上の新しいKameleoon JavaScript Application Fileをターゲットにします。
3. ヘッダーに名前を付け(例:YOUR\_SITECODE.direct.kameleoon.io base)、以下のように構成されていることを確認します。`YOUR_SITECODE`はKameleoonプロジェクト IDに置き換えます。

* **Type / Action**: Request - Regex
* **Destination**: url
* **Source**: req.url
* **Regex**: ^/kameleoon/engine.js
* **Substitution**: /engine.js?uncompressed=true

4. Createをクリックしてヘッダーを保存します。

<Frame>
  \[![Header 2 configuration](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/fastly-header-2.png)
</Frame>

### 圧縮形式を選択する

圧縮を有効にするには、以下の手順で圧縮形式を選択することから始めます。

1. 左側のエントリ`Content`をクリックします。
2. Compressionエリアまでスクロールします。Compressionコントロールが表示されます。
3. `Use Brotli compression when available`を選択して、サポートされているブラウザではデフォルトでBrotli圧縮を使用します。

<Frame>
  \[![Compression configuration](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/fastly-compression.png)
</Frame>

<Note>
  ソースコードを更新する前に、新しいFastly構成を有効化することを忘れないでください。
</Note>

## ソースコードにKameleoonスニペットを追加する

<Note>
  WebサイトにKameleoonを実装する方法を理解するには、[この記事](../implementation-and-deployment/standard-implementation)を参照してください。
</Note>

最後のステップは、インストールタグ内のデフォルトのKameleoon Application JavaScript URLをFastly URLに置き換えることです。たとえば、JavaScriptファイル([アンチフリッカー付き非同期ロード](../implementation-and-deployment/standard-implementation#アンチフリッカーなしの非同期タグ))の実装方法を使用している場合、Kameleoonアプリケーションファイルはデフォルトで`//SITE_CODE.kameleoon.io/engine.js`にホストされます。インストールタグ内のこのURLを自身のFastly URLに置き換えるだけです。