AEM 헤드리스 빠른 설정을 사용하면 WKND 사이트 샘플 프로젝트의 컨텐츠를 사용하여 AEM 헤드리스와 AEM Headless GraphQL API에서 컨텐츠를 사용하는 샘플 React 앱(SPA)을 직접 사용할 수 있습니다.
이 빠른 설정을 수행하려면 다음 사항이 필요합니다.
먼저 WKND 사이트를 배포하는 데 사용되는 Cloud Manager Git 리포지토리를 만듭니다. WKND 사이트는 컨텐츠(컨텐츠 조각)와 빠른 설정의 React 앱에서 사용하는 GraphQL AEM 종단점이 포함된 샘플 AEM 웹 사이트 프로젝트입니다.
단계 화면
aem-headless-quick-setup-wknd
만든 Cloud Manager Git 리포지토리를 사용하여 GitHub에서 WKND Site 프로젝트의 소스 코드를 복제하고 Cloud Manager Git 리포지토리에 푸시합니다. 이제 Cloud Manager가 WKND 사이트 프로젝트에 액세스하고 AEM as a Cloud Service 환경에 배포할 수 있습니다.
단계 화면
명령줄에서 GitHub에서 샘플 WKND Site 프로젝트의 소스 코드를 복제합니다
$ mkdir -p ~/Code
$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd.git
Cloud Manager Git 리포지토리를 원격으로 추가
선택 저장소 위쪽 탐색에서
선택 보고서 정보에 액세스 맨 위 작업 표시줄에서
에 있는 Execute 명령 Git 리포지토리에 원격 추가 명령줄에서
$ cd aem-guides-wknd
$ git remote add adobe https://git.cloudmanager.adobe.com/<YOUR ADOBE ORGANIZATION>/aem-headless-quick-setup-wknd/
샘플 프로젝트의 소스 코드를 로컬 Git 리포지토리의 Cloud Manager Git 리포지토리에 푸시합니다
$ git push adobe main:main
자격 증명을 입력하라는 메시지가 표시되면 사용자 이름 및 암호 Cloud Manager의 저장소 정보 모달.
WKND 사이트 프로젝트가 Cloud Manager Git 리포지토리에 푸시되어 Cloud Manager 파이프라인을 사용하여 AEM as a Cloud Service에 배포할 수 없습니다.
WKND 사이트 프로젝트는 AEM Headless GraphQL API에서 React 앱이 사용하는 샘플 컨텐츠를 제공합니다.
단계 화면
Dev Deployment pipeline
aem-headless-quick-setup-wknd
에서 저장소 선택 상자main
에서 Git 분기 선택 상자WKND Site 프로젝트의 컨텐츠와 AEM as a Cloud Service으로 부트된 상태로 AEM Headless GraphQL API를 통해 WKND Site의 컨텐츠를 사용하는 샘플 WKND React 앱을 다운로드하여 시작합니다.
단계 화면
명령줄에서 GitHub에서 React 앱의 소스 코드를 복제합니다.
$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
폴더를 엽니다. ~/Code/aem-guides-wknd-graphql/react-app
IDE에서
IDE에서 파일을 엽니다 .env.development
.
AEM as a Cloud Service을 가리킵니다. 게시 서비스의 호스트 URI를 REACT_APP_HOST_URI
속성을 사용합니다.
REACT_APP_HOST_URI=https://publish-pXXXX-eYYYY.adobeaemcloud.com
...
AEM as a Cloud Service 게시 서비스의 호스트 URI를 찾으려면 다음을 수행하십시오.
IDE에서 변경 내용을 .env.development
명령줄에서 React 앱을 실행합니다
$ cd ~/Code/aem-guides-wknd-graphql/react-app
$ npm install
$ npm start
로컬에서 실행되는 React App이 다음으로 시작됩니다 http://localhost:3000 및 는 AEM 헤드리스 GraphQL API를 사용하여 AEM as a Cloud Service에서 가져온 모험 목록을 표시합니다.
AEM Headless GraphQL API에서 컨텐츠에 연결하고 소비하는 샘플 WKND React 앱과 함께 AEM Author 서비스의 컨텐츠를 작성하고 React 앱의 경험이 함께 어떻게 업데이트되는지 확인하십시오.
단계 화면
AEM as a Cloud Service 작성자 서비스에 로그인합니다.
다음으로 이동 자산 > 파일 > WKND 공유 > 영어 > 모험
를 엽니다. 서던 유타 사이클 폴더
을(를) 선택합니다 서던 유타 사이클 컨텐츠 조각 을 선택하고 을 선택합니다 편집 맨 위 작업 표시줄에서
컨텐츠 조각의 일부 필드를 업데이트합니다(예: ).
Cycling Utah's National Parks
6 Days
Intermediate
3500
/content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg
선택 저장 상단 작업 모음에서
선택 빠른 게시 상단 작업 표시줄의 …
실행 중인 React 앱 새로 고침 http://localhost:3000.
React 앱에서, 이제 업데이트된 사이클링 모험을 선택하고 컨텐츠 조각에 수행된 컨텐츠 변경 사항을 확인합니다.
AEM 작성자 서비스에서 동일한 방법 사용:
새 컨텐츠 조각 만들기 및 게시 또는 기존 컨텐츠 조각 게시 취소에 익숙하지 않다면 위의 스크린에서 확인하십시오.
축하합니다! AEM Headless를 사용하여 React 앱을 작동했습니다!
React 앱에서 AEM as a Cloud Service의 컨텐츠를 사용하는 방법을 자세히 이해하려면 다음을 확인하십시오 AEM Headless 자습서. 이 자습서에서는 생성된 AEM의 컨텐츠 조각과 이 React App이 컨텐츠를 JSON으로 사용하는 방법을 설명합니다.