빠른 설정

이 장에서는 AEM GraphQL API를 사용하여 외부 애플리케이션이 AEM에서 컨텐츠를 소비하는 것을 볼 수 있는 로컬 환경의 빠른 설정을 제공합니다. 자습서의 이후 장은 이 설정에서 시작됩니다.

전제 조건

다음 도구는 로컬에 설치해야 합니다.

목표

  1. AEM SDK를 다운로드하여 설치합니다.
  2. WKND 참조 사이트에서 샘플 컨텐츠를 다운로드하여 설치합니다.
  3. GraphQL API를 사용하여 컨텐츠를 소비할 샘플 앱을 다운로드하여 설치합니다.

AEM SDK 설치

이 자습서에서는 AEM as a Cloud Service SDK AEM GraphQL API를 탐색합니다. 이 섹션에서는 AEM SDK를 설치하고 작성자 모드에서 실행하는 빠른 안내서를 제공합니다. 로컬 개발 환경 설정에 대한 자세한 안내서 여기에서 찾을 수 있습니다..

노트

또한 AEM as a Cloud Service 환경에서 자습서를 따를 수도 있습니다. 클라우드 환경 사용에 대한 추가 참고 사항은 자습서 전체에서 포함되어 있습니다.

  1. 로 이동합니다 소프트웨어 배포 포털 > AEM as a Cloud Service 최신 버전의 AEM SDK.

    소프트웨어 배포 포털

    주의

    GraphQL 기능은 2021-02-04 이상의 AEM SDK에서만 기본적으로 활성화됩니다.

  2. 다운로드 압축을 풀고 Quickstart jar 를 복사합니다(aem-sdk-quickstart-XXX.jar) 를 전용 폴더, 즉 ~/aem-sdk/author.

  3. jar 파일의 이름을 로 다시 지정합니다. aem-author-p4502.jar.

    다음 author name: Quickstart jar가 작성자 모드에서 시작되도록 지정합니다. 다음 p4502 quickstart 서버가 포트 4502에서 실행되도록 지정합니다.

  4. 새 터미널 창을 열고 jar 파일이 포함된 폴더로 이동합니다. 다음 명령을 실행하여 AEM 인스턴스를 설치하고 시작합니다.

    $ cd ~/aem-sdk/author
    $ java -jar aem-author-p4502.jar
    
  5. 다음과 같이 관리자 암호를 제공합니다. admin. 모든 관리자 암호는 사용할 수 있지만 admin 를 사용하도록 선택할 수 있습니다.

  6. 몇 분 후에 AEM 인스턴스가 설치를 완료하고 새 브라우저 창이 다음에 열립니다. http://localhost:4502.

  7. 사용자 이름으로 로그인합니다. admin 및 AEM 초기 시작 중에 선택한 암호(일반적으로 admin).

샘플 컨텐츠 및 GraphQL 엔드포인트 설치

의 샘플 컨텐츠 WKND 참조 사이트 이 설치되어 자습서를 가속화합니다. WKND는 가상 라이프스타일 브랜드이며, 종종 AEM 교육과 함께 사용됩니다.

WKND 참조 사이트에는 GraphQL 끝점. 실제 구현에서는 다음의 문서화된 단계를 따릅니다. GraphQL 엔드포인트 포함 고객 프로젝트에서 확인하십시오. A CORS 는 WKND 사이트의 일부로 패키지화되어 있습니다. 외부 응용 프로그램에 대한 액세스 권한을 부여하려면 CORS 구성이 필요합니다. 자세한 내용은 CORS 은 아래에서 찾을 수 있습니다.

  1. WKND Site용 최신 컴파일된 AEM 패키지를 다운로드합니다. aem-guides-wknd.all-x.x.zip.

    노트

    AEM as a Cloud Service 및 과 호환되는 표준 버전을 다운로드하십시오 not a classic 버전.

  2. 에서 AEM 시작 메뉴 탐색 도구 > 배포 > 패키지.

    패키지로 이동

  3. 클릭 패키지 업로드 이전 단계에서 다운로드한 WKND 패키지를 선택합니다. 클릭 설치 를 클릭하여 패키지를 설치합니다.

  4. 에서 AEM 시작 메뉴 탐색 자산 > 파일.

  5. 폴더를 클릭하여 이동합니다. WKND 사이트 > 영어 > 모험.

    모험의 폴더 보기

    WKND 브랜드로 승격된 다양한 모험들을 구성하는 모든 자산의 폴더입니다. 여기에는 이미지 및 비디오와 같은 기존 미디어 유형과 AEM과 같은 특정 미디어가 포함됩니다 컨텐츠 조각.

  6. 을(를) 클릭하여 다운 스키 와이오밍 폴더를 클릭하고 다운 스키 와이오밍 콘텐츠 조각 카드:

    스키 콘텐츠 조각 카드 다운로드

  7. 콘텐츠 조각 편집기 UI가 다운 스키 와이오밍 어드벤처에 대해 열립니다.

    활강 스키 콘텐츠 조각

    다음과 같은 다양한 필드를 관찰합니다 제목, 설명, 및 활동 조각을 정의합니다.

    컨텐츠 조각 는 AEM에서 컨텐츠를 관리할 수 있는 방법 중 하나입니다. 컨텐츠 조각은 텍스트, 리치 텍스트, 날짜 또는 다른 컨텐츠 조각에 대한 참조와 같은 구조화된 데이터 요소로 구성된 재사용 가능한 프레젠테이션에 관계 없는 컨텐츠입니다. 컨텐츠 조각은 튜토리얼의 후반부에 보다 자세히 탐색을 할 수 있습니다.

  8. 클릭 취소 조각을 닫습니다. 다른 폴더 중 일부를 자유롭게 탐색하고 다른 Adventure 컨텐츠를 탐색합니다.

