AEM as a Cloud Service용 AEM Headless 빠른 설정

https://my.cloudmanager.adobe.com(으)로 이동

이 빠른 설정에 사용할 AEM as a Cloud Service 환경이 포함된 Cloud Manager 프로그램 ​을(를) 선택하십시오

WKND 사이트 프로젝트에 대한 Git 저장소 만들기

1. 위쪽 탐색에서 저장소 선택
2. 맨 위의 작업 표시줄에서 저장소 추가 ​를 선택합니다.
3. 새 Git 저장소 이름 지정: aem-headless-quick-setup-wknd
   • Git 저장소 이름은 Adobe 조직별로 고유해야 하며
4. 저장 ​을 선택하고 Git 저장소가 초기화될 때까지 기다립니다.

명령줄에서 GitHub에서 샘플 WKND 사이트 프로젝트의 소스 코드를 복제합니다

$ mkdir -p ~/Code
$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd.git

Cloud Manager Git 저장소를 원격으로 추가

1. 위쪽 탐색에서 저장소 선택

2. 상단 작업 표시줄에서 저장소 정보 액세스 선택

3. 명령줄에서 Git 저장소에 원격 장치 추가 ​에 있는 실행 명령

   code language-shell
   $ 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의 저장소 정보 양식에서 사용자 이름 및 암호 ​을(를) 제공하세요.

새 Git 저장소에 비프로덕션 배포 파이프라인 ​을 첨부합니다.

1. 위쪽 탐색에서 파이프라인 선택

2. 상단 작업 표시줄에서 파이프라인 추가 ​를 선택합니다.

3. 구성 탭에서

   1. 파이프라인 배포 옵션 선택
   2. 비프로덕션 파이프라인 이름 ​을(를) Dev Deployment pipeline(으)로 설정
   3. 배포 트리거 > Git 변경 시 선택
   4. 중요한 지표 오류 동작 > 즉시 계속 ​을 선택합니다.
   5. 계속 선택

4. Source 코드 탭에서

   1. 전체 스택 코드 옵션 선택
   2. 적합한 배포 환경 선택 상자에서 AEM as a Cloud Service 개발 환경 ​을 선택합니다.
   3. 저장소 선택 상자에서 aem-headless-quick-setup-wknd 선택
   4. Git 분기 선택 상자에서 main 선택
   5. 저장 선택

개발 배포 파이프라인 실행

1. 위쪽 탐색에서 개요 선택
2. 파이프라인 섹션에서 새로 만든 개발 배포 파이프라인 ​을(를) 찾습니다
3. 파이프라인 항목 오른쪽에 있는 … ​을(를) 선택하십시오.
4. 실행 ​을 선택하고 모달에서 확인합니다.
5. 현재 실행 중인 파이프라인의 오른쪽에 있는 … ​을(를) 선택하십시오.
6. 세부 정보 보기 선택

파이프라인 실행의 세부 정보에서 완료될 때까지 진행률을 모니터링합니다. 파이프라인 실행은 30~40분 정도 소요됩니다.

명령줄에서 GitHub에서 React 앱의 소스 코드를 복제합니다.

$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git

IDE에서 ~/Code/aem-guides-wknd-graphql/react-app 폴더를 엽니다.

IDE에서 .env.development 파일을 엽니다.

REACT_APP_HOST_URI 속성에서 AEM as a Cloud Service Publish 서비스의 호스트 URI를 가리킵니다.

REACT_APP_HOST_URI=https://publish-pXXXX-eYYYY.adobeaemcloud.com
...

AEM as a Cloud Service Publish 서비스의 호스트 URI를 찾으려면 다음을 수행하십시오.

1. Cloud Manager의 위쪽 탐색에서 환경 ​을 선택합니다.
2. 개발 환경 선택
3. Publish 서비스(AEM 및 Dispatcher) 링크 환경 세그먼트 테이블을 찾습니다.
4. 링크의 주소를 복사하여 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 as a Cloud Service Author 서비스에 로그인

Assets > 파일 > WKND 공유 > 영어 > 모험으로 이동합니다

Cycling Southern Utah 폴더 열기

Cycling Southern Utah 콘텐츠 조각을 선택하고 맨 위의 작업 표시줄에서 편집 ​을 선택합니다.

콘텐츠 조각의 일부 필드를 업데이트합니다. 예:

• 제목: Cycling Utah's National Parks
• 이동 길이: 6 Days
• 어려움: Intermediate
• 가격: 3500
• 기본 이미지: /content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg

상단 작업 표시줄에서 저장 선택

상단 작업 표시줄의 에서 ​빠른 Publish 을(를) 선택합니다…

http://localhost:3000에서 실행 중인 React 앱을 새로 고치십시오.

React 앱에서 지금 업데이트된 사이클링 어드벤처를 선택하고 콘텐츠 조각에 대한 콘텐츠 변경 사항을 확인합니다.

AEM Author 서비스에서 동일한 접근 방식을 사용합니다.

1. 기존 어드벤처 콘텐츠 조각의 게시를 취소하고 React 앱 경험에서 제거되었는지 확인합니다.
2. 새 Adventure 콘텐츠 조각을 만들어 게시하고 React 앱 경험에 표시되는지 확인합니다.