設定本地開發AEM環境

Adobe Experience Manager地方開發指南AEM。 介紹本地安裝、Apache Maven、整合開發環境和調試/故障排除等重要主題。 開發 Eclipse IDE。 CRXDE Lite。 Visual Studio Code 和IntelliJ 中。

概觀

建立地方發展環境是Adobe Experience Manager或發展的第一步AEM. 請花時間建立一個高質量的開發環境,以提高您的生產力並更快地編寫更好的代碼。 把當地的AEM發展環境分為四個方面:

  • 本地實AEM例
  • Apache Maven 項目
  • 整合開發環境(IDE)
  • 疑難排解

安裝本地實AEM例

當我們指的是本AEM地實例時,我們指的是開發人員個人電腦上運行的Adobe Experience Manager副本。 全部 開AEM發應首先編寫並運行針對本地實例的AEM代碼。

如果您是新用戶AEM,則可以安裝兩種基本運行模式: 作者發佈。 的 作者 運行模式 是數字營銷人員用來建立和管理內容的環境。 開發時 將代碼部署到Author實例的時間。 這允許您建立新頁面以及添加和配置元件。 AEM Sites是WYSIWYG的創作CMS,因此,大多數CSS和JavaScript都可以針對創作實例進行測試。

關鍵 test本地代碼 發佈 實例。 的 發佈 實例是訪AEM問您網站的人員將與其交互的環境。 當 發佈 實例與 作者 例如,在配置和權限方面存在一些主要區別。 代碼應 總是 經過本地測試 發佈 在升級到更高級別環境之前執行實例。

步驟

  1. 確保 爪哇 已安裝。

  2. 獲取副本 快AEM速啟動Jar和 license.properties

  3. 在電腦上建立資料夾結構,如下所示:

    ~/aem-sdk
        /author
        /publish
    
  4. 更名 QuickStart JAR到 aem-author-p4502.jar 放在下面 /author 的子菜單。 添加 license.properties 檔案下方 /author 的子菜單。

  5. 複製 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
    
  6. 按兩下 aem-author-p4502.jar 檔案以安裝 作者 實例。 這將啟動在埠上運行的作者實例 4502 在本地電腦上。

    按兩下 aem-publish-p4503.jar 檔案以安裝 發佈 實例。 這將啟動在埠上運行的發佈實例 4503 在本地電腦上。

    注意

    根據開發機器的硬體,可能很難同時使用 作者和發佈 同時運行的實例。 您很少需要在本地安裝程式上同時運行這兩個程式。

    有關詳細資訊,請參閱 部署和維護實AEM例

安裝Apache Maven

Apache Maven 是用於管理基於Java的項目的生成和部署過程的工具。 是AEM一個基於Java的平台 Maven 是管理項目代碼的標準方AEM法。 當我們說 馬文AEM項目 或者 項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

  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地實例,以便test它。 偶爾也很重要 將本地實AEM例配置AEM到項目中,以保持到原始碼管理系統(如Git)。

下面是一些較為流行的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配置檔案」頁籤

IntelliJ Maven配置檔案

Eclipse IDE

Eclipse IDE 是Java開發中比較流行的IDE之一,這在很大程度上是因為它是開源的, 免費! Adobe提供插件, AEM Developer Tools, Eclipse 使用好的GUI更輕鬆地開發,以便將代碼與本地實例AEM同步。 的 Eclipse 建議新開發人員使用IDEAEM,這在很大程度上是因為 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-Hant?lang=zh-Hant
  • 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

  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 — 使用回購推動更改
  • 14:39 — 利用回購協定進行更改
  • 17:25 — 使用IntelliJ IDEA的整合調試工具

Visual Studio Code

Visual Studio代碼 很快成為了 前端開發人員 支援增強的JavaScript, Intellisense以及瀏覽器調試支援。 Visual Studio Code 是開源的,免費的,有很多強大的擴展。 Visual Studio Code 可以配合一AEM個Adobe工具, 回購 還有幾個社區支援的擴展可以安裝以與整合AEM。

