使用前端管道开发站点 developing-site-with-front-end-pipeline
使用前端管道，给前端开发人员更多的独立性，开发过程可以大大加快速度。 本文档介绍了此流程的工作方式以及一些需要注意的事项，以便您能够充分发挥此流程的潜力。
前端构建合同 front-end-build-contract
与全栈构建环境类似，前端管道有自己的环境。 开发人员可以灵活地使用此管道，但前提是遵守以下前端构建合同。
前端管道要求前端Node.js项目使用build脚本指令生成它部署的版本。 这是因为Cloud Manager使用命令npm run build生成前端生成的可部署项目。
dist文件夹的结果内容最终由Cloud Manager部署，用作静态文件。 这些文件托管在AEM外部，但可通过已部署环境上的/content/... URL使用。
节点版本 node-versions
前端构建环境支持以下Node.js版本。
- 12
- 14（默认）
- 16
- 18
您可以使用NODE_VERSION 环境变量来设置所需的版本。
单一真理Source single-source-of-truth
一般好的做法是维护部署到AEM的内容的单一真实来源。 Cloud Manager的目标是让这一唯一的真相来源变得显而易见。 但是，由于前端管道允许将部分代码的位置解耦，因此前端管道的正确设置也存在一些额外的责任。 必须注意不要创建在同一环境中部署到同一站点的多个前端管道。
因此，尤其是在创建多个前端管道时，建议保持系统化的命名约定，例如：
- 由
package.json文件的name属性定义的前端模块的名称应包含其适用的站点的名称。 例如，对于位于/content/wknd的站点，前端模块的名称类似于wknd-theme。 - 当前端模块与其他模块共享相同的Git存储库时，其文件夹的名称应等于或包含前端模块的相同名称。 例如，如果前端模块名为
wknd-theme，则封入文件夹名称类似于wknd-theme-sources。 - Cloud Manager前端管道的名称还应包含前端模块的名称，还应添加其部署到的环境（生产或开发）。 例如，对于名为
wknd-theme的前端模块，管道的名称可能类似于wknd-theme-prod。
此类公约应有效防止以下部署错误：
- 将前端模块应用到错误的站点
- 创建多个应用同一站点的前端模块，这些前端模块会相互覆盖
- 为相同源创建多个前端管道，这可能会导致争用情况，而不保证部署顺序
分离关注点 separation-of-concerns
适用于任何分离关注点的另一种良好做法是，特别注意分离关注点的合同的设计和管理的方式。 对于前端管道，将该代码与其余代码分开的合同是站点渲染的HTML和JSON。 如果该HTML和JSON保持稳定，则前端管道通过使前端团队完全独立而实现其最大价值。
当前没有与前端管道同步运行全栈管道的特定功能。 因此，在将前端开发与全栈管道分离开时，必须格外注意将这两个关切领域隔开的合同。 该合同通常是Experience Manager呈现的HTML和/或JSON。 因此，该合同的更改必须在运行不同管道的团队之间经过周密规划，以便他们同意如何对相应的更改进行排序。
如果有必要对HTML和/或JSON输出执行会影响这两个关注领域的更改，通常建议执行以下步骤。
-
后端团队首先使用新HTML和/或JSON输出设置开发环境。
-
通过全栈管道，他们部署渲染所需的新HTML和/或JSON输出所需的代码。
-
如果这是前端团队之前无权访问的环境，则必须执行以下步骤。
- URL：前端团队必须知道该开发环境的URL。
- ACL：必须为前端团队提供具有类似于“参与者”权限的本地AEM用户。
- Git：前端团队必须为专门针对该开发环境的前端模块设置单独的Git位置。
- 通常的做法是创建
dev分支，这样对开发环境所做的更改就可以轻松地合并回要部署到生产环境的main分支。
- 通常的做法是创建
- 管道：前端团队必须具有部署到开发环境的前端管道。 该管道将部署通常位于
dev分支中的前端模块，如前一点所述。
-
-
然后，前端团队使CSS和JS代码同时使用旧输出和新输出。
-
与往常一样，在本地开发：
- 在前端模块中执行的
npx aem-site-theme-builder proxy命令启动一个从AEM环境请求内容的代理服务器，同时将前端模块的CSS和JS文件替换为本地dist文件夹中的文件。 - 通过配置隐藏
.env文件中的AEM_URL变量，可以控制本地代理服务器使用内容的AEM环境。 - 因此，通过更改此
AEM_URL的值，您可以在生产环境和开发环境之间切换以调整CSS和JS，使其同时适用于这两个环境。 - 它必须与呈现新输出的开发环境以及呈现旧输出的生产环境配合使用。
- 在前端模块中执行的
-
当更新的前端模块适用于这两个环境并将它们部署到两个环境中时，前端工作即告完成。
-
-
然后，后端团队可以通过部署代码来更新生产环境，该代码通过全栈管道呈现新HTML和/或JSON输出。
-
然后，前端团队可以清理其CSS和JS，并删除仅需要旧输出的内容，通过前端管道将最后一次更新部署到生产环境。
其他资源 additional-resources
- 站点主题 — 了解如何使用AEM站点主题自定义站点的样式和设计。
- AEM站点主题生成器 -Adobe提供AEM站点主题生成器作为一组用于创建新站点主题的脚本。