设置本地AEM开发环境

为AEM的Adobe Experience Manager设置本地开发指南。 涵盖本地安装、Apache Maven、集成开发环境以及调试/疑难解答的重要主题。 开发条件 Eclipse IDE, CRXDE Lite, Visual Studio Code 和IntelliJ 讨论。

概述

为Adobe Experience Manager或AEM进行开发时,首先需要设置本地开发环境。 请花时间设置一个质量开发环境,以更快地提高生产效率并编写更好的代码。 我们可以将AEM的本地开发环境划分为4个方面:

  • 本地AEM实例
  • Apache Maven 项目
  • 集成开发环境(IDE)
  • 疑难解答

安装本地AEM实例

当我们引用本地AEM实例时,我们讨论的是在开发人员的个人计算机上运行的Adobe Experience Manager副本。 全部 AEM开发应首先针对本地AEM实例编写并运行代码。

如果您是初次使用AEM,则可以安装两种基本的运行模式: 作者发布. 的 作者 运行模式 是数字营销人员用于创建和管理内容的环境。 开发时 最多 将代码部署到创作实例的时间。 这允许您创建新页面以及添加和配置组件。 AEM Sites是WYSIWYG创作CMS,因此大多数CSS和JavaScript都可以针对创作实例进行测试。

也是 关键 针对本地测试代码 发布 实例。 的 发布 实例是网站访客将与之交互的AEM环境。 而 发布 实例与技术堆栈相同 作者 例如,配置和权限存在一些主要区别。 代码应 always 针对当地人进行了测试 发布 实例。

步骤

  1. 确保 Java 已安装。

  2. 获取 AEM QuickStart Jar和 license.properties.

  3. 在计算机上创建文件夹结构,如下所示:

    ~/aem-sdk
        /author
        /publish
    
  4. 重命名 QuickStart JAR到 aem-author-p4502.jar 然后放在下面 /author 目录访问Advertising Cloud的帮助。 添加 license.properties 文件下方 /author 目录访问Advertising Cloud的帮助。

  5. 复制 QuickStart JAR,将其重命名为 aem-publish-p4503.jar 然后放在下面 /publish 目录访问Advertising Cloud的帮助。 添加 license.properties 文件下方 /publish 目录访问Advertising Cloud的帮助。

    ~/aem-sdk
        /author
            + aem-author-p4502.jar
            + license.properties
        /publish
            + aem-publish-p4503.jar
            + license.properties
    
  6. 双击 aem-author-p4502.jar 安装文件 作者 实例。 这将启动在端口上运行的创作实例 4502 在本地计算机上。

    双击 aem-publish-p4503.jar 安装文件 发布 实例。 这将启动在端口上运行的Publish实例 4503 在本地计算机上。

    注意

    根据开发机器的硬件,可能很难同时具有 创作和发布 同时运行的实例。 您很少需要在本地设置上同时运行这两个设置。

    有关详细信息,请参阅 部署和维护AEM实例.

安装Apache Maven

Apache Maven 是一个用于管理基于Java的项目的生成和部署过程的工具。 AEM是一个基于Java的平台, Maven 是管理AEM项目代码的标准方法。 我们说 AEM Maven项目 或是 AEM项目,我们指的是包含所有 自定义 网站的代码。

所有AEM项目都应基于 AEM Project Archetype: https://github.com/adobe/aem-project-archetype. 的 AEM Project Archetype 将创建包含一些示例代码和内容的AEM项目引导。 的 AEM Project Archetype 还包括 AEM WCM Core Components 配置为用于您的项目。

注意

启动新项目时,最好使用最新版本的原型。 请记住,原型有多个版本,并且并非所有版本都与AEM的早期版本兼容。

步骤

  1. 下载 阿帕奇·马文

  2. 安装 阿帕奇·马文 并确保已将安装添加到您的命令行中 PATH.

    • macOS 用户可以使用 家酿
  3. 验证 Maven 通过打开新的命令行终端并执行以下操作来安装:

    $ mvn --version
    Apache Maven 3.3.9
    Maven home: /Library/apache-maven-3.3.9
    Java version: 1.8.0_111, vendor: Oracle Corporation
    Java home: /Library/Java/JavaVirtualMachines/jdk1.8.0_111.jdk/Contents/Home/jre
    Default locale: en_US, platform encoding: UTF-8
    
    注意

    过去, adobe-public 需要Maven用户档案来指出 nexus.adobe.com 下载AEM工件。 现在,所有AEM工件均可通过Maven Central和 adobe-public 配置文件。

设置集成开发环境

集成开发环境或IDE是一个应用程序,它结合了文本编辑器、语法支持和构建工具。 根据您正在进行的开发类型,一个IDE可能比另一个IDE更好。 无论IDE是什么,都必须能够定期 推送 代码到本地AEM实例以进行测试。 偶尔也很重要 提取 将本地AEM实例配置到您的AEM项目中,以便能够持续保留到诸如Git之类的源代码管理系统。

