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

소프트웨어 배포 포털 > AEM as a Cloud Service(으)로 이동하여 AEM SDK ​의 최신 버전을 다운로드합니다.

다운로드의 압축을 풀고 Quickstart Jar(aem-sdk-quickstart-XXX.jar)를 전용 폴더(예: ~/aem-sdk/author)에 복사합니다.

jar 파일의 이름을 aem-author-p4502.jar(으)로 바꿉니다.

author 이름은 Quickstart jar가 작성자 모드에서 시작되도록 지정합니다. p4502은(는) 포트 4502에서 빠른 시작 실행을 지정합니다.

AEM 인스턴스를 설치하고 시작하려면 jar 파일이 포함된 폴더에서 명령 프롬프트를 열고 다음 명령 를 실행합니다.

$ cd ~/aem-sdk/author
$ java -jar aem-author-p4502.jar

관리자 암호를 admin(으)로 제공하십시오. 모든 관리자 암호를 사용할 수 있지만, 다시 구성할 필요가 없도록 로컬 개발에 admin을(를) 사용하는 것이 좋습니다.

AEM 서비스 설치를 마치면 http://localhost:4502에 새 브라우저 창이 열립니다.

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

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

AEM 시작 메뉴에서 도구 > 배포 > 패키지 ​로 이동합니다.

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

AEM 시작 메뉴에서 Assets > 파일 > WKND 공유 > 영어 > 모험(으)로 이동합니다.

WKND 브랜드에서 추진하는 다양한 모험을 구성하는 모든 에셋의 폴더입니다. 여기에는 이미지 및 비디오와 같은 기존 미디어 유형과 콘텐츠 조각 ​과 같은 AEM 관련 미디어가 포함됩니다.

활강 스키 와이오밍 폴더를 클릭하고 활강 스키 와이오밍 콘텐츠 조각 카드를 클릭합니다.

활강 스키 와이오밍 모험을 위한 콘텐츠 조각 편집기가 열립니다.

제목, 설명, 활동 등 다양한 필드에서 조각을 정의하는지 확인하십시오.

콘텐츠 조각 ​은(는) AEM에서 콘텐츠를 관리할 수 있는 방법 중 하나입니다. 콘텐츠 조각은 텍스트, 리치 텍스트, 날짜 또는 다른 콘텐츠 조각에 대한 참조와 같은 구조화된 데이터 요소로 구성된 재사용 가능한 프레젠테이션 독립적인 콘텐츠입니다. 콘텐츠 조각은 나중에 빠른 설정에서 더 자세히 살펴봅니다.

조각을 닫으려면 취소 ​를 클릭하십시오. 자유롭게 다른 폴더 중 일부로 이동하여 다른 어드벤처 콘텐츠를 살펴보십시오.

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

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

선택한 IDE의 aem-guides-wknd-graphql/react-app에서 React 앱을 엽니다.

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

로컬 AEM SDK에 대해 REACT_APP_HOST_URI점을 확보하십시오. 이 빠른 시작은 편의상 React 앱을 AEM 작성자 ​에 연결합니다. 작성자 서비스에는 인증이 필요하므로 앱은 admin 사용자를 사용하여 연결을 설정합니다. AEM Author에 앱을 연결하는 것은 개발 중에 일반적인 관례입니다. 변경 사항을 게시하지 않고도 콘텐츠를 빠르게 반복할 수 있기 때문입니다.

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

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

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

AEM의 모험 콘텐츠 목록이 표시됩니다.

어드벤처 세부 사항을 보려면 어드벤처 이미지 중 하나를 클릭하십시오. 모험에 대한 세부 정보를 반환하도록 AEM에 요청합니다.

브라우저의 개발자 도구를 사용하여 네트워크 요청을 검사합니다. XHR 요청을 보고 /graphql/execute.json/...에 대한 여러 GET 요청을 확인합니다. 이 경로 접두사는 AEM의 지속 쿼리 끝점을 호출하여 이름 및 접두사 다음의 인코딩된 매개 변수를 사용하여 실행할 지속 쿼리를 선택합니다.

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

Assets > 파일 > WKND 공유 > 영어 > 모험 > Bali Surf Camp(으)로 이동합니다.

Bali Surf Camp 콘텐츠 조각을 클릭하여 콘텐츠 조각 편집기를 엽니다.

모험의 제목 및 설명 ​을 수정합니다.

변경 내용을 저장하려면 저장 ​을 클릭하세요.

변경 내용을 보려면 http://localhost:3000에서 React 앱을 새로 고치십시오.

도구 > 일반 > GraphQL 쿼리 편집기 ​로 이동하여 GraphiQL을(를) 엽니다.

왼쪽에서 기존 지속 쿼리를 선택하고 실행하여 결과를 확인합니다.