通过前端管道, 前端开发者具有更大的独立性,开发过程可以获得大量的速度。 本文档介绍了此过程的工作方式以及需要注意的一些注意事项,以便充分挖掘此过程的潜力。
如果您还不熟悉如何使用前端管道及其带来的好处,请查看 快速网站创建历程 例如,如何快速部署新站点并自定义其主题,使其完全独立于后端开发。
与 全栈构建环境, 前端管道有其自己的环境。 只要遵循以下前端构建合同,开发人员就可以在此管道中实现一些灵活性。
前端管道要求前端Node.js项目使用 build
脚本指令,以生成将由前端管道部署的内部版本。 例如,Cloud Manager使用命令 npm run build
生成可部署项目 dist
文件夹。
的内容 dist
文件夹是从Cloud Manager管道最终部署到AEMas a Cloud Service的内容。
默认情况下,前端管道使用节点14,但也提供12和16。
您可以使用 CM_CUSTOM_VAR_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,使其适合这两个环境。