AEMas a Cloud Service 용 AEM Headless 빠른 설정

AEM Headless 빠른 설정은 WKND Site 샘플 프로젝트 및 AEM Headless GraphQL API에 대한 콘텐츠를 사용하는 샘플 React 앱(SPA)의 콘텐츠를 사용하여 AEM Headless를 실습해 볼 수 있도록 합니다.

사전 요구 사항

이 빠른 설정을 수행하려면 다음이 필요합니다.

  • AEM as a Cloud Service 샌드박스 환경(개발 권장)
  • AEM as a Cloud Service 및 Cloud Manager 액세스
    • AEM 관리자 AEM as a Cloud Service 액세스
    • Cloud Manager - 배포 관리자 cloud Manager 액세스
  • 다음 도구를 로컬에 설치해야 합니다.

1. Cloud Manager Git 저장소 만들기

먼저 WKND 사이트를 배포하는 데 사용되는 Cloud Manager Git 저장소를 생성합니다. WKND Site 는 빠른 설정의 React 앱에서 사용하는 컨텐츠(컨텐츠 조각) 및 GraphQL AEM 엔드포인트가 포함된 샘플 AEM 웹 사이트 프로젝트입니다.

단계 스크린캐스트

  1. 다음으로 이동 https://my.cloudmanager.adobe.com
  2. Cloud Manager 선택 프로그램 이 빠른 설정에 사용할 AEM as a Cloud Service 환경이 포함된 경우
  3. WKND 사이트 프로젝트에 대한 Git 저장소 만들기
    1. 선택 저장소 위쪽 탐색
    2. 선택 저장소 추가 맨 위의 작업 표시줄에서
    3. 새 Git 저장소에 이름을 지정합니다. aem-headless-quick-setup-wknd
      • Git 저장소 이름은 Adobe 조직별로 고유해야 하며
    4. 선택 저장​및 Git 저장소가 초기화될 때까지 대기

2. 샘플 WKND 사이트 프로젝트를 Cloud Manager Git 저장소에 푸시

Cloud Manager Git 저장소가 생성되면 GitHub에서 WKND 사이트 프로젝트의 소스 코드를 복제하여 Cloud Manager Git 저장소로 푸시합니다. 이제 Cloud Manager를 사용하여 WKND 사이트 프로젝트에 액세스하고 AEM as a Cloud Service 환경에 배포합니다.

단계 스크린캐스트

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

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

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

    1. 선택 저장소 위쪽 탐색

    2. 선택 저장소 정보 액세스 맨 위의 작업 표시줄에서

    3. 다음에서 명령 실행 찾음: Git 저장소에 원격 장치 추가 명령줄에서

      $ cd aem-guides-wknd
$ git remote add adobe https://git.cloudmanager.adobe.com/<YOUR ADOBE ORGANIZATION>/aem-headless-quick-setup-wknd/

  3. 로컬 Git 저장소에서 Cloud Manager Git 저장소로 샘플 프로젝트의 소스 코드 푸시

    $ git push adobe main:main

    자격 증명을 입력하라는 메시지가 뜨면 사용자 이름 및 암호 Cloud Manager의 저장소 정보 모달

AEM 3. WKND 사이트를 as a Cloud Service으로 배포

WKND 사이트 프로젝트가 Cloud Manager Git 저장소로 푸시되면 Cloud Manager 파이프라인을 사용하여 AEM에 as a Cloud Service으로 배포할 수 없습니다.

WKND 사이트 프로젝트는 AEM Headless GraphQL API에 대해 React 앱이 사용하는 샘플 콘텐츠를 제공합니다.

