ローカル 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 Instances のインストール

ローカルのAEMインスタンスを指す場合、開発者のパーソナルマシン上で実行されているAdobe Experience Managerのコピーについて説明します。 すべて AEMの開発は、まず、ローカルAEMインスタンスに対してコードを記述し、実行することから始める必要があります。

AEMを初めて使用する場合は、次の 2 つの基本的な実行モードをインストールできます。 作成者 および 公開. この 作成者 runmode は、デジタルマーケターがコンテンツの作成と管理に使用する環境です。 ほとんどの場合、開発時には、オーサーインスタンスにコードをデプロイします。 これにより、ページを作成し、コンポーネントを追加および設定できます。 AEM Sitesは WYSIWYG オーサリング CMS なので、ほとんどの CSS と JavaScript をオーサリングインスタンスに対してテストできます。

また、 重要な ローカルに対するテストコード 公開 インスタンス。 この 公開 インスタンスは、web サイトの訪問者がやり取りするAEM環境です。 また、 公開 インスタンスは、 作成者 例えば、設定と権限には大きな違いがあります。 コードはローカルの 公開 インスタンスを上位の環境に昇格する前に使用します。

手順

1. Java™がインストールされていることを確認します。
   • 優先 Java™ JDK 11 (AEM 6.5 以降 )
   • Java™ JDK 8 (AEM 6.5 より前のAEMバージョンの場合 )
2. のコピーを取得 AEM QuickStart Jar と license.properties.
3. 次のようなフォルダー構造をコンピューター上に作成します。

~/aem-sdk
    /author
    /publish

1. 名前を変更 QuickStart JAR の宛先 aem-author-p4502.jar そしてそれをの下に置く /author ディレクトリ。 license.properties ファイルを /author ディレクトリの下に追加します。

2. コピーを作成 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

1. 次をダブルクリックします。 aem-author-p4502.jar インストールするファイル 作成者 インスタンス。 これにより、ポートで実行されるオーサーインスタンスが起動します 4502 ローカルコンピューター上。

次をダブルクリックします。 aem-publish-p4503.jar インストールするファイル 公開 インスタンス。 これにより、ポートで実行されているパブリッシュインスタンスが起動します 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 Project または AEM Project​を使用する場合、 カスタム サイトのコード。

すべてのAEMプロジェクトは、最新バージョンの AEM Project Archetype: https://github.com/adobe/aem-project-archetype. この AEM Project Archetype には、サンプルコードとコンテンツを含んだAEMプロジェクトのブートストラップが用意されています。 この AEM Project Archetype 次を含む AEM WCM Core Components プロジェクトで使用するように設定されています。

手順

1. ダウンロード Apache Maven
2. インストール Apache Maven をクリックし、インストールがコマンドラインに追加されていることを確認します。 PATH.
   • macOS ユーザーは、 Homebrew
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

統合開発環境の設定

統合開発環境または IDE は、テキストエディタ、構文サポート、およびビルドツールを組み合わせたアプリケーションです。 実行している開発の種類によっては、ある IDE が別の IDE よりも優れている場合があります。 IDE に関係なく、定期的に実行できることが重要です プッシュ ローカルのAEMインスタンスにコードを追加してテストします。 時々～することが重要である 取り込む Git などのソース管理システムに保持するために、ローカルAEMインスタンスからAEMプロジェクトに設定します。

ローカルAEMインスタンスとの統合を示す、対応するビデオを含むAEM開発で使用される、より一般的な IDE の例を以下に示します。

$ mvn clean install -PautoInstallSinglePackage -Pclassic

IDE を使用する場合は、必ず classic を設定します。

IntelliJ Maven プロファイル

Eclipse IDE

この Eclipse IDE は、Java™開発用のより一般的な IDE の 1 つで、大部分はオープンソースで、 無料! Adobeは、 AEM Developer Tools​の場合は Eclipse 優れた GUI での開発を容易にし、コードをローカルのAEMインスタンスと同期させる。 この Eclipse IDE は、が GUI をサポートしているので、AEMを初めて使用する開発者には大きく推奨されます。 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=ja

