설명서

AEM 글로벌 머리글 및 바닥글을 React 앱에 통합

Last update: Thu Aug 07 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Adobe Experience Manager(AEM) 글로벌 머리글 및 바닥글을 React 애플리케이션에 통합하면 스타일 및 기능 문제가 발생할 수 있습니다. 특히 경험 조각(XF)을 사용할 때 기본 AEM 설정은 React 단일 페이지 애플리케이션(SPA)을 즉시 지원하지 않습니다. 이 문제를 해결하려면 올바른 HTML 조각을 가져오고 경로 문제를 방지하기 위해 Dispatcher 규칙을 구성합니다.

설명 description

환경

  • 제품: Adobe Experience Manager(AEM) as a Cloud Service - 사이트
  • 인스턴스: 개발

문제/증상

  • URL 포함 구성 요소는 비디오 링크만 지원하고 페이지 URL 포함은 허용하지 않습니다.
  • 머리글 및 바닥글 콘텐츠를 JSON으로 제공하는 경우(예: model.json) 기능 문제가 발생합니다. AEM 기반 클래스가 제대로 작동하지 않으며 검색 및 번역과 같은 기능이 작동하지 않습니다.
  • 기존 AEM 아키텍처는 템플릿 및 구성 요소에 대한 SPA React 구현을 지원하지 않는 headful(구성 요소/sightly)입니다.

해결 방법 resolution

기본 스타일과 기능을 유지하면서 AEM 전역 머리글과 바닥글을 React 애플리케이션에 통합하려면 다음 단계를 수행합니다.

  1. .head.nocloudconfig.html 및 .body.nocloudconfig.html 선택기를 사용하여 XF(경험 조각)의 HTML을 가져옵니다. 이러한 선택기는 클라우드 구성 데이터를 제거하여 HTML을 외부 앱과 호환되도록 합니다.

  2. web server rewrite rules을(를) 확인하세요. 경험 조각 URL 앞에 잘못된 경로를 추가하지 않도록 하십시오. 예를 들어 /content/<my_project>/content/experience-fragments/...과(와) 같은 경로가 404 오류를 방지하도록 올바르게 구성되었는지 확인하십시오.

  3. 경험 조각 액세스에 문제가 발생하는 경우:

    • AEM 로그에서 경로 관련 오류 또는 변경 사항을 검토하십시오.
    • Dispatcher 규칙을 업데이트하여 경험 조각 경로에 불필요한 접두사 추가를 중단합니다.

관련 읽기

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f