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

이 장에서는 Adobe Cloud Manager에서 프런트엔드 파이프라인을 만들고 실행합니다. 이 파일은 ui.frontend 모듈 및 에서는 두 플러그인을 AEM as a Cloud Service의 기본 CDN에 배포합니다. 따라서 /etc.clientlibs 프런트엔드 리소스 제공 기반.

목표

  • 프런트엔드 파이프라인을 생성하고 실행합니다.
  • 프런트 엔드 리소스에서 제공되지 않았는지 확인합니다. /etc.clientlibs 하지만 새 호스트 이름에서 https://static-

프런트엔드 파이프라인 사용

사전 요구 사항

이 내용은 여러 부분으로 구성된 자습서이며 표준 AEM 프로젝트 업데이트 을(를) 완료했습니다.

다음을 확인하십시오 Cloud Manager에서 파이프라인을 생성하고 배포할 권한 및 AEM as a Cloud Service 환경 액세스.

기존 파이프라인 이름 바꾸기

기존 파이프라인의 이름을 개발에 배포 to 개발에 전체 스택 WKND 배포 다음과 같이 구성 탭 비프로덕션 파이프라인 이름 필드. 파이프라인의 이름만 보고 전체 스택인지 아니면 프런트 엔드인지를 명확하게 하기 위한 것입니다.

파이프라인 이름 변경

또한 소스 코드 탭에서 Repository 및 Git Branch 필드 값이 올바른지 확인하고 분기에 프런트 엔드 파이프라인 계약 변경 사항이 있는지 확인합니다.

소스 코드 구성 파이프라인

프런트엔드 파이프라인 만들기

종료 전용 에서 프런트엔드 리소스 구축 및 배포 ui.frontend 모듈에서 다음 단계를 수행합니다.

  1. Cloud Manager UI의 파이프라인 섹션을 클릭합니다. 추가 단추를 누른 다음 비프로덕션 파이프라인 추가 또는 프로덕션 파이프라인 추가)을 배포할 AEM as a Cloud Service 환경을 기반으로 합니다.

  2. 에서 비프로덕션 파이프라인 추가 대화 상자의 일부로 구성 단계, 배포 파이프라인 옵션, 이름을 개발에 프런트 엔드 WKND 배포​를 클릭하고 계속

프런트 엔드 파이프라인 구성 만들기

  1. 의 일부로 소스 코드 단계, 프런트 엔드 코드 옵션을 선택하고 적합한 배포 환경. 에서 소스 코드 섹션에서 리포지토리 및 Git 분기 필드 값이 올바르고 분기에 프런트 엔드 파이프라인 계약 변경 사항이 있는지 확인합니다.
    및 가장 중요하 대상 코드 위치 필드: /ui.frontend 마지막으로 저장.

프런트 엔드 파이프라인 소스 코드 만들기

배포 시퀀스

  • 먼저 새로 이름을 바꾼 개발에 전체 스택 WKND 배포 AEM 저장소에서 WKND clientlib 파일을 제거하는 파이프라인입니다. 그리고 가장 중요한 것은, Sling 구성 파일(SiteConfig, HtmlPageItemsConfig).

스타일이 지정되지 않은 WKND 사이트

경고

이후, 개발에 전체 스택 WKND 배포 파이프라인 완료 스타일이 지정되지 않음 WKND Site가 손상되었을 수 있습니다. 단 한 번의 전체 스택 파이프라인에서 프런트 엔드 파이프라인으로 첫 번째 스위치 동안 계획해야 하는 일회성 중단입니다.

  • 마지막으로 개발에 프런트 엔드 WKND 배포 파이프라인만 빌드 ui.frontend 프런트엔드 리소스를 CDN에 직접 모듈 및 배포합니다.
중요

이 경우 스타일이 지정되지 않음 WKND 사이트가 정상으로 돌아왔고 이번에는 프런트엔드 파이프라인 실행이 전체 스택 파이프라인보다 훨씬 빠릅니다.

스타일 변경 및 새 게재 패러다임을 확인합니다

  • WKND Site의 모든 페이지를 열면 텍스트 색상을 볼 수 있습니다. Adobe 빨간색 및 프런트 엔드 리소스(CSS, JS) 파일은 CDN에서 전달됩니다. 리소스 요청 호스트 이름은 https://static-pXX-eYY.p123-e456.adobeaemcloud.com/$HASH_VALUE$/theme/site.css 마찬가지로, site.js 또는 HtmlPageItemsConfig 파일.

새로 스타일이 지정된 WKND 사이트

팁

다음 $HASH_VALUE$ 다음은 사용자가 개발에 프런트 엔드 WKND 배포 파이프라인 컨텐츠 해시 필드. AEM은 프런트 엔드 리소스의 CDN URL에 대한 알림을 수신하며, 값은 에 저장됩니다. /conf/wknd/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content 아래에 prefixPath 속성을 사용합니다.

해시 값 상관 관계

축하합니다!

축하합니다. WKND Sites 프로젝트의 'ui.frontend' 모듈만 빌드하고 배포하는 프런트 엔드 파이프라인을 만들고, 실행하고, 확인했습니다. 이제 프런트 엔드 팀은 전체 AEM 프로젝트의 수명 주기 외에도 사이트의 디자인과 프런트 엔드 동작을 빠르게 반복할 수 있습니다.

다음 단계

다음 장에서 고려 사항프런트엔드 및 백엔드 개발 프로세스에 미치는 영향을 검토할 수 있습니다.

이 페이지에서는