ブロックをAEM Edge関数に接続します
目標は、AEM Edge関数を呼び出してサードパーティ APIから動的データを取得する動的なEdge Delivery Services ブロックを ビルド することです。
3つ目の手順は、Edge Delivery Services ブロックを作成で基礎モード化したEdge Delivery Services ブロックを、AEM Edge関数を作成で作成したAEM Edge関数に接続することです。 これは、2つのプロジェクトを結びつけるステップです。 2つの異なるポートで両方のローカル開発サーバーを並べて実行し、ブロックのJavaScriptが実行中の場所に応じて適切に呼び出されるようにします。
両方のローカル開発サーバーの実行
Edge Delivery Services サイトプロジェクトでは、次の操作を行います。
$ aem up
これはhttp://localhost:3000にサイトを提供します。
AEM Edge Functions プロジェクトで、2番目のターミナルで次の操作を行います。
$ aio aem edge-functions serve
これは、http://127.0.0.1:7676のエンドポイントにサービスを提供します。
フェッチ呼び出しを接続する
estimated-delivery.jsに以下を追加し、Edge Delivery Services ブロックの開発の基礎と一緒に追加します。
環境に適したURLの選択
Edge Delivery Services ブロックは、実行中の場所に応じて異なるURLを呼び出します。
http://127.0.0.1:7676/api/frescopa/estimated-delivery/api/frescopa/estimated-delivery (相対)ブラウザーが報告するホスト名からローカル開発を検出し、結果をキャッシュして、すべてのリクエストがチェックを繰り返さないようにします。
// blocks/estimated-delivery/estimated-delivery.js
const API_PATH = '/api/frescopa/estimated-delivery';
const LOCAL_EDGE_FUNCTION_ORIGIN = 'http://127.0.0.1:7676';
let cachedApiUrl;
function isLocalDev() {
const { hostname } = window.location;
return hostname === 'localhost' || hostname === '127.0.0.1';
}
function getEstimatedDeliveryApiUrl() {
if (cachedApiUrl) return cachedApiUrl;
// Local: site (aem up) on :3000, Edge Function on :7676 — call it directly.
// Production: relative path, routed to Edge Function via CDN origin selector.
cachedApiUrl = isLocalDev()
? `${LOCAL_EDGE_FUNCTION_ORIGIN}${API_PATH}`
: API_PATH;
return cachedApiUrl;
}
これは、Edge Delivery Services ブロック内の唯一の環境固有のロジックです。 他のすべて、フェッチ呼び出し、応答処理、レンダリングは、パスが同じであるため、両方の環境で同じように機能します。オリジンのみが変更されます。
localhost:3000 ~ 127.0.0.1:7676)を通過するので、AEM Edge関数に追加したCORS ヘッダーに依存します。AEM Edge関数を開発。 これがないと、ブラウザーは応答をブロックし、フェッチ呼び出しは汎用ネットワークエラーをスローします。AEM Edge関数の呼び出し
// blocks/estimated-delivery/estimated-delivery.js
async function fetchEstimatedDelivery(sku, postcode, signal) {
const params = new URLSearchParams({ sku, postcode });
const response = await fetch(`${getEstimatedDeliveryApiUrl()}?${params.toString()}`, {
signal,
cache: 'no-store',
});
const body = await response.json().catch(() => ({}));
if (!response.ok) {
const apiMessage = body.message || body.error;
const err = new Error(apiMessage || 'Unable to check estimated delivery right now.');
err.code = body.code;
throw err;
}
return body;
}
err.codeはから同じcode フィールドを取り込み、API コントラクト (MISSING_POSTCODE、UNKNOWN_SKU)を定義します。これにより、呼び出し元は分岐できます。 Edge Delivery Services ブロックにはmessageのみが表示されます。 cache: 'no-store'は、ブラウザーがパーソナライズされた応答をキャッシュしないようにします。 CDN独自のキャッシュ動作は、API エンドポイントの構築で説明されているcdn.yamlのskipCacheによって個別に制御されます。
送信ハンドラーを接続する
Edge Delivery Services ブロックの作成のフォームマークアップの後、decorate()内でこれを追加します。 これがコアパターンです。実行中のリクエストをキャンセルし、読み込みを表示し、関数を呼び出して、結果をsetStateにルーティングします。
// blocks/estimated-delivery/estimated-delivery.js
form.addEventListener('submit', async (event) => {
event.preventDefault();
// ...extract and validate sku/postcode from the form, omitted here...
activeRequest?.abort();
const controller = new AbortController();
activeRequest = controller;
setState({ loading: true });
try {
const data = await fetchEstimatedDelivery(sku, postcode, controller.signal);
setState({ data });
} catch (err) {
if (err.name === 'AbortError') return;
setState({ error: formatError(err) });
}
});
setStateはrenderResult()をラップし、読み込み、エラー、成功マークアップを切り替えます。 スローされたエラーがformatError()を通じてルーティングされ、ネットワークエラー(AEM Edge関数に到達できないため、ローカル開発サーバーが実行されていないか、CDN ルートがまだデプロイされていない)と、AEM Edge関数が目的で返したビジネスエラー(例:不明なSKU)が区別されます。 フルハンドラーは、関数を呼び出す前にクライアントサイドのポストコードサーバーを検証し、リクエストの実行中に送信ボタンを無効にします。 estimated-delivery.jsの完全なリスナー、renderResult()およびformatError()を参照してください。
フルループをローカルでテストする
両方の開発サーバーが実行されている状態で、http://localhost:3000/dev/branches/estimated-deliveryで作成したページを開いてフォームを送信し、結果がAEM Edge関数のアップストリーム呼び出しのデータを含むステータス色のカードとしてレンダリングされることを確認します。
次に、他の2つの状態を確認します。
-
ポストコードフィールドが空の状態で送信します。 Edge Delivery Services ブロックは、ネットワーク呼び出しを行わずに「Postcode required」と表示され、クライアントサイドのチェックが
fetchEstimatedDelivery()より前に実行されていることを確認する必要があります。 -
aio aem edge-functions serveを停止して、もう一度送信します。 Edge Delivery Services ブロックには、ローカルのnetwork-failure ヒントが表示され、formatError()がlocal-dev ブランチを選択したことを確認します。
これらのいずれかのブラウザーコンソールを開きます。 リクエストが予期せず失敗した場合は、最初にCORS エラー(AEM Edge関数の修正)または接続エラー(AEM Edge関数の開発サーバーが実行されていない)かどうかを確認します。
次の手順
デプロイと検証では、両方のプロジェクトをデプロイし、同じフローがローカルだけでなく、開発サイトに対しても機能することを確認します。