Visual Studio Code 對於主要編寫CSS/LESS和JavaScript代碼以建立客戶端庫的前端開發人員來說,這是一個絕AEM佳選擇。 此工具可能不是新開發人員的最佳選擇AEM,因為節點定義(對話框、元件)都需要以原始XML進行編輯。 有幾個Java擴展可供 Visual Studio Code但是,如果主要進行Java開發 Eclipse IDE 或 IntelliJ 可能是首選。

重要連結

  • 下載 Visual Studio代碼
  • 回購 — 類似FTP的JCR內容工具
  • 美國 — 加快前AEM端工作流
  • 同AEM步 — 支援的社區* Visual Studio代碼擴展
  • 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 提供了儲存庫的強大視圖,以及有效test和管理權限的方法。

CRXDE Lite 應始終與其他IDE一起使用,以test和調試代碼,但永遠不應將其用作主開發工具。 它的語法支援有限,沒有自動完成功能,與原始碼管理系統的整合也有限。

疑難排解

說明! 我的密碼無效! 與所有發展一樣,有時(可能很多),您的代碼會不如預期那樣運行。 是AEM一個強大的平台,但是……非常複雜。 以下是故障排除和跟蹤問題的幾個高級起點(但遠遠不是可能出錯的詳盡清單):

驗證代碼部署

遇到問題時,一個好的第一步是驗證代碼是否已成功部署並安裝到AEM。

  1. 檢查 包管理器 要確保已上載並安裝代碼包,請執行以下操作: http://localhost:4502/crx/packmgr/index.jsp。 檢查時間戳以驗證最近已安裝軟體包。
  2. 如果使用類似工具執行增量檔案更新 Repo 或 AEM Developer Tools。 檢查CRXDE Lite 已將檔案推送到本地實例AEM並更新檔案內容: http://localhost:4502/crx/de/index.jsp
  3. 檢查是否上載了包 看到與OSGi捆綁包中的Java代碼相關的問題。 開啟 Adobe Experience ManagerWeb控制台: http://localhost:4502/system/console/bundles 搜索你的捆綁包。 確保捆綁包具有 活動 狀態。 有關對中的捆綁包進行故障排除的詳細資訊,請參閱下面 已安裝 狀態。

檢查日誌

AEM是一個聊天平台,並在 錯誤.log。 的 錯誤.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);
}

預設情況下, 錯誤.log 已配置為日誌 INFO 的下界。 如果要更改日誌級別,可以通過轉到 日誌支援: http://localhost:4502/system/console/slinglog。 您可能還會發現 錯誤.log 太無聊了。 您可以使用 日誌支援 為指定的Java包配置日誌語句。 這是項目的最佳做法,以便輕鬆將自定義代碼問題與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.212.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 Model ,以及它與哪種資源類型(元件路徑)關聯。

吊具模型狀態

顯示註冊 Sling Model。 BylineImpl 與元件資源類型關聯的 wknd/components/content/byline

CSS或JavaScript問題

對於大多數CSS和JavaScript問題,使用瀏覽器的開發工具是最有效的故障排除方法。 要在針對作者實例進行開發時縮AEM小問題範圍,查看「已發佈」頁面會有所幫助。

CSS或JS問題

開啟 頁面屬性 的 查看為已發佈。 此操作將在沒有編輯器AEM且查詢參數設定為的情況下開啟頁面 wcmmode=已禁用。 這將有效地禁AEM用創作UI,並使故障排除/調試前端問題變得容易得多。

開發前端代碼時遇到的另一個常見問題是CSS/JS已過時或正在載入。 作為第一步,請確保已清除瀏覽器歷史記錄,並在必要時啟動隱藏瀏覽器或新會話。

調試客戶端庫

使用不同的類別和嵌入方法來包括多個客戶端庫,可能會很麻煩進行故障排除。 公AEM開了幾種工具來幫助處理。 最重要的工具之一是 重建客戶端庫 這將強AEM制重新編譯任何LESS檔案並生成CSS。

  • 轉儲清單 — 列出實例中註冊的所有客戶端AEM庫。 <host>/libs/granite/ui/content/dumplibs.html
  • Test輸出 — 允許用戶查看客戶端lib的預期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

調試客戶端

注意

如果您經常必須使用 重建客戶端庫 工具對所有客戶端庫進行一次重建可能是值得的。 這可能需要大約15分鐘,但通常可以消除將來的任何快取問題。

本頁內容