下面是一些更受欢迎的IDE,这些IDE与AEM开发一起使用,并带有相应的视频,其中显示了与本地AEM实例的集成。

注意

WKND项目已更新为默认可用于AEMas a Cloud Service。 已更新为 向后兼容6.5/6.4. 如果使用AEM 6.5或6.4,请在 classic 配置文件。

$ mvn clean install -PautoInstallSinglePackage -Pclassic

使用IDE时,请确保检查 classic 在Maven Profile选项卡中。

Maven配置文件选项卡

IntelliJ Maven配置文件

Eclipse IDE

Eclipse IDE 是Java开发中比较流行的IDE之一,这在很大程度上是因为它是开源的, 免费! Adobe提供插件, AEM Developer Tools,对于 Eclipse 以便于使用良好的GUI进行开发,以便将代码与本地AEM实例同步。 的 Eclipse 对于很大程度上不熟悉AEM的开发人员,建议使用IDE,因为 AEM Developer Tools.

安装和设置

  1. 下载并安装 Eclipse IDE Java EE Developers: https://www.eclipse.org
  2. 按照安装 AEM Developer Tools 插件: https://experienceleague.adobe.com/docs/experience-manager-65/developing/devtools/aem-eclipse.html?lang=zh-Hans?lang=zh-Hans
  • 00:30 — 导入Maven项目
  • 01:24 — 使用Maven构建和部署源代码
  • 04:33 — 使用AEM开发人员工具更改推送代码
  • 10:55 — 使用AEM开发人员工具提取代码更改
  • 13:12 — 使用Eclipse的集成调试工具

IntelliJ IDEA

IntelliJ IDEA 是用于专业Java开发的强大IDE。 IntelliJ IDEA 有两种风格a 免费 Community 版本和商业版(付费) Ultimate 版本。 免费 Community 版本 IntellIJ IDEA 足以进行更多AEM开发,但 Ultimate 扩展其功能集.

Installation and Setup

  1. 下载并安装 IntelliJ IDEA: https://www.jetbrains.com/idea/download
  2. 安装 Repo (命令行工具): https://github.com/Adobe-Marketing-Cloud/tools/tree/master/repo
  • 00:00 — 导入Maven项目
  • 05:47 — 使用Maven构建和部署源代码
  • 08:17 — 使用Repo推送更改
  • 14:39 — 使用Repo提取更改
  • 17:25 — 使用IntelliJ IDEA的集成调试工具

Visual Studio Code

Visual Studio代码 已迅速成为 前端开发人员 增强了JavaScript支持, Intellisense和浏览器调试支持。 Visual Studio Code 是开源的免费扩展,具有许多功能强大的扩展。 Visual Studio Code 可设置为借助Adobe工具与AEM集成, 存储库. 还可以安装几个社区支持的扩展,以与AEM集成。

Visual Studio Code 对于主要编写CSS/LESS和JavaScript代码以创建AEM客户端库的前端开发人员而言,这是一个绝佳选择。 对于新的AEM开发人员而言,此工具可能不是最佳选择,因为节点定义(对话框、组件)都将需要以原始XML进行编辑。 有几个Java扩展可供使用 Visual Studio Code,但是,如果主要进行Java开发 Eclipse IDE 或 IntelliJ 可能是首选。

重要链接

  • 下载 Visual Studio代码
  • 存储库 — 适用于JCR内容的类似FTP的工具
  • aemfed — 加快AEM前端工作流
  • AEM同步 — 社区支持* Visual Studio代码的扩展
  • 00:30 — 导入Maven项目
  • 00:53 — 使用Maven构建和部署源代码
  • 04:03 — 使用Repo命令行工具更改推送代码
  • 08:29 — 使用Repo命令行工具提取代码更改
  • 10:40 — 使用aemfed工具更改推送代码
  • 14:24 — 疑难解答,重建客户端库

CRXDE Lite

CRXDE Lite 是基于浏览器的AEM存储库视图。 CRXDE Lite 嵌入在AEM中,允许开发人员执行标准开发任务,如编辑文件、定义组件、对话框和模板。 CRXDE Lite is not 旨在成为一个完整的开发环境,但作为调试工具非常有效。 CRXDE Lite 在扩展或仅了解代码库以外的产品代码时,此变量将非常有用。 CRXDE Lite 提供了存储库的强大视图,以及有效测试和管理权限的方法。

CRXDE Lite 应始终与其他IDE结合使用来测试和调试代码,但绝不能将其用作主要开发工具。 它具有有限的语法支持、无自动完成功能以及与源代码管理系统的有限集成。

疑难解答

帮助! 我的代码不起作用! 与所有开发一样,有时候(可能有很多)您的代码无法按预期工作。 AEM是一个功能强大的平台,但其强大的功能……具有极大的复杂性。 下面是疑难解答和跟踪问题的一些高级起点(但远非详尽的可能出错的事情列表):

验证代码部署

