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 확장을 사용할 수 있습니다.
-
저장소 체크 아웃
-
PWA Studio 애플리케이션에서 확장을 개발 종속성으로 추가합니다.
yarn add --dev file:{path-to-extension}/extension -
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에서 아폴로 클라이언트 사용자 지정에 대한 자세한 내용을 확인할 수 있습니다.
-
블로그 항목으로 탐색 구성 요소를 확장하려면 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 확장성 프레임워크 문서에서 확인할 수 있습니다.
-
Apollo 클라이언트는
<https://pwa-studio/endpoint.js>에 AEM GraphQL 끝점을 예상합니다. 끝점을 이 위치에 매핑하려면 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 애플리케이션을 제공하는 방식에 따라 크게 달라집니다.
이 확장은 두 가지 예와 함께 제공됩니다.