• 00:30 - Maven プロジェクトの読み込み
• 01:24 - Maven を使用してソースコードをビルドしデプロイする
• 04:33 - AEM Developer Tool を使用したプッシュコードの変更
• 10:55 - AEM Developer Tool を使用してコード変更をプルします。
• 13:12 - Eclipse の統合デバッグツールの使用

IntelliJ IDEA

この IntelliJ IDEA は、Java™のプロフェッショナル開発用の強力な IDE です。 IntelliJ IDEA 2 種類の味が付く。 無料 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 - Repo を使用して変更をプルする
• 17:25 - IntelliJ IDEA の統合デバッグツールの使用

Visual Studio Code

Visual Studio Code はすぐに～の好きな道具になっている フロントエンド開発者 強化された JavaScript サポートを使用する Intellisense、およびブラウザーのデバッグサポート。 Visual Studio Code は、多くの強力な拡張機能を備えた、無料のオープンソースです。 Visual Studio Code は、Adobeツールを使用してAEMと統合するように設定できます。 repo. また、AEMと統合するためにインストールできる、コミュニティでサポートされる拡張機能もいくつかあります。

Visual Studio Code は、主に CSS/LESS やAEMクライアントライブラリを作成する JavaScript コードを記述するフロントエンド開発者に最適です。 ノード定義（ダイアログ、コンポーネント）は raw XML で編集する必要があるので、このツールは新しいAEM開発者にとって最適な選択肢ではない可能性があります。 では、複数の Java™拡張機能を使用できます Visual Studio Codeただし、主に Java™開発を行う場合は Eclipse IDE または IntelliJ の方が望ましい場合もあります。

重要なリンク

• 🔗Visual Studio Code のダウンロード
• repo - JCR コンテンツ用の FTP に似たツール
• aemfed - AEMフロントエンドワークフローのスピードアップ
• AEM同期 — サポートされるコミュニティ* Visual Studio Code の拡張

• 00:30 - Maven プロジェクトの読み込み
• 00:53 - Maven でソースコードをビルドしてデプロイする
• 04:03 - Repo コマンドラインツールを使用したプッシュコードの変更
• 08:29 - Repo コマンドラインツールを使用したプルコードの変更
• 10:40 - aemfed ツールを使用したプッシュコードの変更
• 14:24 — トラブルシューティング、クライアントライブラリの再構築

CRXDE Lite

CRXDE Lite は、AEMリポジトリのブラウザーベースのビューです。 CRXDE Lite はAEMに埋め込まれており、開発者は、ファイルの編集、コンポーネント、ダイアログ、テンプレートの定義など、標準的な開発タスクを実行できます。 CRXDE Lite が not は完全な開発環境であることを目的としていますが、デバッグツールとして効果的です。 CRXDE Lite は、を拡張する場合や、コードベース外の製品コードを単に理解する場合に役立ちます。 CRXDE Lite は、リポジトリを強力に表示し、権限を効果的にテストおよび管理する方法を提供します。

CRXDE Lite コードのテストとデバッグを他の IDE と一緒に使用する必要がありますが、主な開発ツールとしては使用しないでください。 構文のサポートに制限があり、オートコンプリート機能はなく、ソース管理システムとの統合も制限されています。

トラブルシューティング

ヘルプ! コードが機能しません。 すべての開発と同様に、コードが期待どおりに動作しない場合もあります（おそらく多くの場合）。 AEMは強力なプラットフォームですが、大きな力を持ち、非常に複雑になります。 トラブルシューティングおよびトラッキングの問題を追跡する際の概要を次に示します（ただし、問題が発生する可能性のあるすべての問題のリストからは程遠いものです）。

コードのデプロイメントを検証

問題が発生した場合は、まず、コードがAEMに正常にデプロイおよびインストールされていることを確認します。

