ブロックをAEM Edge関数に接続します

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

目標は、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を呼び出します。

環境
ブロック呼び出しのURL
理由
ローカル開発
http://127.0.0.1:7676/api/frescopa/estimated-delivery
Edge Delivery Services ブロックとAEM Edge関数は、2つの異なるポート上の2つの個別のローカルサーバーです
デプロイ済み
/api/frescopa/estimated-delivery (相対)
CDN オリジン セレクターは、このパスをサイトの独自のドメインのAEM Edge関数にルーティングします

ブラウザーが報告するホスト名からローカル開発を検出し、結果をキャッシュして、すべてのリクエストがチェックを繰り返さないようにします。

// 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 ブロック内の唯一の環境固有のロジックです。 他のすべて、フェッチ呼び出し、応答処理、レンダリングは、パスが同じであるため、両方の環境で同じように機能します。オリジンのみが変更されます。

NOTE
ローカル開発呼び出しはオリジン (localhost:3000127.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_POSTCODEUNKNOWN_SKU)を定義します。これにより、呼び出し元は分岐できます。 Edge Delivery Services ブロックにはmessageのみが表示されます。 cache: 'no-store'は、ブラウザーがパーソナライズされた応答をキャッシュしないようにします。 CDN独自のキャッシュ動作は、API エンドポイントの構築で説明されているcdn.yamlskipCacheによって個別に制御されます。

送信ハンドラーを接続する

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) });
  }
});

setStaterenderResult()をラップし、読み込み、エラー、成功マークアップを切り替えます。 スローされたエラーが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 ブランチを選択したことを確認します。

    ​ ローカルのEdge関数を停止した後の配信ネットワーク障害のヒントを推定

これらのいずれかのブラウザーコンソールを開きます。 リクエストが予期せず失敗した場合は、最初にCORS エラー(AEM Edge関数の修正)または接続エラー(AEM Edge関数の開発サーバーが実行されていない)かどうかを確認します。

次の手順

​ デプロイと検証では、両方のプロジェクトをデプロイし、同じフローがローカルだけでなく、開発サイトに対しても機能することを確認します。

その他のリソース

recommendation-more-help
experience-manager-learn-help-cloud-service