로컬 AEM SDK를 사용한 AEM Headless 빠른 설정

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

사전 요구 사항

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

1. AEM SDK 설치

이 설정에서는 AEM AS A CLOUD SERVICE SDK AEM GraphQL API를 살펴보십시오. 이 섹션에서는 AEM SDK를 설치하고 작성자 모드에서 실행하는 방법에 대한 빠른 안내서를 제공합니다. 로컬 개발 환경 설정에 대한 자세한 안내서 은(는) 여기에서 찾을 수 있음.

노트

또한 다음을 사용하여 자습서를 따를 수 있습니다. AEM as a Cloud Service 환경. Cloud 환경 사용에 대한 추가 참고가 자습서 전체에 포함되어 있습니다.

다음 위치로 이동 소프트웨어 배포 포털 > AEM as a Cloud Service 최신 버전의 를 다운로드합니다. AEM SDK.
다운로드의 압축을 풀고 Quickstart jar 를 복사합니다(aem-sdk-quickstart-XXX.jar) 전용 폴더로, 즉 ~/aem-sdk/author.
jar 파일 이름을 로 변경합니다. aem-author-p4502.jar.

다음 author name 은 작성자 모드에서 Quickstart jar가 시작되도록 지정합니다. 다음 p4502 포트 4502에서 빠른 시작 실행을 지정합니다.
AEM 인스턴스를 설치하고 시작하려면 jar 파일이 포함된 폴더에서 명령 프롬프트를 열고 다음 명령 를 실행합니다.
```
$ cd ~/aem-sdk/author
$ java -jar aem-author-p4502.jar
```
관리자 암호 입력 admin. 모든 관리자 암호는 허용되지만 을 사용하는 것이 좋습니다. admin 로컬 개발을 통해 재구성의 필요성을 줄일 수 있습니다.
AEM 서비스 설치가 완료되면 새 브라우저 창이에서 열립니다 http://localhost:4502.
사용자 이름으로 로그인 admin 및 AEM 초기 시작 중에 선택한 암호(일반적으로 admin).

2. 샘플 콘텐츠 설치

샘플 콘텐츠 WKND 참조 사이트 은 자습서를 가속화하는 데 사용됩니다. WKND는 AEM 트레이닝과 함께 자주 사용되는 가상의 라이프스타일 브랜드입니다.

WKND 사이트에는 GraphQL 엔드포인트. 실제 구현에서는 다음과 같은 문서화된 단계를 수행합니다. GraphQL 엔드포인트 포함 고객 프로젝트에서. A CORS 는 또한 WKND Site의 일부로 패키지화되어 있습니다. 외부 애플리케이션에 대한 액세스 권한을 부여하려면 CORS 구성이 필요합니다. 자세한 내용 CORS 은 아래에 있습니다.

WKND 사이트용 컴파일된 최신 AEM 패키지 다운로드: aem-guides-wknd.all-x.x.x.zip.

노트

AEM as a Cloud Service 및 와 호환되는 표준 버전을 다운로드해야 합니다. 아님 다음 classic 버전.
다음에서 AEM 시작 메뉴, 다음으로 이동 도구 > 배포 > 패키지.
클릭 패키지 업로드 이전 단계에서 다운로드한 WKND 패키지를 선택합니다. 설치를 클릭하여 패키지를 설치합니다.
다음에서 AEM 시작 메뉴, 다음으로 이동 에셋 > 파일 > WKND 공유 > 영어 > 모험.

WKND 브랜드에서 추진하는 다양한 모험을 구성하는 모든 에셋의 폴더입니다. 여기에는 이미지 및 비디오와 같은 기존 미디어 유형 및 AEM과 유사한 특정 미디어가 포함됩니다 컨텐츠 조각.
을(를) 클릭하여 다운힐 스키 와이오밍 폴더를 클릭하고 활강 스키 와이오밍 콘텐츠 조각 카드:
활강 스키 와이오밍 모험을 위한 콘텐츠 조각 편집기가 열립니다.

다양한 필드가 다음과 같음을 관찰하십시오. 제목, 설명, 및 활동 조각을 정의합니다.

컨텐츠 조각 는 AEM에서 컨텐츠를 관리할 수 있는 방법 중 하나입니다. 콘텐츠 조각은 텍스트, 리치 텍스트, 날짜 또는 다른 콘텐츠 조각에 대한 참조와 같은 구조화된 데이터 요소로 구성된 재사용 가능한 프레젠테이션 독립적인 콘텐츠입니다. 콘텐츠 조각은 나중에 빠른 설정에서 더 자세히 살펴봅니다.
클릭 취소 을 눌러 조각을 닫습니다. 자유롭게 다른 폴더 중 일부로 이동하여 다른 어드벤처 콘텐츠를 살펴보십시오.

노트

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

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

이 자습서의 목표 중 하나는 GraphQL API를 사용하여 외부 애플리케이션에서 AEM 콘텐츠를 사용하는 방법을 보여 주는 것입니다. 이 자습서에서는 React 앱 예제를 사용합니다. React 앱은 AEM GraphQL API와의 통합에 초점을 맞추기 위해 의도적으로 간단합니다.

새 명령 프롬프트를 열고 GitHub에서 샘플 React 앱을 복제합니다.

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

에서 React 앱 열기 aem-guides-wknd-graphql/react-app 원하는 IDE에서.
IDE에서 파일을 엽니다. .env.development 위치: /.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 SDK를 가리킵니다. 편의를 위해 이 빠른 시작은 React 앱을 와 연결합니다. AEM 작성자. 작성자 서비스에는 인증이 필요하므로 앱은 admin 연결을 설정할 사용자입니다. AEM 작성자에 앱을 연결하는 것은 개발 중에 일반적인 방법인데, 이는 변경 사항을 게시하지 않고도 콘텐츠를 빠르게 반복할 수 있기 때문입니다.

노트

프로덕션 시나리오에서는 앱이 AEM에 연결됩니다. 게시 환경. 이에 대해서는 다음에서 자세히 설명합니다. 프로덕션 배포 섹션.

React 앱을 설치하고 시작합니다.

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

새 브라우저 창에서 앱이 자동으로 열립니다. http://localhost:3000.

AEM의 모험 콘텐츠 목록이 표시됩니다.
어드벤처 세부 사항을 보려면 어드벤처 이미지 중 하나를 클릭하십시오. 모험에 대한 세부 정보를 반환하도록 AEM에 요청합니다.
브라우저의 개발자 도구를 사용하여 네트워크 요청. 보기 XHR 에 대한 여러 GET 요청을 요청하고 관찰합니다. /graphql/execute.json/.... 이 경로 접두사는 AEM 지속 쿼리 끝점을 호출하여 이름 및 접두사 다음의 인코딩된 매개 변수를 사용하여 실행할 지속 쿼리를 선택합니다.