AEM Edge 함수를 사용하여 동적 Edge Delivery Services 블록 빌드

마지막 업데이트: 2026년 8월 13일

적용 대상:
Experience Manager as a Cloud Service

작성 대상:

Intermediate
Developer

IMPORTANT

AEM Edge 함수는 현재 베타 버전입니다. 기능 및 설명서는 변경될 수 있습니다. 피드백을 받으려면 aemcs-edgecompute-feedback@adobe.com에 문의하십시오.

블록이 서드파티 API에서 동적 데이터를 가져오기할 수 있도록 Edge Delivery Services 블록에서 AEM Edge 함수를 호출하는 방법에 대해 알아봅니다.

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 함수 엔드포인트에 연결하는 엔드 투 엔드 플로우를 빌드합니다. 이 엔드투엔드 흐름은 서드파티 API를 호출하고 동적 데이터를 블록에 반환합니다.

데모용으로 Frescopa 사이트 프로젝트가 Edge Delivery Services 사이트로 사용됩니다. AEM Edge 함수를 호출하여 제품 가용성 및 게재 시기를 확인하는 예상 게재 확인 블록을 개발합니다. 블록은 범용 편집기에서 작성되고 AEM Edge 기능 끝점은 별도의 프로젝트에서 개발됩니다. 이 블록은 끝점을 호출하여 두 개의 업스트림 API(이 자습서에서 시뮬레이트됨)를 호출하고 블록에 대한 결합된 응답을 반환합니다.

예상 게재 확인 블록 흐름

자체 Edge Delivery Services 사이트에서 동적 데이터 요구 사항에 대해 동일한 단계를 수행하여 자체 블록 및 AEM Edge 기능 코드를 교체할 수 있습니다.

높은 수준의 단계는 다음과 같습니다.

AEM Edge 함수 개발: 두 개의 업스트림 호출을 하나의 응답으로 결합하는 핸들러를 구현하고 로컬 개발에 대해 CORS를 사용하도록 설정하고 끝점을 로컬로 테스트합니다.
Edge Delivery Services 블록 개발: 블록의 JSON 모델, JavaScript 및 CSS를 스캐폴드하고 유니버설 편집기에서 작성합니다.
블록을 AEM Edge 함수에 연결: 블록에서 AEM Edge 함수의 로컬 끝점을 호출하고 배포되면 상대 경로로 전환하며 로딩 및 오류 상태를 처리합니다.
배포 및 확인: 코드를 병합하고 AEM Edge 함수를 배포하고 Edge Delivery Services 사이트 페이지를 게시하며, 차단이 사이트 도메인에 배포된 끝점에서 라이브 데이터를 렌더링하는지 확인합니다.

사전 요구 사항

이 자습서를 완료하려면 다음을 완료했는지 확인하십시오.

Edge Delivery Services에서 AEM Edge 기능 설정: AEM CLI가 설치되어 있고 AEM Edge 기능 개발을 위해 실행 중인 로컬 개발 서버와 함께 Adobe Edge 기능 프로젝트가 로컬로 복제됩니다.
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 함수 인스턴스로 전달합니다

AEM Edge 기능 인스턴스

aio aem edge-functions serve을(를) 통해 로컬로 실행 중

Adobe CDN에 배포되고 Edge Delivery Services 사이트 범위 지정

업스트림 API 호출

이 자습서에서 시뮬레이션됨

그러나 이 자습서에서 시뮬레이트되었지만 자체 프로젝트에서 실제 API 클라이언트에 대해 교체되었습니다.

CORS 처리

로컬 개발 및 배포된 환경 간의 CORS 처리 차이점을 살펴보겠습니다.

로컬 개발: Edge Delivery Services 로컬 개발 서버는 포트 3000에서 실행되고 AEM Edge 함수의 로컬 개발 서버는 포트 7676에서 실행됩니다. 두 개의 서로 다른 원본 및 포트이므로 AEM Edge 함수는 CORS 헤더를 반환해야 합니다. 그렇지 않으면 브라우저가 응답을 차단합니다.
배포됨: 배포되면 CDN은 사이트와 동일한 도메인에 있는 AEM Edge 함수에 대한 상대 경로를 라우팅하므로 CORS 처리가 필요하지 않습니다.

AEM Edge Function 핸들러에서 CORS 헤더를 구현합니다. 그런 다음 블록의 JavaScript은 환경에 따라 상대 경로나 절대 경로를 선택합니다.

참조 구현

전체 작업 예제는 이 자습서의 모든 단계를 지원합니다. 아래 차이를 사용하여 구현을 확인하거나 각 단계를 따르지 않고 코드로 바로 이동할 수 있습니다.

AEM Edge 함수 변경: 보일러판의 main 분기를 기준으로 경로, 처리기, 업스트림 호출 모크 및 CORS 도우미에 대한 전체 차이입니다.
Edge Delivery Services 블록 변경: Frescopa 사이트의 main 분기와 관련하여 블록의 JSON 모델, JavaScript 및 CSS에 대한 전체 차이입니다.
실시간 미리 보기: AEM Edge 함수가 배포되고 실시간 요청에 응답하면서 Fresccopa 데모 사이트에서 끝까지 실행되는 예상 게재 검사기 블록입니다.

다음 단계

연결할 항목이 있기 전에 Edge Delivery Services 블록에 호출할 끝점이 필요하므로 AEM Edge 함수 개발부터 시작하십시오.

추가 리소스

recommendation-more-help

experience-manager-learn-help-cloud-service