AEM Headless SPA 배포

Last update: Wed Oct 09 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

주제:

작성 대상:

중간
개발자

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을 만들고 AEM의 login-token 쿠키와 같은 HTTP 쿠키를 공유할 수 있습니다.

SPA 및 AEM 트래픽이 공유 도메인에서 라우팅되는 방법은 여러 출처가 있는 CDN, 역방향 프록시가 있는 HTTP 서버, SPAAEM 에서 직접 호스팅 등입니다.

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

SPA이 Analytics에 →

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 프로덕션 배포에 필요한 배포 구성입니다.