기본적으로 PWA Studio은 GraphQL을 통해 Adobe Commerce과 원활하게 통합되며 혁신적이고 매력적인 상점 및 기타 디지털 경험을 생성하는 무제한 옵션을 제공합니다.
컨텐츠 조각 은 GraphQL을 다른 형식(예: JSON, Markdown)으로 API로 사용하고 독립적으로 렌더링되는 방식으로 헤드리스 방식으로 사용할 수 있도록 미리 정의된 구조를 갖는 컨텐츠 조각입니다. 컨텐츠 조각에는 GraphQL에서 필요한 모든 데이터 유형과 필드가 포함되어 있으므로 애플리케이션에서 사용 가능한 항목만 요청하고 예상대로 수신됩니다. 구조화 방식에 따라 유연하게 제공되므로 여러 위치 및 여러 채널에서 사용할 수 있습니다.
Adobe Experience Manager 내의 컨텐츠 조각 모델 편집기를 사용하면 필요한 구조를 쉽게 디자인할 수 있습니다. Adobe Experience Manager 컨텐츠 조각(또는 기타 데이터)과 PWA Studio 애플리케이션을 통합해야 하는 주요 문제는 여러 GraphQL 종단점에서 데이터를 가져오는 것입니다. 이는 PWA Studio이 단일 Adobe Commerce GraphQL 종단점에서 작동하기 때문입니다.
Adobe Commerce 팔로우 PWA Studio 설명서 PWA Studio 앱을 설정하려면 다음을 수행하십시오.
PWA Studio을 AEM의 GraphQL 종단점과 연결하려면 PWA Studio용 AEM 확장.
리포지토리 체크 아웃
PWA Studio 애플리케이션에서 확장을 개발 종속성으로 추가합니다.
yarn add --dev file:{path-to-extension}/extension
PWA Studio 애플리케이션에 Apollo Link 래퍼를 추가합니다. pwa-root/src/index.js에서 다음 사항을 변경합니다.
import { linkWrapper } from '@adobe/pwa-studio-aem-cfm-blog-extension';
// ...
<Adapter apiBase={apiBase} apollo={{ link: linkWrapper(apolloLink) }} store={store}>
Apollo Client 사용자 지정에 대한 자세한 내용은 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 클라이언트는 AEM GraphQL 종단점을 <https://pwa-studio/endpoint.js>
. 끝점을 이 위치에 매핑하려면 PWA Studio 애플리케이션의 위쪽 구성을 사용자 지정해야 합니다. a. AEM_CFM_GRAPHQL 변수를 pwa-root/.env에 추가하고 AEM 컨텐츠 조각 GraphQL 엔드포인트를 가리키도록 조정합니다.
예: AEM_CFM_GRAPHQL=<http://localhost:4503/content/graphql/global>
나. 프록시 확인자를 위쪽 구성에 추가합니다. 다음은 샘플 상향 구성입니다.
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 프로젝트에 대한 GraphQL 엔드포인트를 설정합니다. 또한 AEM 프로젝트에서 다음 구성을 추가하여 PWA Studio 응용 프로그램이 GraphQL 종단점에 액세스할 수 있도록 합니다.
Adobe Granite CORS(원본 간 리소스 공유 정책)(com.adobe.granite.cors.impl.CORSPolicyImpl)
할당된 원본 속성을 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 구성 요소와 잘 작동합니다.
이 확장은 AEM과 PWA Studio 애플리케이션을 연결하여 GraphQL을 통해 컨텐츠를 검색하고 렌더링하는 방법의 예제 구현으로 간주됩니다.
사용 사례에 따라 고유한 사용자 지정 컨텐츠 조각 모델을 만들어 사용자 지정 GraphQL 스키마를 생성할 수 있으며 이러한 스키마는 사용자 고유의 React 구성 요소에서 사용할 수 있습니다.
프로덕션 설정은 여러 측면에서 다를 수 있습니다.
이 확장은 두 가지 예와 함께 제공됩니다.
일부 컨텐츠 조각 모델을 기반으로 블로그 게시물을 표시합니다. 또한 AEM GraphQL 종단점에서 작동하도록 Apollo 클라이언트를 구성하는 방법 및 PWA Studio에서 탐색 구성 요소를 확장하는 방법에 대한 예를 포함합니다. 자세한 내용은 GitHub 자세한 내용
컨텐츠 조각으로 관리되는 추가 컨텐츠로 PDP를 쉽게 보강할 수 있습니다. 자세한 내용은 GitHub 자세한 내용