노트

Cloud Service 환경을 사용하는 경우 방법에 대한 설명서를 참조하십시오. WKND 참조 사이트와 같은 코드 베이스를 Cloud Service 환경에 배포.

샘플 앱 설치

이 자습서의 목표 중 하나는 GraphQL API를 사용하여 외부 애플리케이션에서 AEM 컨텐츠를 사용하는 방법을 보여주는 것입니다. 이 자습서에서는 부분적으로 완료된 React 앱 예제를 사용하여 자습서를 가속화합니다. iOS, Android 또는 기타 플랫폼으로 빌드된 앱에 동일한 단원과 개념이 적용됩니다. React 앱은 불필요한 복잡성을 방지하기 위해 의도적으로 간단합니다. 참조 구현이 아닙니다.

  1. Git을 사용하여 새 터미널 창 및 복제 자습서 시작 분기 를 엽니다.

    $ git clone --branch tutorial/react git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. 선택한 IDE에서 파일을 엽니다 .env.development at aem-guides-wknd-graphql/react-app/.env.development. 다음 사항을 확인합니다. REACT_APP_AUTHORIZATION 줄이 주석 처리되지 않고 파일의 모양은 다음과 같습니다.

    REACT_APP_HOST_URI=http://localhost:4502
    REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
    # Use Authorization when connecting to an AEM Author environment
    REACT_APP_AUTHORIZATION=admin:admin
    

    확인 React_APP_HOST_URI 로컬 AEM 인스턴스와 일치합니다. 이 장에서는 React 앱을 AEM에 직접 연결합니다 작성자 환경. 작성자 기본적으로 환경에는 인증이 필요하므로 앱이 admin 사용자. 이 방법은 AEM 환경을 빠르게 변경하고 앱에 즉시 반영되는 것을 볼 수 있으므로 개발 중 일반적인 방법입니다.

    노트

    프로덕션 시나리오에서는 앱이 AEM에 연결됩니다 게시 환경. 자세한 내용은 프로덕션 배포 제2장.

  3. 로 이동합니다. aem-guides-wknd-graphql/react-app 폴더를 입력합니다. 앱을 설치하고 시작합니다.

    $ cd aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  4. 새 브라우저 창에서 다음 위치에서 앱을 자동으로 실행해야 합니다. http://localhost:3000.

    React 스타터 앱

    AEM의 현재 Adventure 컨텐츠 목록이 표시됩니다.

  5. 모험 이미지 중 하나를 클릭하여 모험 세부 사항을 확인합니다. AEM에 모험에 대한 세부 사항을 반환해 달라는 요청이 있습니다.

    Adventure Details 보기

  6. 브라우저의 개발자 도구를 사용하여 네트워크 요청. 보기 XHR 에 대한 여러 POST 요청을 요청하고 관찰합니다. /content/graphql/global/endpoint.json: AEM용으로 구성된 GraphQL 종단점입니다.

    GraphQL 끝점 XHR 요청

  7. 네트워크 요청을 검사하여 매개 변수와 JSON 응답을 볼 수도 있습니다. 과 같은 브라우저 확장을 설치하는 것이 도움이 될 수 있습니다. GraphQL 네트워크 관리자 Chrome이 쿼리 및 응답을 더 잘 이해할 수 있도록 해줍니다.

컨텐츠 조각 수정

React 앱이 실행 중이니 AEM에서 콘텐츠를 업데이트하고 앱에 반영된 변경 사항을 확인합니다.

  1. AEM으로 이동합니다. http://localhost:4502.

  2. 다음으로 이동 자산 > 파일 > WKND 사이트 > 영어 > 모험 > 발리 서프 캠프.

    발리 서프 캠프 폴더

  3. 을(를) 클릭하여 발리 서프 캠프 컨텐츠 조각을 사용하여 컨텐츠 조각 편집기를 엽니다.

  4. 수정 제목 그리고 설명 모험의

    컨텐츠 조각 수정

  5. 클릭 저장 변경 사항을 저장하려면 을 클릭합니다.

  6. 의 React 앱으로 돌아갑니다. http://localhost:3000 를 새로 고쳐 변경 사항을 확인합니다.

    업데이트된 발리 서핑 캠프 어드벤처

