使用前端管道部署
在本章中,我们将在AdobeCloud Manager中创建并运行前端管道。 它仅从ui.frontend
模块构建文件,并将它们部署到AEM as a Cloud Service中的内置CDN。 因此将离开基于/etc.clientlibs
的前端资源投放。
目标 objectives
- 创建并运行前端管道。
- 验证前端资源不是从
/etc.clientlibs
传递,而是从以https://static-
开头的新主机名传递
使用前端管道
先决条件 prerequisites
这是一个多部分教程,并假定已完成更新标准AEM项目中列出的步骤。
确保您有权限在Cloud Manager中创建和部署管道以及对AEM as a Cloud Service环境的访问权限。
重命名现有管道
通过转到 配置 选项卡的 非生产管道名称 字段,将现有管道从 部署到开发 重命名为 全栈栈WKND部署到开发。 这是为了通过查看管道名称来明确说明管道是全栈管道还是前端管道。
此外,在 Source代码 选项卡中,确保存储库和Git分支字段值正确,并且该分支包含您前端管道合同更改。
创建前端管道
要 仅 从ui.frontend
模块生成并部署前端资源,请执行以下步骤:
-
在Cloud Manager UI中,从 管道 部分中单击 添加 按钮,然后根据要部署到的AEM as a Cloud Service环境选择 添加非生产管道(或 添加生产管道)。
-
在 添加非生产管道 对话框中,作为 配置 步骤的一部分,选择 部署管道 选项,将其命名为 前端WKND部署到开发,然后单击 继续
- 作为 Source代码 步骤的一部分,选择 前端代码 选项,然后从 符合条件的部署环境 中选择环境。 在 Source代码__部分中,确保存储库和Git分支字段值正确,并且该分支具有您前端管道合同更改。
以及__最重要的是 代码位置 字段的值为/ui.frontend
,最后,单击 保存。
部署序列
- 首先运行新重命名的 FullStack WKND部署到Dev 管道,以从AEM存储库中删除WKND clientlib文件。 最重要的是,通过添加 Sling配置 文件(
SiteConfig
、HtmlPageItemsConfig
)为前端管道合同准备AEM。
- 最后,运行 FrontEnd WKND Deploy to Dev 管道以仅构建
ui.frontend
模块并将前端资源直接部署到CDN。
验证样式更改和新投放模式
- 打开WKND站点的任何页面,您会看到文本颜色为 Adobe红色,并且前端资源(CSS、JS)文件是从CDN交付的。 资源请求主机名以
https://static-pXX-eYY.p123-e456.adobeaemcloud.com/$HASH_VALUE$/theme/site.css
开头,同样以HtmlPageItemsConfig
文件中引用的site.js或任何其他静态资源开头。
$HASH_VALUE$
与您在__FrontEnd WKND Deploy to Dev__管道的__内容哈希__字段中看到的内容相同。 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
在下一章注意事项中,您将回顾对前端和后端开发过程的影响。