AEM Headless 빠른 설정은 WKND Site 샘플 프로젝트 및 AEM Headless GraphQL API에 대한 콘텐츠를 사용하는 샘플 React 앱(SPA)의 콘텐츠를 사용하여 AEM Headless를 실습해 볼 수 있도록 합니다.
이 빠른 설정을 수행하려면 다음이 필요합니다.
먼저 WKND 사이트를 배포하는 데 사용되는 Cloud Manager Git 저장소를 생성합니다. WKND Site 는 빠른 설정의 React 앱에서 사용하는 컨텐츠(컨텐츠 조각) 및 GraphQL AEM 엔드포인트가 포함된 샘플 AEM 웹 사이트 프로젝트입니다.
단계 스크린캐스트
aem-headless-quick-setup-wknd
Cloud Manager Git 저장소가 생성되면 GitHub에서 WKND 사이트 프로젝트의 소스 코드를 복제하여 Cloud Manager Git 저장소로 푸시합니다. 이제 Cloud Manager를 사용하여 WKND 사이트 프로젝트에 액세스하고 AEM as a Cloud Service 환경에 배포합니다.
단계 스크린캐스트
명령줄에서 GitHub에서 샘플 WKND 사이트 프로젝트의 소스 코드를 복제합니다
$ mkdir -p ~/Code
$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd.git
Cloud Manager Git 저장소를 원격으로 추가
선택 저장소 위쪽 탐색
선택 저장소 정보 액세스 맨 위의 작업 표시줄에서
다음에서 명령 실행 찾음: 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 사이트 프로젝트의 콘텐츠로 as a Cloud Service 부트스트랩된 AEM을 사용하여 AEM Headless GraphQL API에 대해 WKND 사이트의 콘텐츠를 사용하는 샘플 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 Publish 서비스의 호스트 URI를 찾으려면 다음을 수행합니다.
IDE에서 변경 내용을 .env.development
명령줄에서 React 앱을 실행합니다
$ cd ~/Code/aem-guides-wknd-graphql/react-app
$ npm install
$ npm start
로컬에서 실행되는 React 앱은에서 시작합니다. http://localhost:3000 및 에는 AEM Headless의 GraphQL API를 사용하여 AEM as a Cloud Service에서 가져온 모험 목록이 표시됩니다.
AEM Headless GraphQL API의 콘텐츠에 연결하고 콘텐츠를 사용하는 샘플 WKND React 앱을 사용하여 AEM Author 서비스에서 콘텐츠를 작성하고 React 앱의 경험이 함께 어떻게 업데이트되는지 확인합니다.
단계 스크린캐스트
AEM as a Cloud Service Author 서비스에 로그인
다음으로 이동 Assets > 파일 > 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 Author 서비스에서 동일한 접근 방식 사용:
새로운 콘텐츠 조각을 만들고 게시하거나 기존 콘텐츠 조각의 게시를 취소하는 데 익숙하지 않은 경우 위의 스크린캐스트를 시청하십시오.
축하합니다! AEM Headless를 사용하여 React 앱을 구동했습니다!
React 앱이 AEM as a Cloud Service의 콘텐츠를 어떻게 사용하는지 자세히 알아보려면 을 확인하십시오 AEM Headless 자습서. 자습서에서는 AEM의 콘텐츠 조각을 만드는 방법과 이 React 앱이 해당 콘텐츠를 JSON으로 사용하는 방법을 살펴봅니다.