Edge Security Acceleration:Pages プロジェクトのビルドとルーティング

メリット

• コードとしてのインフラストラクチャ (IaC)：設定はコードとともにバージョン管理され、すべての変更が追跡可能になります。

• シームレスなチームコラボレーション：すべてのチームメンバーが 1 つの設定ファイルを共有することで、ローカル開発とクラウドデプロイメント間の一貫性が確保されます。

• 便利なロールバック：任意の過去のコミットにロールバックし、その正確なビルド環境を再現できます。

設定の優先順位

esa.jsonc の設定は、コンソール設定よりも優先されます：

• プロジェクトに esa.jsonc ファイルがない場合：

  • プロジェクトの詳細ページでビルドオプションを調整できます。詳細については、「コンソールでのビルド設定の変更」をご参照ください。

  • コンソール設定は、現在以降のすべてのデプロイメントに適用されます。

• プロジェクトに esa.jsonc ファイルが存在する場合：

  • システムはこのファイルを検出し、唯一の設定ソースとして使用します。

  • プロジェクトの詳細ページでは、 esa.jsonc によって管理されるコンソール設定は無視されます。

  • 設定を変更するには、 esa.jsonc ファイルを編集し、変更を GitHub リポジトリにプッシュします。

設定例

GitHub の Pages リポジトリに esa.jsonc ファイルを追加します。例：

{
  "name": "vite-react-template",
  "entry": "./src/index.js",
  "installCommand": "npm install",
  "buildCommand": "npm run build",
  "assets": {
    "directory": "./dist",
    "notFoundStrategy": "singlePageApplication"
  }
}

デフォルトモード

notFoundStrategy が esa.jsonc で設定されていない場合：

{
  "name": "vite-react-template",
  "entry": "./src/index.js",
  "assets": {
    "directory": "./dist"
  }
}

ESA は次のようにリクエストをルーティングします：

1. リクエスト URL がエッジノードに到達すると、ESA は一致する静的アセットがあるか確認します。見つかった場合、ESA はファイルを直接提供します。見つからない場合は、ステップ 2 に進みます。

2. エッジルーチン (ER) の関数スクリプトが存在する場合、ESA はそれを実行します。存在しない場合は、404 Not Found 応答が返されます。

シングルページアプリケーション (SPA)

シングルページアプリケーション (SPA) の場合、esa.jsonc で notFoundStrategy を singlePageApplication に設定します。例：

{
  "name": "vite-react-template",
  "entry": "./src/index.js",
  "assets": {
    "directory": "./dist",
    "notFoundStrategy": "singlePageApplication"
  }
}

ESA は次のようにリクエストをルーティングします：

1. リクエスト URL がエッジノードに到達すると、ESA は一致する静的アセットがあるか確認します。見つかった場合、ESA はファイルを直接提供します。見つからない場合は、ステップ 2 に進みます。

2. リクエストがナビゲーションリクエスト (Sec-Fetch-Mode: navigate ヘッダーを含む) かを確認します。ナビゲーションリクエストでない場合はステップ 3 に進みます。ナビゲーションリクエストの場合は、/index.html にルーティングしてステップ a に進みます：

   1. /index.html が存在する場合、ステータスコード 200 OK とともにその内容を返します。存在しない場合は、ステップ 3 に進みます。

3. ER の関数スクリプトが存在する場合、ESA はそれを実行します。存在しない場合は、404 Not Found 応答が返されます。

静的サイトジェネレーション

静的サイトジェネレーションアプリケーションの場合、esa.jsonc で notFoundStrategy を 404Page に設定します。例：

{
  "name": "vite-react-template",
  "entry": "./src/index.js",
  "assets": {
    "directory": "./dist",
    "notFoundStrategy": "404Page"
  }
}

ESA は次のようにリクエストをルーティングします：

1. リクエスト URL がエッジノードに到達すると、ESA は一致する静的アセットがあるか確認します。見つかった場合、ESA はファイルを直接提供します。見つからない場合は、ステップ 2 に進みます。

2. リクエストがナビゲーションリクエスト (Sec-Fetch-Mode: navigate ヘッダーを含む) かを確認します。ナビゲーションリクエストでない場合はステップ 3 に進みます。ナビゲーションリクエストの場合は、/404.html にルーティングしてステップ a に進みます：

   1. /404.html が存在する場合、ステータスコード 404 Not Found とともにその内容を返します。存在しない場合は、ステップ 3 に進みます。

3. ER の関数スクリプトが存在する場合、ESA はそれを実行します。存在しない場合は、404 Not Found 応答が返されます。

末尾のスラッシュの自動付加

デフォルトでは、Pages は HTML ファイルに対応するリクエスト URL に末尾のスラッシュを自動的に付加します。

リクエストパスが末尾のスラッシュで終わらない場合、ESA はそのパスが HTML ファイルに解決されるかどうかを評価します。解決される場合、ESA は HTTP 301 リダイレクトを発行して、URL の末尾にスラッシュが付加されたバージョンに転送します：

• {path}.html が静的アセットディレクトリに存在する場合、/{path} へのリクエストは /{path}/ にリダイレクトされます。たとえば、about.html が存在する場合、/about へのリクエストは /about/ にリダイレクトされます。

• {path}/index.html が静的アセットディレクトリに存在する場合、/{path} へのリクエストは /{path}/ にリダイレクトされます。

この動作はデフォルトで有効になっており、設定は不要です。