通过前端管道, 给前端开发人员更多的独立性,开发过程可以获得巨大的速度。 本文档介绍了此流程的工作方式以及一些需要注意的事项,以便您能够充分发挥此流程的潜力。
如果您还不熟悉如何使用前端管道及其可能带来的好处,请查看 快速站点创建历程 例如,如何快速部署新站点并完全独立于后端开发自定义其主题。
类似于 全栈构建环境, 前端管道有自己的环境。 开发人员在此管道中具有一些灵活性,但前提是遵守以下前端构建合同。
前端管道要求前端Node.js项目使用 build
脚本指令来生成由前端管道部署的构建。 即Cloud Manager使用命令 npm run build
将可部署项目生成到 dist
文件夹。
的内容 dist
文件夹是as a Cloud Service于Cloud Manager管道最终部署到AEM的内容。
默认情况下,前端管道使用节点14,但节点12和16也可用。
您可以使用 NODE_VERSION
环境变量来设置所需的版本。
一般好的做法是维护部署到AEM的内容的单一真实来源。 Cloud Manager的目标是使这一单一的真实来源变得显而易见。 但是,由于前端管道允许将部分代码的位置解耦,因此前端管道的正确设置也存在一些额外的责任。 必须注意不要创建在同一环境中部署到同一站点的多个前端管道。
因此,尤其是在创建多个前端管道时,建议保持系统化的命名约定,例如:
name
的属性 package.json
文件,应包含其应用于的站点的名称。 例如,对于位于 /content/wknd
,前端模块的名称类似于 wknd-theme
.wknd-theme
,则封入文件夹名称类似于 wknd-theme-sources
.wknd-theme
,管道的名称可能如下 wknd-theme-prod
.此类公约应有效防止以下部署错误:
适用于任何分离关注点的另一种良好做法是,特别注意分离关注点的合同的设计和管理的方式。 对于前端管道,将该代码与其余代码分开的合同是站点渲染的HTML和JSON。 如果该HTML和JSON保持稳定,则前端管道通过使前端团队完全独立而实现其最大价值。
当前没有与前端管道同步运行全栈管道的特定功能。 因此,在将前端开发与全栈管道分离开时,必须格外注意将这两个关切领域隔开的合同。 该合同通常是Experience Manager呈现的HTML和/或JSON。 因此,该合同的更改必须在运行不同管道的团队之间经过周密规划,以便他们同意如何对相应的更改进行排序。
如果有必要对HTML和/或JSON输出执行会影响这两个关注领域的更改,通常建议执行以下步骤。
dev
分支,以便随后可以轻松将对开发环境所做的更改合并回 main
要部署到生产环境的分支。dev
分支,如上一点所述。npx aem-site-theme-builder proxy
在前端模块中执行的命令启动一个从AEM环境请求内容的代理服务器,同时将前端模块的CSS和JS文件替换为来自本地的文件 dist
文件夹。AEM_URL
变量 .env
文件允许控制本地代理服务器使用内容的AEM环境。AEM_URL
因此,您可以在生产环境和开发环境之间切换以调整CSS和JS,使其适合这两个环境。