設定本機AEM開發環境

設定Adobe Experience Manager、AEM本機開發的指南。 涵蓋本機安裝、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,則可安裝兩種基本執行模式:作者​和​發佈Author runmode是數位行銷人員用來建立和管理內容的環境。 在開發​most​時,您將將程式碼部署至Author例項。 這可讓您建立新頁面,以及新增和設定元件。 AEM Sites是WYSIWYG製作CMS,因此大部分的CSS和JavaScript都可針對製作例項進行測試。

它也是針對本機​Publish​例項的​critical​測試程式碼。 Publish​例項是訪客將與您網站互動的AEM環境。 雖然​Publish​例項與​Author​例項的技術堆疊相同,但設定和權限方面有一些重大差異。 程式碼應先針對本機​Publish​例項​always​進行測試,再升級至更高層級的環境。

步驟

  1. 確保已安裝Java

  2. 獲取AEM QuickStart Jar和a license.properties的副本。

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

    ~/aem-sdk
        /author
        /publish
    
  4. 將QuickStart JAR重新命名為​aem-author-p4502.jar,並將其置於/author目錄下。 在/author目錄下添加​license.properties​檔案。

  5. 製作QuickStart JAR的副本,將其重新命名為​aem-publish-p4503.jar,並將其置於/publish目錄下。 在/publish目錄下添加​license.properties​檔案的副本。

    ~/aem-sdk
        /author
            + aem-author-p4502.jar
            + license.properties
        /publish
            + aem-publish-p4503.jar
            + license.properties
    
  6. 連按兩下​aem-author-p4502.jar​檔案以安裝​Author​例項。 這會啟動製作執行個體,在本機電腦的連接埠​4502​上執行。

    連按兩下​aem-publish-p4503.jar​檔案以安裝​Publish​例項。 這會啟動Publish執行個體,在本機電腦的連接埠​4503​上執行。

    注意

    視您的開發電腦硬體而定,可能很難同時執行​Author和Publish​執行個體。 您很少需要在本機設定上同時執行兩者。

    如需詳細資訊,請參閱部署和維護AEM例項

安裝Apache Maven

Apache Maven 是管理Java專案建置和部署程式的工具。AEM是以Java為基礎的平台,而Maven是管理AEM專案程式碼的標準方式。 當我們說出​AEM Maven專案​或​AEM專案​時,我們指的是Maven專案,其中包含您網站的所有​自訂​程式碼。

所有AEM專案都應以​AEM Project Archetype​的最新版本為基礎建置:https://github.com/Adobe-Marketing-Cloud/aem-project-archetype。 AEM Project Archetype將建立AEM專案的引導,其中包含一些范常式式碼和內容。 AEM Project Archetype也包含已設定用於您專案的​AEM WCM Core Components

注意

開始新專案時,最好使用最新版本的原型。 請記得原型有多個版本,並非所有版本都與舊版AEM相容。

