PWA Studio을 위한 AEM 확장 시작하기

즉시 사용 가능한 PWA Studio은 GraphQL을 통해 Adobe Commerce과 원활하게 통합되어 혁신적이고 매력적인 상점 및 기타 디지털 경험을 구축할 수 있는 옵션을 무제한으로 제공합니다.

콘텐츠 조각은 GraphQL을 API로 사용하여 다양한 형식(예: JSON, Markdown)으로 Headless 방식으로 소비하고 독립적으로 렌더링할 수 있도록 하는 사전 정의된 구조의 콘텐츠 조각입니다. 컨텐츠 조각에는 GraphQL에서 애플리케이션이 사용 가능한 항목만 요청하고 예상되는 항목을 수신하도록 하는 데 필요한 모든 데이터 유형과 필드가 포함되어 있습니다. 구성 방식 측면에서 제공되는 유연성은 여러 위치 및 여러 채널에서 사용하기에 적합합니다.

Adobe Experience Manager 내의 콘텐츠 조각 모델 편집기를 사용하면 필요한 구조를 쉽게 디자인할 수 있습니다. Adobe Experience Manager 콘텐츠 조각(또는 기타 데이터)을 PWA Studio 애플리케이션과 통합하는 주요 과제는 여러 GraphQL 끝점에서 데이터를 가져오는 것입니다. 이는 기본적으로 PWA Studio이 단일 Adobe Commerce GraphQL 엔드포인트에서 작동하기 때문입니다.

아키텍처

설정 PWA Studio

Adobe Commerce 팔로우 PWA Studio 설명서 PWA Studio 앱을 설정합니다.

AEM의 GraphQL 끝점과 PWA Studio을 연결하려면 PWA Studio을 위한 AEM 확장.

1. 저장소 체크 아웃

2. PWA Studio 애플리케이션에서 확장을 개발 종속성으로 추가합니다.

   yarn add --dev file:{path-to-extension}/extension
   

3. Apollo Link 래퍼를 PWA Studio 애플리케이션에 추가합니다. pwa-root/src/index.js에서 다음 사항을 변경합니다.

     import { linkWrapper } from '@adobe/pwa-studio-aem-cfm-blog-extension';
   
   // ...
   
   <Adapter apiBase={apiBase} apollo={{ link: linkWrapper(apolloLink) }} store={store}>
   

   에서 아폴로 클라이언트 사용자 지정에 대한 자세한 내용을 찾을 수 있습니다. linkWrapper.js.

4. 블로그 항목으로 탐색 구성 요소를 확장하려면 pwa-root/local-intercept.js에 다음 수정 사항을 추가하십시오.

   const addBlogToNavigation = require('@adobe/pwa-studio-aem-cfm-blog-extension/src/addBlogToNavigation');
   
   function localIntercept(targets) {
       addBlogToNavigation(targets);
   }
   

   탐색 구성 요소 맞춤화에 대한 자세한 내용은에서 확인할 수 있습니다. addBlogToNavigation.js 및 확장성 프레임워크 PWA Studio 설명서.

5. Apollo 클라이언트는 AEM GraphQL 종단점을 다음 위치에 예상합니다. <https://pwa-studio/endpoint.js>. 끝점을 이 위치에 매핑하려면 PWA Studio 응용 프로그램의 UPPER 구성을 사용자 정의해야 합니다. a. AEM_CFM_GRAPHQL 변수를 pwa-root/.env에 추가하고 AEM 콘텐츠 조각 GraphQL 엔드포인트를 가리키도록 조정합니다.

   예: AEM_CFM_GRAPHQL=<http://localhost:4503/content/graphql/global>

   b. 상향 구성에 프록시 해결자를 추가합니다. 샘플 상향 구성은 다음과 같습니다.

   response:
     resolver: conditional
     when:
       - matches: request.url.pathname
         pattern: ^/endpoint.json(/|$)
         use: aemProxy
     default: veniaResponse

   aemProxy:
     resolver: proxy
     target: env.AEM_CFM_GRAPHQL
     ignoreSSLErrors: true

   status: response.status
   headers: response.headers
   body: response.body

AEM 설정

AEM 콘텐츠 조각 설명서에 따라 AEM 프로젝트에 대한 GraphQL 엔드포인트를 설정합니다. 또한 AEM 프로젝트에서 다음 구성을 추가하여 PWA Studio 애플리케이션이 GraphQL 엔드포인트에 액세스할 수 있도록 합니다.

• Adobe Granite 원본 간 리소스 공유 정책(com.adobe.granite.cors.impl.CORSPolicyImpl)

  allowedorigin 속성을 PWA 애플리케이션의 전체 호스트 이름으로 설정합니다.

  예: <https://pwa-studio-test-vflyn.local.pwadev:9366>

• Apache Sling Referrer Filter (org.apache.sling.security.impl.ReferrerFilter.cfg.json)

  allow.hosts 속성을 PWA 응용 프로그램의 호스트 이름으로 설정합니다.

  예: pwa-studio-test-vflyn.local.pwadev

두 구성의 전체 예는 여기에서 찾을 수 있습니다. https://github.com/adobe/aem-pwa-studio-extensions/tree/master/aem-cfm-blog-extension/aem/config/src/main/content/jcr_root/apps/blog-demo/config.

GraphQL 엔드포인트를 공개하기 위해 콘텐츠 패키지를 통해 몇 가지 샘플 콘텐츠 조각 모델 및 데이터를 준비했습니다. 이러한 기능은 PWA Studio 확장과 함께 제공된 React 구성 요소와 함께 잘 작동합니다.

사용 방법

이 확장은 PWA Studio 애플리케이션을 AEM과 연결하여 GraphQL을 통해 콘텐츠를 검색하고 렌더링하는 방법의 예제 구현으로 간주됩니다.

사용 사례에 따라 사용자 지정 콘텐츠 조각 모델을 만들어 사용자 지정 GraphQL 스키마를 만들고 이를 자체 React 구성 요소에서 사용할 수 있습니다.

프로덕션 설정은 여러 측면에서 달라질 수 있습니다.

• Apollo 클라이언트를 사용자 지정하는 대신 AEM과 Adobe Commerce GraphQL 데이터를 결합하는 단일 페더레이션 GraphQL 엔드포인트가 있을 수 있습니다.
• PWA Studio 애플리케이션은 상향 버전의 프록시 없이 AEM GraphQL 엔드포인트 URL을 직접 사용할 수 있습니다. 프록시를 다른 레이어(예: CDN)로 이동할 수도 있습니다.
• 가장 적합한 접근 방식은 최종 사용자에게 PWA Studio 애플리케이션을 제공하는 방식에 따라 크게 달라집니다.

이 확장은 두 가지 예와 함께 제공됩니다.

블로그

일부 콘텐츠 조각 모델을 기반으로 블로그 게시물을 표시합니다. 또한 AEM GraphQL 종단점과 함께 작동하도록 Apollo 클라이언트를 구성하는 방법 및 PWA Studio에서 탐색 구성 요소를 확장하는 방법에 대한 예가 포함되어 있습니다. 다음을 참조하십시오 GitHub 을 참조하십시오.

PDP 보강

마케터는 콘텐츠 조각으로 관리되는 추가 콘텐츠로 PDP를 쉽게 보강할 수 있습니다. 다음을 참조하십시오 GitHub 을 참조하십시오.

Business.Adobe.com 리소스