设置本地AEM开发环境

为Adobe Experience Manager AEM设置本地开发的指南。 涵盖本地安装、Apache Maven、集成开发环境和调试/故障排除等重要主题。 讨论了使用​ Eclipse IDE、CRXDE Lite、Visual Studio代码和IntelliJ ​进行开发。

概述

设置本地开发环境是为Adobe Experience Manager或AEM进行开发的第一步。 请花些时间来设置一个高质量的开发环境，以提高您的工作效率并更快地编写更好的代码。 我们可以将AEM本地开发环境分为四个方面：

安装本地AEM实例

当我们提及本地AEM实例时，我们谈论的是在开发人员个人计算机上运行的Adobe Experience Manager的副本。 所有 AEM开发应从针对本地AEM实例编写并运行代码开始。

如果您是初次使用AEM，则可以安装两种基本运行模式：作者 ​和​ Publish。 作者 运行模式是数字营销人员用于创建和管理内容的环境。 在大多数开发过程中，您要将代码部署到Author实例。 这允许您创建页面并添加和配置组件。 AEM Sites是WYSIWYG创作CMS，因此大多数CSS和JavaScript都可以针对创作实例进行测试。

对于本地​ Publish ​实例，它也是​ 关键 ​测试代码。 Publish ​实例是访问您网站的访客与之交互的AEM环境。 虽然​ Publish ​实例与​ Author ​实例的技术栈栈相同，但配置和权限有一些主要区别。 代码必须先在本地​ Publish ​实例中进行测试，然后才能提升到更高级别的环境。

步骤

~/aem-sdk
    /author
    /publish

~/aem-sdk
    /author
        + aem-author-p4502.jar
        + license.properties
    /publish
        + aem-publish-p4503.jar
        + license.properties

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

使用命令行

双击JAR文件的替代方法是从命令行启动AEM或创建脚本（.bat或.sh），具体取决于您的本地操作系统风格。 以下是示例命令的示例：

$ java -Xmx2048M -Xdebug -Xnoagent -Djava.compiler=NONE -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=30303 -jar aem-author-p4502.jar -gui -r"author,localdev"

此处，-X是JVM选项，-D是其他框架属性，有关详细信息，请参阅部署和维护AEM实例和快速入门文件中提供的其他选项。

安装Apache Maven

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

所有AEM项目应基于​ AEM Project Archetype ​的最新版本构建： https://github.com/adobe/aem-project-archetype。 AEM Project Archetype提供了AEM项目的引导程序，其中包含一些示例代码和内容。 AEM Project Archetype还包括配置为在您的项目中使用的​ AEM WCM Core Components。

步骤

$ 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

设置集成开发环境

集成开发环境或IDE是一种结合文本编辑器、语法支持和构建工具的应用程序。 根据正在执行的开发类型，一个IDE可能比另一个IDE更可取。 不论IDE如何，都必须能够定期​ 将 ​代码推送到本地AEM实例以进行测试。 为了持续到源代码控制管理系统（如Git），偶尔将​ 配置从本地AEM实例 ​拉入AEM项目很重要。

下面是一些与AEM开发一起使用的更流行的IDE，它们与相应的视频一起显示了与本地AEM实例的集成。

$ mvn clean install -PautoInstallSinglePackage -Pclassic

使用IDE时，请确保在Maven配置文件选项卡中检查classic。

IntelliJ Maven配置文件

Eclipse IDE

Eclipse IDE ​是用于Java™开发的较常用的IDE之一，这在很大程度上是因为它是开源的，并且​ 可用！ Adobe为Eclipse提供了一个插件​ AEM Developer Tools，以便能够更轻松地使用GUI进行开发，以将代码与本地AEM实例同步。 主要由于AEM Developer Tools支持GUI，因此建议新加入AEM的开发人员使用Eclipse IDE。

安装和设置

IntelliJ IDEA

