设置本地AEM开发环境
为Adobe Experience Manager AEM设置本地开发的指南。 涵盖本地安装、Apache Maven、集成开发环境和调试/故障排除等重要主题。 开发工具 Eclipse IDE、CRXDE Lite、Visual Studio代码和IntelliJ 都经过了讨论。
概述
设置本地开发环境是为Adobe Experience Manager或AEM进行开发的第一步。 请花些时间来设置一个高质量的开发环境,以提高您的工作效率并更快地编写更好的代码。 我们可以将AEM本地开发环境分为四个方面:
- 本地AEM实例
- Apache Maven 项目
- 集成开发环境(IDE)
- 疑难解答
安装本地AEM实例
当我们提及本地AEM实例时,我们谈论的是在开发人员个人计算机上运行的Adobe Experience Manager的副本。 全部 AEM开发应从针对本地AEM实例编写和运行代码开始。
如果您是初次使用AEM,则可以安装两种基本运行模式: 作者 和 Publish. 此 作者 运行模式 是数字营销人员用于创建和管理内容的环境。 在大多数开发过程中,您要将代码部署到Author实例。 这允许您创建页面并添加和配置组件。 AEM Sites是WYSIWYG创作CMS,因此大多数CSS和JavaScript都可以针对创作实例进行测试。
它也是 关键 针对本地测试代码 Publish 实例。 此 Publish 实例是网站访客与之交互的AEM环境。 而 Publish 实例与的技术栈栈相同 作者 例如,配置和权限有一些主要区别。 代码必须针对本地进行测试 Publish 实例升级。
步骤
-
确保已安装Java™。
- 首选 Java™ JDK 11 适用于AEM 6.5+
- Java™ JDK 8 对于AEM 6.5之前的AEM版本
-
在计算机上创建文件夹结构,如下所示:
~/aem-sdk
/author
/publish
-
重命名 QuickStart JAR到 aem-author-p4502.jar 把它放在下面
/author
目录。 添加 license.properties 文件位于/author
目录。 -
复制 QuickStart JAR,将其重命名为 aem-publish-p4503.jar 把它放在下面
/publish
目录。 添加副本 license.properties 文件位于/publish
目录。
~/aem-sdk
/author
+ aem-author-p4502.jar
+ license.properties
/publish
+ aem-publish-p4503.jar
+ license.properties
- 双击 aem-author-p4502.jar 文件以安装 作者 实例。 这将启动创作实例,在端口上运行 4502 在本地计算机上。
双击 aem-publish-p4503.jar 文件以安装 Publish 实例。 这将启动发布实例,在端口上运行 4503 在本地计算机上。
使用命令行
双击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 配置为在您的项目上使用。
步骤
- 下载 Apache Maven
- 安装 Apache Maven 并确保已将安装添加到命令行中
PATH
.- macOS 用户可以使用安装Maven Homebrew
- 验证 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)。
下面是一些与AEM开发一起使用的更流行的IDE,它们与相应的视频一起显示了与本地AEM实例的集成。
classic
配置文件到任何Maven命令。$ mvn clean install -PautoInstallSinglePackage -Pclassic
当时,请使用IDE检查 classic
在Maven配置文件选项卡中。
IntelliJ Maven配置文件
Eclipse IDE
此 Eclipse IDE 是Java™开发中比较流行的IDE之一,这在很大程度上是因为它是开源的, 免费! Adobe提供了一个插件, AEM Developer Tools,用于 Eclipse 以更轻松地使用良好的GUI进行开发,从而将代码与本地AEM实例同步。 此 Eclipse 对于不熟悉AEM的开发人员,建议使用IDE,这在很大程度上是因为它支持GUI。 AEM Developer Tools.
安装和设置
- 下载并安装 Eclipse IDE for Java™ EE Developers: https://www.eclipse.org
- 按照说明安装 AEM Developer Tools 插件: https://experienceleague.adobe.com/docs/experience-manager-65/developing/devtools/aem-eclipse.html?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 有两种口味,一种 免费 Community 版和商业(付费) Ultimate 版本。 免费 Community 版本 IntellIJ IDEA 足以进行更多AEM开发,但是 Ultimate 扩展其功能集.
Installation and Setup
- 下载并安装 IntelliJ IDEA: https://www.jetbrains.com/idea/download
- 安装 Repo (命令行工具): https://github.com/Adobe-Marketing-Cloud/tools/tree/master/repo
- 00:00 — 导入Maven项目
- 05:47 — 使用Maven构建和部署源代码
- 08:17 — 使用存储库推送更改
- 14:39 — 使用存储库提取更改
- 17:25 — 使用IntelliJ IDEA集成调试工具
Visual Studio Code
Visual Studio代码 已迅速成为您最喜爱的工具 前端开发人员 具有增强的JavaScript支持, Intellisense和浏览器调试支持。 Visual Studio Code 是开源、免费的,具有许多强大的扩展。 Visual Studio Code 设置以便在Adobe工具帮助下与AEM集成, repo. 此外,还可以安装多个社区支持的扩展以与AEM集成。
Visual Studio Code 对于主要编写CSS/LESS和JavaScript代码以创建AEM客户端库的前端开发人员来说,这是一个很好的选择。 此工具可能不是新AEM开发人员的最佳选择,因为节点定义(对话框、组件)需要在原始XML中进行编辑。 有多个可用于的Java™扩展 Visual Studio Code但是,如果主要进行Java™开发 Eclipse IDE 或 IntelliJ 可能首选。
重要链接
- 00:30 — 导入Maven项目
- 00:53 — 使用Maven构建和部署源代码
- 04:03 — 使用Repo命令行工具更改推送代码
- 08:29 — 使用Repo命令行工具更改拉取代码
- 10:40 — 使用嵌入工具更改推送代码
- 14:24 — 故障排除,重建客户端库
CRXDE Lite
CRXDE Lite 是AEM存储库的基于浏览器的视图。 CRXDE Lite 嵌入AEM中,允许开发人员执行标准开发任务,如编辑文件、定义组件、对话框和模板。 CRXDE Lite 是 非 旨在成为完整的开发环境,但可用作调试工具。 CRXDE Lite 在扩展或仅了解代码库之外的产品代码时,非常有用。 CRXDE Lite 提供了有关存储库的强大视图,以及有效测试和管理权限的方法。
CRXDE Lite 应该与其他IDE一起使用来测试和调试代码,但绝不能将其作为主要开发工具。 它对语法的支持有限,没有自动完成功能,而且与源代码管理系统的集成也有限。
疑难解答
救命! 我的代码不起作用! 与所有开发一样,有时候(可能有多次)会出现代码无法按预期工作的情况。 AEM是一个功能强大的平台,但具有强大的功能……会带来极大的复杂性。 以下是排除故障和跟踪问题时的几个高级起点(远非可出错的详尽列表):
验证代码部署
遇到问题时,正确的第一步是验证代码是否已成功部署和安装到AEM。
- Check 包管理器 要确保已上传并安装代码包,请执行以下操作: http://localhost:4502/crx/packmgr/index.jsp. 检查时间戳以验证最近是否安装了软件包。
- 如果使用如下工具执行增量文件更新 Repo 或 AEM Developer Tools, checkCRXDE Lite 文件已推送到本地AEM实例,并且文件内容已更新: http://localhost:4502/crx/de/index.jsp
- 检查是否已上传该捆绑包 如果在OSGi捆绑包中看到与Java™代码相关的问题。 打开 Adobe Experience Manager Web控制台: http://localhost:4502/system/console/bundles 并搜索您的捆绑包。 确保捆绑包具有 活动 状态。 有关对中的捆绑包进行故障排除的更多信息,请参阅下文。 已安装 省/州。
检查日志
AEM是一个聊天平台,会将有用信息记录在 error.log. 此 error.log 可以在已安装AEM的位置找到: < 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™包配置log语句。 这是项目的最佳实践,以便轻松地将自定义代码问题与OOTB AEM平台问题区分开。
捆绑包处于已安装状态 bundle-active
所有包(不包括片段)应位于 活动 省/州。 如果您在 已安装 则存在一个需要解决的问题。 大多数情况下,这是一个依赖性问题:
在上面的屏幕截图中, WKND Core bundle 是 已安装 省/州。 这是因为该捆绑包需要其他版本的 com.adobe.cq.wcm.core.components.models
比在AEM实例上可用的要多。
一个可以使用的有用工具是 依赖项查找器: http://localhost:4502/system/console/depfinder. 添加Java™包名称以检查AEM实例上可用的版本:
继续上面的示例,我们可以看到AEM实例上安装的版本是 12.2 对比 12.6 这束子弹所期待的。 从那里,您可以向后工作,查看 Maven AEM上的依赖项与 Maven AEM项目中的依赖关系。 在中,以上示例 Core Components v2.2.0 安装在AEM实例上,但代码捆绑包是以下面的依赖项生成的 v2.2.2,因此出现了依赖关系问题。
验证Sling模型注册 osgi-component-sling-models
AEM组件必须受 Sling Model 封装任何业务逻辑并确保HTL渲染脚本保持干净。 如果遇到无法找到Sling模型的问题,查看 Sling Models 从控制台中: http://localhost:4502/system/console/status-slingmodels. 这可告知您是否已注册Sling模型以及它绑定的资源类型(组件路径)。
显示注册 Sling Model, BylineImpl
绑定到的组件资源类型为 wknd/components/content/byline
.
CSS或JavaScript问题
对于大多数CSS和JavaScript问题,使用浏览器的开发工具是进行故障排除的最有效方法。 在针对AEM创作实例进行开发时,要缩小问题范围,查看“已发布”页面将会很有帮助。
打开 页面属性 菜单并单击 查看已发布的项目. 此操作将打开页面,但不包含AEM编辑器,且查询参数设置为 wcmmode=disabled. 这可以有效地禁用AEM创作UI,并使前端问题的疑难解答/调试更加容易。
开发前端代码时遇到的另一个常见问题为旧代码或正在加载过期的CSS/JS。 作为第一步,请确保已清除浏览器历史记录,并在必要时启动无痕浏览器或刷新会话。
调试客户端库
使用不同的类别和嵌入方法以包含多个客户端库,进行故障排除可能会比较麻烦。 AEM公开了多种工具来帮助解决此问题。 最重要的工具之一是 重建客户端库 它会强制AEM重新编译任何LESS文件并生成CSS。
- 转储库 — 列出在AEM实例中注册的所有客户端库。 <host>/libs/granite/ui/content/dumplibs.html
- 测试输出 — 允许用户根据类别查看clientlib include的预期HTML输出。 <host>/libs/granite/ui/content/dumplibs.test.html
- 库依赖项验证 — 突出显示任何无法找到的依赖项或嵌入类别。 <host>/libs/granite/ui/content/dumplibs.validate.html
- 重建客户端库 — 允许用户强制AEM重建所有客户端库或使客户端库的缓存失效。 在使用LESS进行开发时,此工具有效,因为这会强制AEM重新编译生成的CSS。 通常,使缓存失效然后执行页面刷新比重新生成所有库更有效。 <host>/libs/granite/ui/content/dumplibs.rebuild.html