AEM 헤드리스 SPA 배포

마지막 업데이트: 2025년 6월 16일

적용 대상:
Experience Manager as a Cloud Service

주제:

작성 대상:

중간
개발자

AEM Headless SPA(단일 페이지 앱) 배포에는 React 또는 Vue와 같은 프레임워크를 사용하여 빌드된 JavaScript 기반 애플리케이션이 포함되며, Headless 방식으로 AEM의 콘텐츠를 소비하고 상호 작용합니다.

Headless 방식으로 AEM과 상호 작용하는 SPA를 배포하려면 SPA를 호스팅하고 웹 브라우저를 통해 액세스할 수 있도록 해야 합니다.

SPA 호스팅

SPA는 기본 웹 리소스 HTML, CSS 및 JavaScript 의 컬렉션으로 구성됩니다. 이러한 리소스는 build 프로세스(예: npm run build) 중에 생성되며 최종 사용자가 사용할 수 있도록 호스트에 배포됩니다.

조직의 요구 사항에 따라 다양한 호스팅 옵션이 있습니다.

Azure 또는 AWS 와 같은 클라우드 공급자.
회사 데이터 센터 에서 온-프레미스 호스팅
AWS Amplify, Azure App Service, Netlify, Heroku, Vercel 등과 같은 프런트 엔드 호스팅 플랫폼

배포 구성

AEM Headless와 상호 작용하는 SPA를 호스팅할 때 주로 고려해야 할 사항은 SPA가 AEM의 도메인(또는 호스트)을 통해 액세스되는지 또는 다른 도메인에서 액세스되는지 여부입니다. 그 이유는 SPA가 웹 브라우저에서 실행되는 웹 애플리케이션이기 때문에 웹 브라우저 보안 정책의 적용을 받기 때문입니다.

공유 도메인

SPA와 AEM은 동일한 도메인에서 최종 사용자가 둘 다 액세스할 때 도메인을 공유합니다. 예:

AEM은 https://wknd.site/을(를) 통해 액세스됩니다.
SPA는 https://wknd.site/spa을(를) 통해 액세스됩니다.

AEM과 SPA는 동일한 도메인에서 액세스되므로 웹 브라우저를 사용하면 SPA에서 CORS 없이도 AEM Headless 엔드포인트에 대한 XHR을 만들 수 있으며 HTTP 쿠키(예: AEM의 login-token 쿠키)를 공유할 수 있습니다.

SPA 및 AEM 트래픽이 공유 도메인에서 라우팅되는 방법은 여러 원본을 사용하는 CDN, 역방향 프록시가 있는 HTTP 서버, AEM에서 SPA를 직접 호스팅하는 방법 등에 따라 다릅니다.

다음은 AEM과 동일한 도메인에서 호스팅되는 경우 SPA 프로덕션 배포에 필요한 배포 구성입니다.

SPA가 SPA에 →

AEM Author

AEM 게시 인스턴스

AEM 미리보기

Dispatcher 필터

✘

✔

CORS(원본 간 리소스 공유)

✘

AEM 호스트

✘

다른 도메인

SPA와 AEM에는 다른 도메인의 최종 사용자가 액세스할 때 다른 도메인이 있습니다. 예:

AEM은 https://wknd.site/을(를) 통해 액세스됩니다.
SPA는 https://wknd-app.site/을(를) 통해 액세스됩니다.

AEM과 SPA는 서로 다른 도메인에서 액세스하므로 웹 브라우저는 CORS(원본 간 리소스 공유)와 같은 보안 정책을 시행하고 HTTP 쿠키(AEM의 login-token 쿠키 등) 공유를 차단합니다.

다음은 AEM이 아닌 다른 도메인에서 호스팅되는 경우 SPA 프로덕션 배포에 필요한 배포 구성입니다.