使用前端管道开发站点

通过前端管道， 给前端开发人员更多的独立性，使开发过程获得巨大的速度。 本文档介绍了此流程的工作方式以及一些需要注意的事项，以便充分发挥此流程的潜力。

小贴士

如果您还不熟悉如何使用前端管道及其带来的好处，请查看 快速站点创建历程 有关如何快速部署新站点并完全独立于后端开发自定义其主题的示例。

前端构建合同

与 全栈构建环境， 前端管道有其自己的环境。 开发人员在此管道中具有一些灵活性，只要遵守以下前端构建合同。

前端管道要求前端Node.js项目使用 build 用于生成将由前端管道部署的构建的script指令。 即Cloud Manager使用命令 npm run build 将可部署项目生成到 dist 文件夹。

的内容 dist 文件夹是最终部署到AEM的，与Cloud Manager管道as a Cloud Service。

节点版本

默认情况下，前端管道使用节点14，但12和16也可用。

您可以使用 CM_CUSTOM_VAR_NODE_VERSION 环境变量来设置所需的版本。

单一事实来源

一般良好做法是为部署到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站点主题生成器作为一组用于创建新站点主题的脚本。

在此页面上