프론트엔드 파이프라인을 사용하도록 전체 스택 AEM 프로젝트 업데이트 update-project-enable-frontend-pipeline
이 장에서는 구성을 WKND Sites 프로젝트 전체 스택 파이프라인 실행이 필요 없이 프론트엔드 파이프라인을 사용하여 JavaScript 및 CSS를 배포합니다. 이렇게 하면 프론트엔드 및 백엔드 객체의 개발 및 배포 라이프사이클을 분리하므로 전체적으로 보다 빠르고 반복적인 개발 프로세스가 가능합니다.
목표 objectives
- 프론트엔드 파이프라인을 사용하도록 전체 스택 프로젝트 업데이트
전체 스택 AEM 프로젝트의 구성 변경 개요
사전 요구 사항 prerequisites
이 자습서는 여러 부분으로 구성되어 있으며 다음을 검토했다고 가정합니다. 'ui.frontend' 모듈.
전체 스택 AEM 프로젝트 변경 사항
세 가지 프로젝트 관련 구성 변경 사항과 테스트 실행을 위해 배포할 스타일 변경이 있으므로 WKND 프로젝트에서 프론트엔드 파이프라인 계약에 사용할 수 있도록 총 4개의 특정 변경 사항이 있습니다.
-
제거
ui.frontend
전체 스택 빌드 주기의 모듈- 에서 WKND Sites 프로젝트의 루트
pom.xml
댓글 달기<module>ui.frontend</module>
하위 모듈 항목입니다.
code language-xml ... <modules> <module>all</module> <module>core</module> <!-- <module>ui.frontend</module> --> <module>ui.apps</module> ...
- 및 의 관련 종속성에 주석 달기
ui.apps/pom.xml
code language-xml ... <!-- ====================================================================== --> <!-- D E P E N D E N C I E S --> <!-- ====================================================================== --> ... <!-- <dependency> <groupId>com.adobe.aem.guides</groupId> <artifactId>aem-guides-wknd.ui.frontend</artifactId> <version>${project.version}</version> <type>zip</type> </dependency> --> ...
- 에서 WKND Sites 프로젝트의 루트
-
준비
ui.frontend
두 개의 새 webpack 구성 파일을 추가하여 프론트엔드 파이프라인 계약에 대한 모듈입니다.- 기존 항목 복사
webpack.common.js
다음으로:webpack.theme.common.js
, 및 변경output
속성 및MiniCssExtractPlugin
,CopyWebpackPlugin
다음과 같은 플러그인 구성 매개변수:
code language-javascript ... output: { filename: 'theme/js/[name].js', path: path.resolve(__dirname, 'dist') } ... ... new MiniCssExtractPlugin({ filename: 'theme/[name].css' }), new CopyWebpackPlugin({ patterns: [ { from: path.resolve(__dirname, SOURCE_ROOT + '/resources'), to: './clientlib-site' } ] }) ...
- 기존 항목 복사
webpack.prod.js
다음으로:webpack.theme.prod.js
, 및 변경common
위의 파일에 대한 변수의 위치입니다.
code language-javascript ... const common = require('./webpack.theme.common.js'); ...
note note NOTE 위의 두 'webpack' 구성 변경 내용은 출력 파일 및 폴더 이름이 다르므로 clientlib(전체 스택)와 테마 생성(프론트엔드) 파이프라인 프론트엔드 아티팩트를 쉽게 구분할 수 있습니다. 예상한 대로 기존 Webpack 구성을 사용하기 위해 위의 변경 사항을 건너뛸 수 있지만 아래 변경 사항이 필요합니다. 이름을 지정하거나 구성하는 방법은 사용자가 결정합니다. - 다음에서
package.json
파일, 다음을 확인합니다.name
속성 값이 의 사이트 이름과 같습니다./conf
노드. 및scripts
속성, abuild
이 모듈에서 프론트엔드 파일을 빌드하는 방법을 지시하는 스크립트.
code language-javascript { "name": "wknd", "version": "1.0.0", ... "scripts": { "build": "webpack --config ./webpack.theme.prod.js" } ... }
- 기존 항목 복사
-
준비
ui.content
두 개의 Sling 구성을 추가하여 프론트엔드 파이프라인용 모듈입니다.- 다음 위치에 파일 만들기
com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig
- 여기에는 다음과 같은 모든 프론트엔드 파일이 포함됩니다ui.frontend
모듈은dist
webpack 빌드 프로세스를 사용하는 폴더.
code language-xml ... <css jcr:primaryType="nt:unstructured" element="link" location="header"> <attributes jcr:primaryType="nt:unstructured"> <as jcr:primaryType="nt:unstructured" name="as" value="style"/> <href jcr:primaryType="nt:unstructured" name="href" value="/theme/site.css"/> ...
note tip TIP 전체 보기 HtmlPageItemsConfig 다음에서 AEM WKND Sites 프로젝트. - 두 번째
com.adobe.aem.wcm.site.manager.config.SiteConfig
(으)로themePackageName
값이 와 같음package.json
및name
속성 값 및siteTemplatePath
을(를) 가리키기/libs/wcm/core/site-templates/aem-site-template-stub-2.0.0
스텁 경로 값.
code language-xml ... <?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="nt:unstructured" siteTemplatePath="/libs/wcm/core/site-templates/aem-site-template-stub-2.0.0" themePackageName="wknd"> </jcr:root> ...
note tip TIP 참조: 완료 SiteConfig 다음에서 AEM WKND Sites 프로젝트. - 다음 위치에 파일 만들기
-
테스트 실행을 위해 프론트엔드 파이프라인을 통해 배포하기 위해 테마 또는 스타일이 변경됨, 변경 중
text-color
를 업데이트하여 빨간색을 Adobe(또는 직접 선택할 수 있음)하려면ui.frontend/src/main/webpack/base/sass/_variables.scss
.code language-css $black: #a40606; ...
마지막으로 이러한 변경 사항을 프로그램의 Adobe git 저장소에 푸시합니다.
주의 - 프론트엔드 파이프라인 활성화 단추
다음 레일 선택기 의 Site 옵션은 프론트엔드 파이프라인 활성화 사이트 루트 또는 사이트 페이지 선택 시 버튼. 클릭 프론트엔드 파이프라인 활성화 단추는 위의 을(를) 재정의합니다. Sling 구성, 다음을 확인합니다. 클릭하지 않음 Cloud Manager 파이프라인 실행을 통해 위의 변경 사항 배포 후 이 버튼을 클릭합니다.
실수로 클릭한 경우 파이프라인을 다시 실행하여 프론트엔드 파이프라인 계약 및 변경 사항이 복원되도록 해야 합니다.
축하합니다! congratulations
축하합니다. 프론트엔드 파이프라인 계약에 대해 WKND Sites 프로젝트를 활성화하도록 업데이트했습니다.
다음 단계 next-steps
다음 장에서는 프론트엔드 파이프라인을 사용하여 배포, 프론트엔드 파이프라인을 만들고 실행하고 실행 방법을 확인합니다 멀리 이동함 /etc.clientlibs 기반 프론트엔드 리소스 게재.