ドキュメント AEM AEM as a Cloud Service のチュートリアル

AEM Edge関数を使用した動的なEdge Delivery Services ブロックの構築

最終更新日： 2026年8月13日

適用対象：
Experience Manager as a Cloud Service

作成対象：

Intermediate
Developer

IMPORTANT

AEM Edge Functionsは現在ベータ版です。機能やドキュメントは変更される可能性があります。フィードバックについては、aemcs-edgecompute-feedback@adobe.comまでお問い合わせください。

Edge Delivery Services ブロックからAEM Edge関数を呼び出して、ブロックがサードパーティ APIから 動的データ を取得できるようにする方法を説明します。

Edge Delivery Servicesはスピードを重視して構築されています。セマンティックなHTMLドキュメントをパブリケーションの一部として生成し、ページ自体にサーバーサイドロジックを適用しません。そのため、ブロックではサードパーティシステムから在庫や価格などの動的データを独自に取得できません。ブラウザーから直接フェッチすることは代替策ですが、ブラウザーには認証に使用するユーザーセッションがない可能性があり、クライアントサイドコードに配置された API トークンはパブリック です。

AEM Edge関数は、この問題を解決します。 Adobe CDNで実行され、資格情報を保持し、ブロックの代わりにサードパーティ APIを呼び出し、ブロックが必要とするデータのみを返します。

論理フローは次のようになります。

Browser (block) → AEM Edge Function (holds credentials) → Third-party API

構築する要素

このチュートリアルでは、Edge Delivery Services ブロックをAEM Edge Function エンドポイントに接続するエンドツーエンドのフローを作成します。このエンドポイントは、サードパーティ APIを呼び出し、ブロックに動的データを返します。

デモ用に、Frescopa Site ProjectがEdge Delivery Services サイトとして使用されています。 AEM Edge関数を呼び出して、製品の空き状況と配信タイミングを確認するEstimated Delivery Checker ブロックを作成します。ブロックはユニバーサルエディターで作成され、AEM Edge関数エンドポイントは別のプロジェクトで開発されます。ブロックはエンドポイントを呼び出し、エンドポイントは2つのアップストリーム API （このチュートリアルでシミュレート）を呼び出し、ブロックに対して結合された応答を返します。

配信チェッカーブロックフローの見積もり

独自のEdge Delivery Services サイトで動的なデータが必要な場合と同じ手順に従い、独自のブロックとAEM Edge関数コードを入れ替えることができます。

大まかな手順は次のとおりです。

AEM Edge関数を開発:2つのアップストリーム呼び出しを1つの応答に組み合わせるハンドラーを実装し、ローカル開発に対してCORSを有効にし、エンドポイントをローカルでテストします。
Edge Delivery Services ブロックを作成: ブロックのJSON モデル、JavaScript、CSSを作成し、ユニバーサルエディターで作成します。
ブロックをAEM Edge関数に接続：ブロックからAEM Edge関数のローカルエンドポイントを呼び出し、デプロイ後に相対パスに切り替え、読み込みとエラーの状態を処理します。
デプロイと検証：コードを結合し、AEM Edge機能をデプロイしてEdge Delivery Services サイトページを公開し、ブロックがデプロイされたエンドポイントからサイトドメインのライブデータをレンダリングすることを確認します。

前提条件

このチュートリアルを完了するには、次の手順を完了していることを確認してください。

Edge Delivery ServicesでAEM Edge Functionsを設定：ローカルで複製されたAEM Edge Functions プロジェクト。Adobe CLIがインストールされ、ローカル開発サーバーがAEM Edge Function開発用に実行されている。
Edge Delivery Servicesとユニバーサルエディターの開発者向けチュートリアル : ブロックの作成とブロックの作成コンセプトの作成、およびEdge Delivery Services サイトブロック開発用に実行されているローカル開発サーバーの作成に関する知識。

NOTE

デモの目的では、サードパーティのAPI呼び出し（カタログ参照と配信見積もり）をシミュレートするため、特定のサードパーティ統合ではなく、ブロックとAEM Edge関数の間の配線に集中できます。

ローカル開発とデプロイ済み

開発する前に、ローカル開発とデプロイ済み環境の違いを理解することが重要です。次の表に、相違点の概要を示します。

項目

ローカル開発

デプロイ済み

Edge Delivery Servicesブロック

ローカルのAEM Edge関数オリジンを直接呼び出します（例：http://127.0.0.1:7676/api/frescopa/estimated-delivery）

相対パス（例：/api/frescopa/estimated-delivery）を呼び出します

ルーティング

直接通話

CDN オリジンセレクター（cdn.yaml）は、AEM Edge Function インスタンスへのパスを転送します

AEM Edge関数インスタンス

aio aem edge-functions serve経由でローカルで実行

Adobe CDNにデプロイされ、Edge Delivery Services サイトにスコープ

アップストリーム API呼び出し

このチュートリアルでシミュレート

このチュートリアルでは、実際のAPI クライアントを自分のプロジェクトに入れ替えてシミュレートしています

CORS処理

ローカル開発とデプロイ済み環境のCORS処理の違いを見てみましょう。

ローカル開発： Edge Delivery Services ローカル開発サーバーはポート 3000で実行され、AEM Edge関数のローカル開発サーバーはポート 7676で実行されます。 2つの異なるオリジンとポートが存在するため、AEM Edge関数はCORS ヘッダーを返す必要があります。そうしないと、ブラウザーが応答をブロックします。
デプロイ済み： デプロイ済みのCDNは、サイトと同じドメインのAEM Edge関数への相対パスをルーティングするので、そこでCORS処理は必要ありません。

AEM Edge関数ハンドラーには、CORS ヘッダーを実装します。次に、ブロックのJavaScriptは、環境に応じて相対パスまたは絶対パスを選択します。

リファレンス実装

このチュートリアルの各ステップを示す完全な実例を示します。以下の差分を使用して、独自の実装をチェックするか、各ステップに従わずに直接コードにジャンプします。

AEM Edge関数の変更：ボイラープレートのmain分岐に対するルート、ハンドラー、アップストリーム呼び出しモック、CORS ヘルパーの完全な差分。
Edge Delivery Services ブロックの変更: Frescopa サイトのmain ブランチに対する、ブロックのJSON モデル、JavaScript、CSSの完全な差分。
ライブプレビュー: AEM Edge機能がデプロイされ、ライブリクエストに回答する、Frescopaのデモサイトでエンドツーエンドで動作しているEstimated Delivery Checker ブロック。

次の手順

AEM Edge関数を開発して開始します。Edge Delivery Services ブロックには、接続先の何かを取得する前に呼び出すエンドポイントが必要です。

その他のリソース

recommendation-more-help

experience-manager-learn-help-cloud-service