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

Last update: Wed Sep 24 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

적용 대상:
Experience Manager as a Cloud Service

작성 대상:

중간
개발자
관리자

이 챕터에서는 Adobe Cloud Manager에서 프론트엔드 파이프라인을 만들고 실행합니다. 이때 ui.frontend 모듈의 파일만 빌드하며 이 파일들을 AEM as a Cloud Service에서 기본 제공되는 CDN에 배포합니다. 따라서 /etc.clientlibs 기반 프론트엔드 리소스 게재를 사용하지 않게 됩니다.

목표 objectives

프론트엔드 파이프라인을 생성
프론트엔드 리소스가 /etc.clientlibs가 아닌 https://static-으로 시작하는 새로운 호스트 이름에서 제공되는지 확인

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

https://video.tv.adobe.com/v/3409420?quality=12&learn=on

사전 요구 사항 prerequisites

여러 부분으로 구성된 튜토리얼로, 표준 AEM Project 업데이트에 개괄된 단계가 완료되었다고 가정합니다.

Cloud Manager에서 파이프라인을 생성 및 배포할 수 있는 권한 및 AEM as a Cloud Service 환경에 액세스할 수 있는 권한이 있는지 확인합니다.

기존 파이프라인 이름 재설정

구성 탭의 비프로덕션 파이프라인 이름 필드로 이동하여 기존 파이프라인의 이름을 개발 배포 에서 풀스택 WKND 개발 배포 로 재설정합니다. 이는 파이프라인의 이름만 보고도 파이프라인이 풀스택인지 프론트엔드인지 명확하게 알 수 있도록 하기 위함입니다.

파이프라인 이름 재설정

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

소스 코드 구성 파이프라인

프론트엔드 파이프라인 생성

ui.frontend 모듈에서 프론트엔드 리소스 만 빌드 및 배포하려면 아래의 단계를 수행합니다.

파이프라인 섹션의 Cloud Manager UI에서 추가 버튼을 클릭한 다음 배포를 원하는 AEM as a Cloud Service 환경에 따라 비프로덕션 파이프라인 추가(또는 프로덕션 파이프라인 추가)를 선택합니다.
비프로덕션 파이프라인 대화 상자에서 구성 단계의 일부로서 배포 파이프라인 옵션을 선택한 다음 프론트엔드 WKND 배포 개발 이라 명명하고 계속 을 클릭합니다.

프론트엔드 파이프라인 구성 생성

소스 코드 단계의 일부로서 프론트엔드 코드 옵션을 선택하고 적합한 배포 환경 에서 환경을 선택합니다. 소스 코드 섹션에서 저장소 및 Git 분기 필드 값이 올바른지, 분기에 프론트엔드 파이프라인 계약 변경 사항이 있는지 확인합니다.
코드 위치 필드와 관련하여 가장 중요한 점 은 값이 /ui.frontend라는 점입니다. 마지막으로 저장 을 클릭합니다.

프론트엔드 파이프라인 소스 코드 생성

배포 순서

먼저 새롭게 이름이 바뀐 풀스택 WKND 배포 개발 파이프라인을 실행하여 AEM 저장소에서 WKND clientlib 파일을 제거합니다. 가장 중요한 점은 Sling Sling 구성 파일(SiteConfig, HtmlPageItemsConfig)을 추가하여 프론트엔드 파이프라인 계약에 대한 AEM을 준비하는 것입니다.

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

WARNING

풀스택 WKND 개발 배포 파이프라인이 완료되면 스타일이 지정되지 않은 WKND 사이트가 생성되며 이 사이트는 손상된 것처럼 보일 수 있습니다. 중단이나 일반적이지 않은 시각에 배포하는 것을 계획하시기 바랍니다. 이는 단일 풀스택 파이프라인에서 프론트엔드 파이프라인으로 처음 전환하는 동안 계획해야 하는 일회성 중단입니다.

마지막으로, 프론트엔드 WKND 개발 배포 파이프라인을 실행하여 ui.frontend 모듈만 빌드하고 프론트엔드 리소스를 CDN에 직접 배포합니다.

IMPORTANT

스타일이 지정되지 않은 WKND 사이트가 정상으로 돌아왔고 이번에는 프론트엔드 파이프라인 실행이 풀스택 파이프라인보다 훨씬 빠른 것을 알 수 있습니다.

스타일 변경 및 새로운 게재 패러다임 확인

WKND 사이트의 아무 페이지에서나 열면 텍스트 색상이 Adobe Red 로 표시되고 프론트엔드 리소스(CSS, JS) 파일은 CDN에서 제공됩니다. 리소스 요청 호스트 이름은 https://static-pXX-eYY.p123-e456.adobeaemcloud.com/$HASH_VALUE$/theme/site.css로 시작하며, HtmlPageItemsConfig 파일에서 참조한 site.js 또는 다른 정적 리소스도 마찬가지입니다.

새롭게 스타일이 지정된 WKND 사이트

TIP

$HASH_VALUE$ 또한 프론트엔드 WKND 개발 배포 파이프라인의 콘텐츠 해시 필드와 동일합니다. AEM은 프론트엔드 리소스의 CDN URL에 대한 알림을 받고, 해당 값은 prefixPath 속성 아래의 /conf/wknd/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content에 저장됩니다.

해시 값 상관 관계

축하합니다! congratulations

축하합니다. WKND Sites 프로젝트의 'ui.frontend' 모듈만 빌드하고 배포하는 프론트엔드 파이프라인을 생성, 실행 및 검증했습니다. 이제 프론트엔드 팀은 AEM 프로젝트의 전체 수명 주기를 벗어나 사이트의 디자인과 프론트엔드 동작을 빠르게 반복할 수 있습니다.

다음 단계 next-steps

다음 챕터인 고려 사항에서는 프론트엔드와 백엔드 개발 프로세스에 미치는 영향을 검토합니다.

recommendation-more-help

b2a561c1-47c0-4182-b8c1-757a197484f9