1. チェック パッケージマネージャー コードパッケージがアップロードされ、インストールされていることを確認するには、次の手順を実行します。 http://localhost:4502/crx/packmgr/index.jsp. タイムスタンプを調べて、パッケージが最近インストールされたことを確認します。
2. 次のようなツールを使用して増分ファイル更新を行う場合 Repo または AEM Developer Tools, checkCRXDE Lite ファイルがローカルのAEMインスタンスにプッシュされ、ファイルの内容が更新されたことを示します。 http://localhost:4502/crx/de/index.jsp
3. バンドルがアップロードされたことを確認します。 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™パッケージのログ文を設定する場合。 これは、カスタムコードの問題を OOTB AEMプラットフォームの問題と簡単に分けるための、プロジェクトのベストプラクティスです。

バンドルはインストール済み状態です

すべてのバンドル（フラグメントを除く）は、 アクティブ 状態。 コードバンドルが インストール済み の場合は、解決する必要がある問題があります。 ほとんどの場合、依存関係の問題です。

上のスクリーンショットでは、 WKND Core bundle は インストール済み 状態。 これは、バンドルがの別のバージョンを期待しているためです com.adobe.cq.wcm.core.components.models がAEMインスタンスで使用可能な場合。

使用できる便利なツールは、 依存関係ファインダー: http://localhost:4502/system/console/depfinder. AEMインスタンスで使用可能なバージョンを調べるには、Java™パッケージ名を追加します。

上記の例を続けて、AEMインスタンスにインストールされているバージョンが次のようになっていることがわかります。 12.2 vs 12.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 モデルが登録されているかどうか、および関連付けられているリソースタイプ（コンポーネントパス）がわかります。

登録を表示します Sling Model, BylineImpl コンポーネントのリソースタイプ ( wknd/components/content/byline.

CSS または JavaScript の問題

CSS や JavaScript のほとんどの問題に対して、ブラウザーの開発ツールを使用することが、最も効果的なトラブルシューティング方法です。 AEMオーサーインスタンスに対して開発する際の問題を絞り込むには、「公開済みとして」ページを表示すると便利です。

を開きます。 ページプロパティ メニューとクリック 公開済みとして表示. AEM Editor がなく、クエリパラメーターがに設定されたページが開きます。 wcmmode=disabled. これにより、AEMオーサリング UI が効果的に無効になり、フロントエンドの問題のトラブルシューティングやデバッグが容易になります。

フロントエンドコードの開発時に発生する別の一般的な問題として、古い、または古い CSS/JS が読み込まれている場合があります。 最初の手順として、ブラウザー履歴がクリアされていることを確認し、必要に応じて匿名ブラウザーまたは新しいセッションを開始します。

クライアントライブラリのデバッグ

カテゴリや埋め込みの様々な方法で複数のクライアントライブラリを含めると、トラブルシューティングが面倒になる場合があります。 AEM はそのためにいくつかのツールを公開しています。最も重要なツールの 1 つは、 クライアントライブラリの再構築 これにより、AEMはすべての LESS ファイルを再コンパイルし、CSS を生成します。

• ライブラリのダンプ - AEMインスタンスに登録されているすべてのクライアントライブラリをリストします。 <host>/libs/granite/ui/content/dumplibs.html
• 出力テスト - カテゴリ別を含む、clientlib の予想される HTML 出力を確認します。<host>/libs/granite/ui/content/dumplibs.test.html
• ライブラリの依存関係の検証 - 見つからないすべての依存関係または埋め込みカテゴリを強調表示します。<host>/libs/granite/ui/content/dumplibs.validate.html
• クライアントライブラリの再構築 - AEMに対し、すべてのクライアントライブラリを強制的に再構築するか、クライアントライブラリのキャッシュを無効にすることができます。 このツールでは、AEM が生成された CSS を強制的に再コンパイルするので、LESS を使用した開発において特に効果的です。一般に、キャッシュを無効にしてからページの更新を実行する方が、すべてのライブラリを再構築するよりも効果的です。 <host>/libs/granite/ui/content/dumplibs.rebuild.html

Business.Adobe.com リソース

Automated Onboarding Style System Cms Cloud Targeted Content Customer Communications Theme Editor