步驟

  1. 下載Apache Maven

  2. 安裝Apache Maven並確保已將安裝新增至您的命令列PATH

    • macOS 使用者可使用Homebrew安裝 Maven
  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
    
  4. 將​adobe-public​設定檔新增至您的Maven settings.xml檔案,以便自動將​repo.adobe.com​新增至maven建置程式。

  5. ~/.m2/settings.xml建立名為settings.xml的檔案(如果尚未存在)。

  6. 根據此處的指示,將​adobe-public​描述檔新增至settings.xml檔案。

    下面列出了示例settings.xml請注意,和的命 settings.xml 名慣例和使用者目錄下 .m2 的位置很重要。

    <settings xmlns="https://maven.apache.org/SETTINGS/1.0.0"
      xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://maven.apache.org/SETTINGS/1.0.0
                          https://maven.apache.org/xsd/settings-1.0.0.xsd">
    <profiles>
     <!-- ====================================================== -->
     <!-- A D O B E   P U B L I C   P R O F I L E                -->
     <!-- ====================================================== -->
         <profile>
             <id>adobe-public</id>
             <activation>
                 <activeByDefault>true</activeByDefault>
             </activation>
             <properties>
                 <releaseRepository-Id>adobe-public-releases</releaseRepository-Id>
                 <releaseRepository-Name>Adobe Public Releases</releaseRepository-Name>
                 <releaseRepository-URL>https://repo.adobe.com/nexus/content/groups/public</releaseRepository-URL>
             </properties>
             <repositories>
                 <repository>
                     <id>adobe-public-releases</id>
                     <name>Adobe Public Repository</name>
                     <url>https://repo.adobe.com/nexus/content/groups/public</url>
                     <releases>
                         <enabled>true</enabled>
                         <updatePolicy>never</updatePolicy>
                     </releases>
                     <snapshots>
                         <enabled>false</enabled>
                     </snapshots>
                 </repository>
             </repositories>
             <pluginRepositories>
                 <pluginRepository>
                     <id>adobe-public-releases</id>
                     <name>Adobe Public Repository</name>
                     <url>https://repo.adobe.com/nexus/content/groups/public</url>
                     <releases>
                         <enabled>true</enabled>
                         <updatePolicy>never</updatePolicy>
                     </releases>
                     <snapshots>
                         <enabled>false</enabled>
                     </snapshots>
                 </pluginRepository>
             </pluginRepositories>
         </profile>
    </profiles>
     <activeProfiles>
         <activeProfile>adobe-public</activeProfile>
     </activeProfiles>
    </settings>
    
  7. 執行下列命令,確認​adobe-public​設定檔是否作用中:

    $ mvn help:effective-settings
    ...
    <activeProfiles>
        <activeProfile>adobe-public</activeProfile>
    </activeProfiles>
    <pluginGroups>
        <pluginGroup>org.apache.maven.plugins</pluginGroup>
        <pluginGroup>org.codehaus.mojo</pluginGroup>
    </pluginGroups>
    </settings>
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD SUCCESS
    [INFO] ------------------------------------------------------------------------
    [INFO] Total time:  0.856 s
    

    如果您未看到​adobe-public,表示~/.m2/settings.xml檔案中未正確參考Adobe存放庫。 請重新造訪先前的步驟,並確認settings.xml檔案是否參考Adobe存放庫。

設定整合的開發環境

整合開發環境或IDE是一個應用程式,它結合了文本編輯器、語法支援和生成工具。 根據您正在執行的開發類型,一個IDE可能比另一個IDE更好。 無論使用什麼IDE,都必須能夠定期將​push​代碼發送到本地AEM實例以測試它。 此外,請務必從本機AEM例項將​pull​設定偶爾匯入AEM專案,以便持續存在於Git之類的原始碼控制管理系統。

以下是一些與AEM開發搭配使用的較受歡迎IDE,以及顯示與本機AEM例項整合的對應影片。

注意

WKND專案已更新為預設,可以以AEM形式運作。 已更新為向後相容於6.5/6.4。 如果使用AEM 6.5或6.4,請將classic描述檔附加至任何Maven命令。

$ mvn clean install -PautoInstallSinglePackage -Pclassic

使用IDE時,請務必檢查Maven配置檔案頁簽中的classic

Maven設定檔標籤

IntelliJ Maven配置檔案

Eclipse IDE

Eclipse IDE​是Java開發中較常用的IDE之一,這在很大程度上是因為它是開放原始碼,而​free! Adobe為Eclipse提供​AEM Developer Tools​外掛程式,讓使用良好的GUI更輕鬆地開發,以便將程式碼與本機AEM例項同步。 對於剛接觸AEM的開發人員,建議使用Eclipse IDE,這在很大程度上是因為AEM Developer Tools支援GUI。

安裝與設定

  1. 下載並安裝Eclipse IDE for 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​是功能強大的IDE,用於專業Java開發。 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 Code已快速成為前端開發人員最喜 愛的工 具,具有增強的JavaScript支援、 Intellisense以及瀏覽器偵錯支援。Visual Studio Code 是開放原始碼、免費、有許多強大擴充功能。Visual Studio Code 可進行設定,以便透過Adobe工具repo 與AEM整合。 此外,還可安裝數個社群支援的擴充功能,以與AEM整合。

Visual Studio Code 前端開發人員最適合用來撰寫CSS/LESS和JavaScript程式碼來建立AEM用戶端程式庫。新的AEM開發人員可能不是最佳選擇,因為節點定義(對話方塊、元件)都需要以原始XML編輯。 Visual Studio Code有數個可用的Java擴充功能,但如果主要執行Java開發Eclipse IDE或IntelliJ,則可能偏好使用。