GraphiQL 도구 설치

GraphiQL 는 개발 도구이며 개발 또는 로컬 인스턴스와 같은 하위 수준 환경에서만 필요합니다. GraphiQL IDE를 사용하면 반환된 쿼리 및 데이터를 빠르게 테스트하고 세분화할 수 있습니다. GraphiQL도 설명서에 쉽게 액세스할 수 있으므로 사용 가능한 방법을 쉽게 파악하고 이해할 수 있습니다.

  1. 로 이동합니다 소프트웨어 배포 포털 > AEM as a Cloud Service.

  2. "GraphiQL"을 검색합니다(를). i in GraphiQL.

  3. 최신 다운로드 GraphiQL 컨텐츠 패키지 v.x.x.x

    GraphiQL 패키지 다운로드

    zip 파일은 직접 설치할 수 있는 AEM 패키지입니다.

  4. 에서 AEM 시작 메뉴 탐색 도구 > 배포 > 패키지.

  5. 클릭 패키지 업로드 이전 단계에서 다운로드한 패키지를 선택합니다. 클릭 설치 를 클릭하여 패키지를 설치합니다.

    GraphiQL 패키지 설치

  6. GraphiQL IDE로 이동합니다. http://localhost:4502/content/graphiql.html GraphQL API 탐색을 시작합니다.

    노트

    GraphiQL 도구 및 GraphQL API는 다음과 같습니다 튜토리얼의 후반부에 더 자세히 살펴보십시오.

축하합니다!

축하합니다. 이제 GraphQL에서 AEM 컨텐츠를 사용하는 외부 애플리케이션이 있습니다. 언제든지 React 앱에서 코드를 검사하고 기존 컨텐츠 조각 수정을 계속 실험할 수 있습니다.

다음 단계

다음 장에서 컨텐츠 조각 모델 정의를 사용하여 컨텐츠를 모델링하고 스키마를 구축하는 방법을 알아봅니다. 컨텐츠 조각 모델. 기존 모델을 검토하고 새 모델을 만듭니다. 또한 모델의 일부로 스키마를 정의하는 데 사용할 수 있는 다양한 데이터 유형에 대해서도 학습합니다.

(보너스) CORS 구성

AEM은 기본적으로 보안을 유지하여 교차 도메인 요청을 차단하므로 허가되지 않은 응용 프로그램이 해당 내용에 연결되어 표시되지 않습니다.

이 자습서의 React 앱이 AEM GraphQL API 끝점과 상호 작용할 수 있도록 WKND 사이트 참조 프로젝트에 원본 간 리소스 공유 구성이 정의되어 있습니다.

원본 간 리소스 공유 구성

배포된 구성을 보려면

  1. 에서 AEM SDK의 웹 콘솔로 이동합니다. http://localhost:4502/system/console.

    노트

    웹 콘솔은 SDK에서만 사용할 수 있습니다. AEM as a Cloud Service 환경에서는 개발자 콘솔.

  2. 상단 메뉴에서 OSGI > 구성 모든 것을 OSGi 구성.

  3. 페이지를 아래로 스크롤합니다. Granite CORS(원본 간 리소스 공유) Adobe.

  4. 다음에 대한 구성을 클릭합니다. com.adobe.granite.cors.impl.CORSPolicyImpl~wknd-graphql.

  5. 다음 필드가 업데이트되었습니다.

    • 허용된 원본(Regex): http://localhost:.*
      • 모든 로컬 호스트 연결을 허용합니다.
    • 허용되는 경로: /content/graphql/global/endpoint.json
      • 현재 구성된 유일한 GraphQL 엔드포인트입니다. CORS 구성은 가능한 한 제한적이어야 합니다.
    • 허용되는 메서드: GET, HEAD, POST
      • 전용 POST 는 GraphQL에 필요하지만 다른 방법은 헤드리스 방식으로 AEM과 상호 작용할 때 유용할 수 있습니다.
    • 지원되는 헤더: 권한 작성자 환경에서 기본 인증을 전달하도록 이 추가되었습니다.
    • 자격 증명 지원: Yes
      • React 앱이 AEM 작성자 서비스에서 보호된 GraphQL 종료 포인트와 통신하므로 필요합니다.

이 구성 및 GraphQL 종단점은 AEM WKND 프로젝트의 일부입니다. 모든 OSGi 구성은 여기에서.

이 페이지에서는