設定本機AEM開發環境

為AEM Adobe Experience Manager設定本機開發的指南。 涵蓋本機安裝、Apache Maven、整合式開發環境和偵錯/疑難排解等重要主題。 討論使用​ Eclipse IDE、CRXDE Lite、Visual Studio Code和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 ​執行個體。 這會啟動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。

步驟

$ 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執行個體以進行測試。 請務必不時從本機AEM執行個體將​ 提取 ​設定至您的AEM專案，以便保留至原始檔控制管理系統（例如Git）。

以下是一些與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執行個體同步。 Eclipse IDE建議新加入AEM的開發人員使用，主要是因為AEM Developer Tools支援GUI。

安裝及設定

IntelliJ IDEA

IntelliJ IDEA ​是適用於專業Java™開發的強大IDE。 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 ​太常聊。 您可以使用Log Support，為指定的Java™封裝設定記錄陳述式。 這是專案的最佳實務，以便輕鬆地將自訂程式碼問題與OOTB AEM平台問題分開。

套件組合處於已安裝狀態 bundle-active

所有組合（不包括片段）都應處於​ 作用中 ​狀態。 如果您看到程式碼套件組合處於已安裝狀態，表示有問題需要解決。 大多數時候這會是相依性問題：

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，也就是組合所預期的版本。 從那裡，您可以回溯工作，檢視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。