모니터링 워크플로우

이 장에서는 Adobe Experience Manager 사이트의 테마 소스를 업데이트하여 브랜드별 스타일을 적용합니다. 라이브 사이트에 대해 코드를 지정할 때 프록시 서버를 사용하여 CSS 및 Javascript 업데이트 미리 보기를 보는 방법을 알아봅니다. 또한 이 자습서에서는 Adobe Cloud Manager의 프런트 엔드 파이프라인을 사용하여 AEM 사이트에 테마 업데이트를 배포하는 방법을 다룹니다.

마지막에 WKND 브랜드에 일치하는 스타일을 포함하도록 사이트가 업데이트됩니다.

사전 요구 사항

이 내용은 여러 부분으로 구성된 자습서이며 페이지 템플릿 장이 완료되었습니다.

목표

  1. 사이트의 테마 소스를 다운로드하여 수정하는 방법을 알아봅니다.
  2. 실시간 미리 보기를 위해 라이브 사이트에 대해 코드가 실행되는 방법을 알아봅니다.
  3. Cloud Manager의 프런트 엔드 파이프라인을 사용하여 컴파일된 CSS 및 JavaScript 업데이트를 테마의 일부로 전달하는 종단 간 워크플로우를 이해합니다.

테마 업데이트

다음으로, 사이트가 WKND 브랜드의 모양과 느낌과 일치하도록 테마 소스를 변경합니다.

비디오에 대한 높은 수준 단계:

  1. 프록시 개발 서버에서 사용할 AEM에서 로컬 사용자를 생성합니다.
  2. AEM에서 테마 소스를 다운로드하고 VSCode와 같은 로컬 IDE를 사용하여 엽니다.
  3. 테마 소스를 수정하고 프록시 개발 서버를 사용하여 CSS 및 JavaScript 변경 사항을 실시간으로 미리 봅니다.
  4. 잡지 문서가 WKND 브랜드 스타일과 모집단 매트릭스와 일치하도록 테마 소스를 업데이트합니다.

솔루션 파일

에 대한 완성된 스타일을 다운로드합니다. WKND 샘플 테마

프런트엔드 파이프라인을 사용하여 테마 배포

Cloud Manager의 프런트 엔드 파이프라인을 사용하여 AEM 환경에 테마에 대한 업데이트를 배포합니다.

비디오에 대한 높은 수준 단계:

  1. 새 Git 만들기 Cloud Manager의 저장소

  2. 테마 소스 프로젝트를 Cloud Manager git 저장소에 추가합니다.

    $ cd <PATH_TO_THEME_SOURCES_FOLDER>
$ git init -b main
$ git add .
$ git commit -m "initial commit"
$ git remote add origin <CLOUD_MANAGER_GIT_REPOSITORY_URL>

  3. 구성 프런트엔드 파이프라인 ( Cloud Manager 를 사용하여 프런트 엔드 코드를 배포합니다.)

  4. 프런트 엔드 파이프라인을 실행하여 타겟 AEM 환경에 업데이트를 배포합니다.

보고서 예

참조로 사용할 수 있는 두 가지 GitHub 보고서 예는 다음과 같습니다.

축하합니다!

축하합니다. 이제 테마를 AEM에 업데이트하고 배포했습니다.

다음 단계

를 사용하여 사이트를 제작하여 AEM 개발에 대해 자세히 알아보고 기본 기술을 더 많이 이해합니다 AEM 프로젝트 원형.

이 페이지에서는