IntelliJ IDEA ​是一个功能强大的IDE，可用于专业Java™开发。 IntelliJ IDEA有两种风格，免费 Community版本和商业（付费） Ultimate版本。 可用Community版本的IntellIJ IDEA足以进行更多AEM开发，但Ultimate 扩展了其功能集。

Installation and Setup

Visual Studio Code

Visual Studio Code ​已快速成为​ 前端开发人员 ​最喜爱的工具，具有增强的JavaScript支持、Intellisense和浏览器调试支持。 Visual Studio Code ​是开源、免费的，具有许多功能强大的扩展。 可以将Visual Studio Code设置为在Adobe工具​ repo的帮助下与AEM集成。 ​还可以安装多个社区支持的扩展以与AEM集成。

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

重要链接

CRXDE Lite

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

CRXDE Lite应与其他IDE一起使用来测试和调试代码，但绝不能作为主要开发工具。 它对语法的支持有限，没有自动完成功能，而且与源代码管理系统的集成也有限。

疑难解答

帮助！ ​我的代码不起作用！ 与所有开发一样，有时候（可能有多次）会出现代码无法按预期工作的情况。 AEM是一个功能强大的平台，但具有强大的功能……会带来极大的复杂性。 以下是排除故障和跟踪问题时的几个高级起点（远非可出错的详尽列表）：

验证代码部署

遇到问题时，正确的第一步是验证代码是否已成功部署和安装到AEM。

检查日志

AEM是一个聊天平台，在​ error.log ​中记录有用的信息。 可以在已安装AEM的位置找到​ error.log： < aem-installation-folder>/crx-quickstart/logs/error.log。

跟踪问题的一种有效方法是在Java™代码中添加日志语句：

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™包配置日志语句。 这是项目的最佳实践，以便轻松地将自定义代码问题与OOTB AEM平台问题区分开。

捆绑包处于已安装状态 bundle-active

所有包（不包括片段）都应处于​ 活动 ​状态。 如果您看到代码包处于Installed状态，则表示存在需要解决的问题。 大多数情况下，这是一个依赖性问题：

AEM中的

在上述屏幕快照中，WKND Core bundle是已安装状态。 这是因为该捆绑包预期的com.adobe.cq.wcm.core.components.models版本与AEM实例上可用的版本不同。

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

继续上面的示例，我们可以看到AEM实例上安装的版本是​ 12.2 ​与包期望的​ 12.6。 从该位置，您可以向后工作，查看AEM上的Maven依赖项是否与AEM项目中的Maven依赖项匹配。 在中，上述示例Core Components v2.2.0 ​安装在AEM实例上，但生成代码包时依赖于​ v2.2.2，因此存在依赖性问题的原因。

验证Sling模型注册 osgi-component-sling-models

AEM组件必须由Sling Model支持，才能封装任何业务逻辑并确保HTL渲染脚本保持干净。 如果遇到无法找到Sling模型的问题，则从控制台http://localhost:4502/system/console/status-slingmodels中查看Sling Models可能会有所帮助。 这可告知您是否已注册Sling模型以及它绑定的资源类型（组件路径）。

显示绑定到组件资源类型wknd/components/content/byline的Sling Model、BylineImpl的注册。

CSS或JavaScript问题

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

打开页面属性菜单，然后单击以发布的形式查看。 此操作将打开页面，但不包含AEM编辑器，且查询参数设置为​ wcmmode=disabled。 这可以有效地禁用AEM创作UI，并使前端问题的疑难解答/调试更加容易。

开发前端代码时遇到的另一个常见问题为旧代码或正在加载过期的CSS/JS。 作为第一步，请确保已清除浏览器历史记录，并在必要时启动无痕浏览器或刷新会话。

调试客户端库

使用不同的类别和嵌入方法以包含多个客户端库，进行故障排除可能会比较麻烦。 AEM公开了多种工具来帮助解决此问题。 最重要的工具之一是重建客户端库，它强制AEM重新编译任何LESS文件并生成CSS。