エッジ関数によるCDNオリジンプルの2つの方法：FetchとPassthrough
ダウンロード
フォーカスモード
フォントサイズ
このドキュメントの学習には約10分かかります。このドキュメントを学習することで、以下を理解できます：
1. CDNオリジンサーバーへのアクセス方法の違いを理解する必要がある理由について説明します。
2. エッジ関数ベースのFetchとPassthroughオリジンサーバーアクセス方式の適用シーン。
3. EdgeOneエッジ関数によるFetchとPassthroughオリジンサーバーアクセスの具体的な手順。
背景紹介
WebサイトまたはアプリケーションでCDN加速サービスを利用している場合、さまざまなビジネスニーズに応じてオリジンサーバーアクセス方式を柔軟に制御したいとお考えかもしれません。EdgeOneエッジ関数は、FetchとPassthroughの2つのオリジンサーバーアクセス方式を提供します。
Fetch方式では、リクエストとレスポンスの内容を完全に制御でき、カスタマイズ処理が必要なシーンに適しています。ユーザーリクエストがエッジノードに到達すると、エッジ関数はユーザーのデバイスタイプ、地理位置情報などを識別し、オリジンサーバーへのリクエストに対応するカスタムヘッダーを追加して送信できます。オリジンサーバーがこれらの情報に基づいて対応するレスポンス内容を返した後、エッジ関数はオリジンサーバーレスポンスに対してさらに処理を行うことができます。例えば、カスタムレスポンスヘッダーの追加、レスポンスボディの変更などを行い、最終的に処理済みのレスポンスをクライアントに返します。
Passthrough方式はリクエストを直接パススルーするため、パフォーマンスオーバーヘッドが低く、変更を必要としない大量のリクエストに適しています。例えば、動画共有プラットフォームの動画ファイルリクエスト、ソフトウェアダウンロードサービスの大容量ファイルリクエストなどの静的リソースシーンが該当します。Fetch方式と比較して、Passthroughは追加のリクエストオブジェクトとレスポンスオブジェクトを作成しないため、メモリ使用量とネットワークトラフィック消費を大幅に削減でき、高同時アクセス時に特に顕著な効果を発揮します。
適用シーン
Fetch方式の適用シーン
1. ユーザー情報（デバイスタイプ、地理位置情報など）に基づいてリクエストをカスタマイズ処理する必要があります。
2. リクエストヘッダー情報を追加または変更する必要があります。
3. オリジンサーバーレスポンスに対して二次処理を行う必要があります。
Passthrough方式の適用シーン
1. 大量の静的リソースを必要とするリクエスト（画像、CSS、JavaScriptファイルなど）。
2. 高同時アクセスであり、変更が不要なリクエスト。
3. 低遅延とリソース消費を追求するリクエストシーン。
操作手順
ステップ1：EdgeOneへの接続
ゼロからEdgeOneへの迅速な接続開始を参照して、サイト接続とドメイン接続を完了します。
ステップ2：エッジ関数の作成と設定
1. EdgeOneコンソールにログインし、左側のメニューバーで「サービス概要」に入り、「Webサイト安全な加速」内で設定が必要なサイトをクリックします。
2. 左側のナビゲーションバーで、エッジ関数 > 関数管理をクリックします。
3. 関数管理ページで、新規関数をクリックします。
4. テンプレートを選択して作成するページで、Hello Worldを作成をクリックした後、次へをクリックします。
5. 新規関数ページで、関数名、関数の説明、関数コードを入力します。以下は、エッジ関数がCDNオリジンサーバーアクセスを実現する2つの方法であるFetchとPassthroughのサンプルコードです：
async function handleEvent(event) {const { request } = event;const url = new URL(request.url);// Fetch方式によるオリジンサーバーアクセス例：リソースAを取得し、カスタムレスポンスヘッダーを設定します。if (url.pathname.startsWith('/example/')) {const response = await fetch(request);// カスタムレスポンスヘッダーを設定します。response.headers.set('X-Processed-By', 'EdgeFunction-Fetch');return event.respondWith(response);}// Passthrough方式によるオリジンサーバーアクセス：リクエストを直接パススルーしてリソースBを取得します。if (url.pathname.startsWith('/static/')) {// リクエストはオリジンサーバーへ透過的に転送されます。return;}// デフォルトではPassthrough方式を使用します。return;}addEventListener('fetch', event => {handleEvent(event);});
ステップ3：エッジ関数のトリガールールの設定とデプロイ
1. 関数の編集が完了したら、作成してデプロイをクリックします。関数のデプロイ後、直接トリガールールを追加をクリックして、この関数のトリガールールを設定できます。
2. 関数のトリガールールで、この関数のトリガー条件を設定します。現在のシナリオ要件に応じて、複数のトリガー条件を設定し、And ロジックでトリガーできます。
ここでは、このリクエストのHOSTが
example.comと等しい場合のみ設定します。リクエストURLが上記の条件をすべて満たすと、ステップ1のエッジ関数がトリガーされ、CDNオリジンサーバーアクセスの2つの方式であるFetchとPassthroughを実現します。
3. OKをクリックすると、トリガールールがすぐに有効になります。
ステップ4：デプロイ効果の検証
Chromeブラウザを例にすると、クライアントがリクエストを開始したとき、エッジノード上のエッジ関数はリクエストのURLパスに基づいて、どのオリジンサーバーアクセス方式を使用するかを決定します：
Fetch方式によるオリジンサーバーアクセス：
Passthrough方式によるオリジンサーバーアクセス：この実践では、リクエストは直接オリジンサーバーへ透過的に転送され、エッジ関数はリクエストまたはレスポンスを変更しません。
詳細を見る
フィードバック