AEM Edge 기능에 블록 연결

목표는 서드파티 API에서 동적 데이터를 가져오기 위해 AEM Edge 함수를 호출하는 동적 Edge Delivery Services 블록을 빌드하는 것입니다.

세 번째 단계는 Edge Delivery Services 블록 개발에서 스캐폴딩한 Edge Delivery Services 블록을 AEM Edge 기능 개발에서 빌드한 AEM Edge 기능에 연결하는 것입니다. 두 프로젝트를 함께 연결하는 단계입니다. 두 개의 서로 다른 포트에서 두 로컬 개발 서버를 나란히 실행하고 블록의 JavaScript이 실행 위치에 따라 올바른 개발 서버를 호출하도록 합니다.

두 로컬 개발 서버 실행

Edge Delivery Services 사이트 프로젝트에서

$ aem up

http://localhost:3000에 사이트가 제공됩니다.

AEM Edge 기능 프로젝트의 두 번째 터미널에서 다음을 수행합니다.

$ aio aem edge-functions serve

http://127.0.0.1:7676에서 끝점을 제공합니다.

가져오기 호출 연결

Edge Delivery Services 블록 개발의 스캐폴드와 함께 estimated-delivery.js에 다음을 추가하십시오.

환경에 적합한 URL 선택

Edge Delivery Services 블록은 실행 중인 위치에 따라 다른 URL을 호출합니다.

브라우저가 보고하는 호스트 이름에서 로컬 개발 을 감지하고 모든 요청이 검사를 반복하지 않도록 결과를 캐시합니다.

// 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 블록에서 유일한 환경별 논리입니다. 경로가 동일하기 때문에 가져오기 호출, 응답 처리, 렌더링 등 다른 모든 것은 두 환경에서 동일하게 작동합니다. 경로만 변경됩니다.

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은(는) API 계약 정의(MISSING_POSTCODE, UNKNOWN_SKU)에서 동일한 code 필드를 전달하므로 호출자가 분기할 수 있습니다. 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()을(를) 래핑하여 로드, 오류 및 성공 마크업 사이를 전환합니다. 네트워크 오류(AEM Edge 함수에 연결할 수 없어 로컬 개발 서버가 실행되고 있지 않거나 CDN 경로가 아직 배포되지 않음)와 AEM Edge 함수가 의도적으로 반환한 비즈니스 오류(예: 알 수 없는 SKU)를 구분하는 formatError()을(를) 통해 오류가 발생했습니다. 또한 전체 처리기는 함수를 호출하기 전에 포스트코드 클라이언트측의 유효성을 검사하고 요청이 전송되는 동안 제출 단추를 비활성화합니다. estimated-delivery.js에서 전체 수신기 renderResult() 및 formatError()을(를) 참조하십시오.

로컬에서 전체 루프 테스트

두 개발 서버가 모두 실행 중인 상태에서 http://localhost:3000/dev/branches/estimated-delivery에서 작성한 페이지를 열고 양식을 제출하고 결과 렌더링이 AEM Edge 함수의 업스트림 호출에서 얻은 데이터를 사용하여 상태 색상이 있는 카드로 렌더링되는지 확인하십시오.

그런 다음 다른 두 상태를 확인합니다.

브라우저 콘솔을 열어 다음 중 하나를 수행하십시오. 요청이 예기치 않게 실패하는 경우 먼저 CORS 오류(AEM Edge 기능에서 수정)인지 연결 오류(AEM Edge 기능의 개발 서버가 실행되고 있지 않음)인지 확인합니다.

다음 단계

배포 및 확인에서 두 프로젝트를 배포하고 로컬이 아닌 개발 사이트에 대해 동일한 흐름이 작동하는지 확인합니다.

추가 리소스