단계 스크린캐스트

  1. 첨부 비프로덕션 배포 파이프라인 새 Git 저장소로
    1. 선택 파이프라인 위쪽 탐색
    2. 선택 파이프라인 추가 맨 위의 작업 표시줄에서
    3. 다음에서 구성 탭
      1. 선택 배포 파이프라인 옵션
      2. 설정 비프로덕션 파이프라인 이름 끝 Dev Deployment pipeline
      3. 선택 배포 트리거 > Git 변경 시
      4. 선택 중요한 지표 장애 비헤이비어 > 즉시 계속
      5. 선택 계속
    4. 소스 코드 탭에서
      1. 선택 전체 스택 코드 옵션
      2. 다음 항목 선택 AEM as a Cloud Service 개발 환경 다음에서 적합한 배포 환경 선택 상자
      3. 선택 aem-headless-quick-setup-wknd 다음에서 저장소 선택 상자
      4. 선택 main 다음에서 Git 분기 선택 상자
      5. 저장​을 선택합니다
  2. 실행 개발 배포 파이프라인
    1. 선택 개요 위쪽 탐색
    2. 새로 생성된 를 찾습니다. 개발 배포 파이프라인 다음에서 파이프라인 섹션
    3. 다음 항목 선택 … 파이프라인 항목 오른쪽
    4. 선택 실행​및 를 클릭하고 모달에서 확인합니다
    5. 다음 항목 선택 … 현재 실행 중인 파이프라인 오른쪽에
    6. 선택 세부 정보 보기
  3. 파이프라인 실행의 세부 정보에서 완료될 때까지 진행률을 모니터링합니다. 파이프라인 실행은 30~40분 정도 소요됩니다.

4. WKND React 앱 다운로드 및 실행

WKND 사이트 프로젝트의 콘텐츠로 as a Cloud Service 부트스트랩된 AEM을 사용하여 AEM Headless GraphQL API에 대해 WKND 사이트의 콘텐츠를 사용하는 샘플 WKND React 앱을 다운로드하여 시작합니다.

단계 스크린캐스트

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

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

  2. 폴더 열기 ~/Code/aem-guides-wknd-graphql/react-app IDE에서.

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

  4. 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를 찾으려면 다음을 수행합니다.

    1. Cloud Manager에서 환경 위쪽 탐색
    2. 선택 개발 환경
    3. 를 찾습니다. 게시 서비스(AEM 및 Dispatcher) 링크 환경 세그먼트 표
    4. 링크의 주소를 복사하여 AEM as a Cloud Service Publish 서비스의 URI로 사용합니다

  5. IDE에서 변경 내용을 .env.development

  6. 명령줄에서 React 앱을 실행합니다

    $ cd ~/Code/aem-guides-wknd-graphql/react-app
$ npm install
$ npm start

  7. 로컬에서 실행되는 React 앱은에서 시작합니다. http://localhost:3000 및 에는 AEM Headless의 GraphQL API를 사용하여 AEM as a Cloud Service에서 가져온 모험 목록이 표시됩니다.

5. AEM에서 컨텐츠 편집

AEM Headless GraphQL API의 콘텐츠에 연결하고 콘텐츠를 사용하는 샘플 WKND React 앱을 사용하여 AEM Author 서비스에서 콘텐츠를 작성하고 React 앱의 경험이 함께 어떻게 업데이트되는지 확인합니다.

단계 스크린캐스트

  1. AEM as a Cloud Service Author 서비스에 로그인

  2. 다음으로 이동 Assets > 파일 > WKND 공유 > 영어 > 모험

  3. 를 엽니다. 유타 남부 자전거 경기 폴더

  4. 다음 항목 선택 유타 남부 자전거 경기 컨텐츠 조각 및 선택 편집 맨 위의 작업 표시줄에서

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

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

  6. 선택 저장 맨 위의 작업 표시줄에서

  7. 선택 빠른 게시 맨 위의 작업 표시줄에서 …

  8. 실행 중인 React 앱 새로 고침 http://localhost:3000.

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

  10. AEM Author 서비스에서 동일한 접근 방식 사용:

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

    새로운 콘텐츠 조각을 만들고 게시하거나 기존 콘텐츠 조각의 게시를 취소하는 데 익숙하지 않은 경우 위의 스크린캐스트를 시청하십시오.

축하합니다!

축하합니다! AEM Headless를 사용하여 React 앱을 구동했습니다!

React 앱이 AEM as a Cloud Service의 콘텐츠를 어떻게 사용하는지 자세히 알아보려면 을 확인하십시오 AEM Headless 자습서. 자습서에서는 AEM의 콘텐츠 조각을 만드는 방법과 이 React 앱이 해당 콘텐츠를 JSON으로 사용하는 방법을 살펴봅니다.

다음 단계

이 페이지에서는