使用前端管道进行部署
在本章中,我们将在 Adobe Cloud Manager 中创建并运行前端管道。它仅构建 ui.frontend
模块的文件,并将它们部署到 AEM as a Cloud Service 中的内置内容传递网络。这样就不再使用基于 /etc.clientlibs
的前端资源交付。
目标 objectives
- 创建和运行前端管道。
- 验证前端资源不是从
/etc.clientlibs
提供,而是通过一个以https://static-
开头的新主机名交付。
使用前端管道
先决条件 prerequisites
这是一个多段式教程,并且假设您已完成更新标准 AEM 项目中概述的步骤。
确保您具有在 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 客户端库文件。最重要的是,通过添加 Sling 配置 文件(
SiteConfig
、HtmlPageItemsConfig
),准备 AEM 符合前端管道契约。
- 最后,运行 前端 WKND 部署到开发 管道,仅构建
ui.frontend
模块,然后将前端资源直接部署到内容传递网络。
验证样式变化和新的交付范式
- 打开 WKND 网站的任何页面,您都可以看到文字颜色为 Adobe 红色,并且前端资源(CSS、JS)文件来自内容传递网络。资源请求主机名以
https://static-pXX-eYY.p123-e456.adobeaemcloud.com/$HASH_VALUE$/theme/site.css
开头,site.js 或您在HtmlPageItemsConfig
文件中引用的任何其他静态资源也是类似。
$HASH_VALUE$
和您在__前端 WKND 部署到开发__管道的 CONTENT HASH 字段中看到的一样。前端资源的内容传递网络 URL 告知 AEM,此值存储在 /conf/wknd/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content
的 prefixPath 属性中。
恭喜! congratulations
祝贺您创建、运行并验证了仅构建和部署 WKND 网站项目的“ui.frontend”模块的前端管道。现在,您的前端团队可以在完整的 AEM 项目生命周期之外快速迭代网站的设计和前端行为。
后续步骤 next-steps
在下一章考虑事项中,您将了解对前端和后端开发过程的影响。