重要連結

  • 下載Visual Studio代碼
  • repo - JCR內容的類FTP工具
  • aemfed — 加速AEM前端工作流程
  • AEM Sync - Visual Studio Code的社群支援*擴充功能
  • 00:30 — 導入Maven項目
  • 00:53 — 使用Maven建立和部署原始碼
  • 04:03 — 使用Repo命令列工具推送程式碼變更
  • 08:29 — 使用Repo命令列工具提取程式碼變更
  • 10:40 — 使用修正工具推送程式碼變更
  • 14:24 — 疑難排解,重建用戶端程式庫

CRXDE Lite

CRXDE 程式庫是以瀏覽器為基礎的AEM存放庫檢視。CRXDE Lite 內嵌於AEM中,可讓開發人員執行標準開發工作,例如編輯檔案、定義元件、對話方塊和範本。CRXDE Lite 並非 ​** 完整的開發環境,但作為除錯工具非常有效。CRXDE Lite 在擴充或只是了解程式碼基底以外的產品程式碼時,此功能相當實用。CRXDE Lite 提供存放庫的強大檢視,以及有效測試及管理權限的方法。

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

疑難排解

說明! 我的程式碼沒用!和所有開發一樣,有時候(可能有許多次)您的程式碼無法如預期運作。 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 Manager Web控制台:http://localhost:4502/system/console/bundles並搜尋您的套件。 確保該包具有​活動​狀態。 請參閱下文,了解與疑難排解​Installed​狀態的套件組合相關的詳細資訊。

檢查日誌

AEM是動態平台,會在​error.log​中記錄許多有用資訊。 在已安裝AEM的位置找到​error.log:< 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​配置為log INFO​語句。 如果要更改日誌級別,可以轉至日誌支援:http://localhost:4502/system/console/slinglog。 您也可能會發現​error.log​太健全。 您可以使用日誌支援來配置僅指定Java包的日誌陳述式。 這是專案的最佳作法,可輕鬆將自訂程式碼問題與OOTB AEM平台問題區隔開來。

在AEM中記錄設定

套件組合處於「已安裝」狀態

所有套件組合(不包括片段)都應處於​Active​狀態。 如果您在Installed狀態中看到程式碼套件組合,則需要解決問題。 多數情況下,這是相依性問題:

AEM中的套件組合錯誤

在上述螢幕擷取中,WKND Core bundle是Installed狀態。 這是因為套件組合的版本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模型註冊

AEM元件應一律以Sling Model作為備份,以封裝任何業務邏輯,並確保HTL呈現指令碼保持乾淨。 如果發生無法找到Sling模型的問題,從主控台檢查Sling Models可能會有所幫助:http://localhost:4502/system/console/status-slingmodels。 這會告訴您是否已註冊Sling模型,以及系結的資源類型(元件路徑)。

Sling模型狀態

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

CSS或JavaScript問題

對於大部分的CSS和JavaScript問題,使用瀏覽器的開發工具是疑難排解的最有效方式。 若要針對AEM製作例項進行開發時縮小問題,檢視頁面「已發佈」會很有幫助。

CSS或JS問題

開啟Page Properties功能表,然後按一下View as Published。 這會開啟頁面,不使用AEM編輯器,且查詢參數設為​wcmmode=disabled。 這可有效停用AEM編寫UI,並讓疑難排解/偵錯前端問題更輕鬆。

開發前端程式碼時,另一個常見的問題是CSS/JS正在載入,這是舊有或過時的問題。 首先,請確定瀏覽器歷史記錄已清除,並視需要啟動無痕瀏覽器或全新工作階段。

調試客戶端庫

使用不同的類別和內嵌方法來包含多個用戶端程式庫,疑難排解可能會很麻煩。 AEM會公開數種工具,以提供相關協助。 最重要的工具之一是重建客戶端庫 ,這將強制AEM重新編譯任何LESS檔案並生成CSS。

  • 傾印Lib — 列出在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除錯

注意

如果您不斷使用Rebuild Client Libraries工具使快取無效,則執行一次重建所有客戶端庫可能是值得的。 這可能需要約15分鐘,但通常可避免日後的快取問題。

本頁內容