遇到问题时,一个好的第一步是验证代码是否已成功部署并安装到AEM。

  1. 检查 包管理器 要确保已上载并安装代码包,请执行以下操作: http://localhost:4502/crx/packmgr/index.jsp. 检查时间戳以验证软件包是否最近安装过。
  2. 如果使用诸如之类的工具执行增量文件更新 Repo 或 AEM Developer Tools, checkCRXDE Lite 文件已推送到本地AEM实例,且文件内容已更新: http://localhost:4502/crx/de/index.jsp
  3. 检查是否上载了包 如果在OSGi包中看到与Java代码相关的问题。 打开 Adobe Experience Manager Web Console: http://localhost:4502/system/console/bundles 并搜索包。 确保包具有 活动 状态。 有关对中的捆绑包进行故障诊断的详细信息,请参阅下文 已安装 状态。

检查日志

AEM是一个动态平台,在 error.log. 的 error.log 可在安装AEM的位置找到:< aem-installation-folder>/crx-quickstart/logs/error.log.

跟踪下拉问题的一种有用方法是,在Java代码中添加log语句:

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
...

public class MyClass {
    private final Logger log = LoggerFactory.getLogger(getClass());

    ...

    String myVariable = "My Variable";

    log.debug("Debug statement of myVariable {}", myVariable);

    log.info("Info statement of myVariable {}", myVariable);
}

默认情况下, error.log 配置为日志 INFO 语句。 如果要更改日志级别,可通过以下路径执行此操作: 日志支持: http://localhost:4502/system/console/slinglog. 您可能还会发现 error.log 太吵了。 您可以使用 日志支持 为指定的Java包配置log语句。 这是项目的最佳实践,以便轻松地将自定义代码问题与OOTB AEM平台问题分开。

在AEM中记录配置

包处于“已安装”状态

所有包(不包括片段)都应位于 活动 状态。 如果您在 已安装 说明,则有一个问题需要解决。 大多数情况下,这是依赖关系问题:

AEM中的包错误

在上面的屏幕截图中, WKND Core bundle 是 已安装 状态。 这是因为包需要的是 com.adobe.cq.wcm.core.components.models 在AEM实例中可用。

一个有用的工具是 依赖关系查找器: http://localhost:4502/system/console/depfinder. 添加Java包名称以检查AEM实例上的可用版本:

核心组件

继续上述示例,我们可以看到在AEM实例上安装的版本是 12.2 vs 12.6 捆绑包的期望。 从此处,您可以向后工作,并查看 Maven 对AEM的依赖项匹配 Maven AEM项目中的依赖项。 在上例中 Core Components v2.2.0 已安装在AEM实例上,但生成的代码包依赖于 v2.2.2,因此也是出现依赖关系问题的原因。

验证Sling模型注册

AEM组件应始终由 Sling Model 封装任何业务逻辑并确保HTL渲染脚本保持干净。 如果遇到找不到Sling模型的问题,检查 Sling Models 从控制台中: http://localhost:4502/system/console/status-slingmodels. 这将告诉您Sling模型是否已注册以及它绑定到的资源类型(组件路径)。

Sling模型状态

显示 Sling Model, BylineImpl 绑定到 wknd/components/content/byline.

CSS或JavaScript问题

对于大多数CSS和JavaScript问题,使用浏览器的开发工具是进行故障诊断的最有效方法。 要在针对AEM创作实例进行开发时缩小问题,查看“已发布”页面会很有帮助。

CSS或JS问题

打开 页面属性 菜单,单击 查看已发布的项目. 这将在没有AEM编辑器且查询参数设置为 wcmmode=disabled. 这将有效地禁用AEM创作UI,并使前端问题的疑难解答/调试变得更加轻松。

开发前端代码时遇到的另一个常见问题是,加载的CSS/JS是旧的或已过时的CSS/JS。 第一步,确保浏览器历史记录已清除,并在必要时启动隐身浏览器或新会话。

调试客户端库

使用不同的类别和嵌入方法来包含多个客户端库时,可能很麻烦进行故障诊断。 AEM会提供一些可帮助解决此问题的工具。 最重要的工具之一是 重建客户端库 这将强制AEM重新编译任何LESS文件并生成CSS。

  • 转储库 — 列出在AEM实例中注册的所有客户端库。 <host>/libs/granite/ui/content/dumplibs.html
  • 测试输出 — 允许用户查看基于类别的clientlib的预期HTML输出。 <host>/libs/granite/ui/content/dumplibs.test
  • 库依赖关系验证 — 突出显示找不到的任何依赖项或嵌入的类别。 <host>/libs/granite/ui/content/dumplibs.validate
  • 重建客户端库 — 允许用户强制AEM重建所有客户端库或使客户端库的缓存失效。 使用LESS进行开发时,此工具特别有效,因为这样可以强制AEM重新编译生成的CSS。 通常,与重建所有库相比,使缓存失效然后执行页面刷新更有效。 <host>/libs/granite/ui/content/dumplibs.rebuild

调试Clientlibs

注意

如果您经常必须使用 重建客户端库 工具一次性重建所有客户端库可能值得。 这可能需要大约15分钟,但通常会在将来消除任何缓存问题。

在此页面上