使用前端管道开发站点

通过前端管道， 前端开发者具有更大的独立性，开发过程可以获得大量的速度。 本文档介绍了此过程的工作方式以及需要注意的一些注意事项，以便充分挖掘此过程的潜力。

单一真相来源

一般的最佳做法是，为部署到AEM的内容保留单一的真相来源。 Cloud Manager的目标是让这一单一的真相来源变得显而易见。 但是，由于前端管道允许解耦部分代码的位置，因此前端管道的正确设置会带来一些额外的责任。 必须注意，不要创建部署到同一环境中同一站点的多个前端管道。

因此，特别是当创建了多个前端管道时，建议保持系统的命名约定，例如：

• 前端模块的名称，由 name 属性 package.json 文件中，应包含其所应用站点的名称。 例如，对于位于 /content/wknd，前端模块的名称类似于 wknd-theme.
• 当前端模块与其他模块共享相同的Git存储库时，其文件夹的名称应等于或包含前端模块的相同名称。 例如，如果前端模块名为 wknd-theme，封闭文件夹名称类似于 wknd-theme-sources.
• Cloud Manager前端管道的名称还应包含前端模块的名称，并添加其部署的环境（生产或开发）。 例如，对于名为 wknd-theme，管道可以被命名为 wknd-theme-prod.

这样一项公约应有效地防止下列部署错误：

• 将前端模块应用到错误站点
• 创建应用同一站点的多个前端模块，这些模块会覆盖彼此
• 为相同源创建多个前端管道，这可能导致争用情况，但无法保证部署顺序

分离关注点

适用于任何关注事项分离的另一种良好做法是特别注意如何设计和管理分散关注事项的合同。 对于前端管道，将该代码与其余代码分开的合同是站点呈现的HTML和JSON。 如果该HTML和JSON保持稳定，则前端管道通过使前端团队完全独立来提供其最大价值。

当前没有与前端管道同步运行全栈管道的特定功能。 因此，在将前端开发与全栈管道分离时，必须在将这两个关注领域分开的合同中加以格外注意。 该合同通常为Experience Manager渲染的HTML和/或JSON。 因此，不同管道运营小组之间必须妥善规划对合同的更改，以便他们就如何排列相应更改达成一致意见。

如果需要对HTML和/或JSON输出进行更改，以影响两个关注区域，则通常建议执行以下步骤。

1. 后端团队首先使用新的HTML和/或JSON输出来设置开发环境。
   1. 通过全栈管道，他们部署了渲染所需的新HTML和/或JSON输出所需的代码。
   2. 如果是前端团队之前无权访问的环境，则必须执行以下步骤。
      1. URL:前端团队必须知道该开发环境的URL。
      2. ACL:前端团队必须获得与“参与者”权限类似的本地AEM用户。
      3. Git:前端团队必须在前端模块中具有单独的Git位置，该位置专门针对该开发环境。
         • 通常的做法是创建 dev 分支，以便随后可以轻松地将针对开发环境所做的更改合并回 main 要部署到生产环境的分支。
      4. 管道：前端团队必须具有部署到开发环境的前端管道。 该管道将部署通常位于 dev 分支，如上一点中所述。
2. 然后，前端团队可让CSS和JS代码同时用于旧输出和新输出。
   1. 与往常一样，在当地发展：
      1. 的 npx aem-site-theme-builder proxy 在前端模块中执行的命令会启动从AEM环境请求内容的代理服务器，同时将前端模块的CSS和JS文件替换为来自本地的文件 dist 文件夹。
      2. 配置 AEM_URL 变量 .env 文件允许控制本地代理服务器从哪个AEM环境中使用内容。
      3. 更改此值 AEM_URL 因此，允许在生产环境和开发环境之间切换，以调整CSS和JS，使其适合这两个环境。
      4. 它必须与呈现新输出的开发环境以及呈现旧输出的生产环境一起使用。
   2. 当更新的前端模块适用于两个环境并部署到这两个环境时，即可完成前端工作。
3. 然后，后端团队可以通过部署通过全栈管道呈现新HTML和/或JSON输出的代码来更新生产环境。
4. 然后，前端团队可以清理其CSS和JS，并删除旧输出仅需的内容，从而通过前端管道将该上次更新部署到生产环境。

其他资源

• 网站主题 — 了解如何使用AEM网站主题自定义网站的样式和设计。
• AEM网站主题生成器 -Adobe将AEM网站主题生成器作为一组用于创建新网站主题的脚本。