Adobe Experience Manager、AEM用のローカル開発の設定に関するガイド。 ローカルインストール、Apache Maven、統合開発環境、デバッグ/トラブルシューティングに関する重要なトピックについて説明します。 を使用した開発 Eclipse IDE、CRXDE Lite、Visual Studio Code、および IntelliJ を参照してください。
Adobe Experience ManagerまたはAEM向けにローカル開発を開発する際は、開発環境の設定が最初のステップです。 生産性を高め、より高速なコードを記述するには、品質の高い開発環境の設定に時間をかけます。 AEMローカル開発環境は、次の 4 つの領域に分割できます。
ローカルのAEMインスタンスを指す場合、開発者のパーソナルマシン上で実行されているAdobe Experience Managerのコピーについて説明します。 すべて AEMの開発は、まず、ローカルAEMインスタンスに対してコードを記述し、実行することから始める必要があります。
AEMを初めて使用する場合は、次の 2 つの基本的な実行モードをインストールできます。 作成者 および 公開. この 作成者 runmode は、デジタルマーケターがコンテンツの作成と管理に使用する環境です。 ほとんどの場合、開発時には、オーサーインスタンスにコードをデプロイします。 これにより、ページを作成し、コンポーネントを追加および設定できます。 AEM Sitesは WYSIWYG オーサリング CMS なので、ほとんどの CSS と JavaScript をオーサリングインスタンスに対してテストできます。
また、 重要な ローカルに対するテストコード 公開 インスタンス。 この 公開 インスタンスは、web サイトの訪問者がやり取りする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-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 は、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 プロジェクトで使用するように設定されています。
新しいプロジェクトを開始する際には、最新バージョンのアーキタイプを使用することをお勧めします。 アーキタイプには複数のバージョンがあり、すべてのバージョンが以前のバージョンのAEMと互換性があるわけではないことに注意してください。
PATH
.
$ 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インスタンスにコードを追加してテストします。 時々~することが重要である 取り込む Git などのソース管理システムに保持するために、ローカルAEMインスタンスからAEMプロジェクトに設定します。
ローカルAEMインスタンスとの統合を示す、対応するビデオを含むAEM開発で使用される、より一般的な IDE の例を以下に示します。
WKND プロジェクトが、AEM as a Cloud Serviceで動作するようにデフォルトに更新されました。 更新されました 6.5/6.4 との下位互換性. AEM 6.5 または 6.4 を使用している場合は、classic
プロファイルをすべての Maven コマンドに追加します。
$ mvn clean install -PautoInstallSinglePackage -Pclassic
IDE を使用する場合は、必ず classic
を設定します。
IntelliJ Maven プロファイル
この Eclipse IDE は、Java™開発用のより一般的な IDE の 1 つで、大部分はオープンソースで、 無料! Adobeは、 AEM Developer Toolsの場合は Eclipse 優れた GUI での開発を容易にし、コードをローカルのAEMインスタンスと同期させる。 この Eclipse IDE は、が GUI をサポートしているので、AEMを初めて使用する開発者には大きく推奨されます。 AEM Developer Tools.
この IntelliJ IDEA は、Java™のプロフェッショナル開発用の強力な IDE です。 IntelliJ IDEA 2 種類の味が付く。 無料 Community 版と商業版(有料) Ultimate バージョン。 無料 Community のバージョン IntellIJ IDEA は、より多くのAEM開発に十分ですが、 Ultimate 機能セットを展開します。.
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 の方が望ましい場合もあります。
CRXDE Lite は、AEMリポジトリのブラウザーベースのビューです。 CRXDE Lite はAEMに埋め込まれており、開発者は、ファイルの編集、コンポーネント、ダイアログ、テンプレートの定義など、標準的な開発タスクを実行できます。 CRXDE Lite が not は完全な開発環境であることを目的としていますが、デバッグツールとして効果的です。 CRXDE Lite は、を拡張する場合や、コードベース外の製品コードを単に理解する場合に役立ちます。 CRXDE Lite は、リポジトリを強力に表示し、権限を効果的にテストおよび管理する方法を提供します。
CRXDE Lite コードのテストとデバッグを他の IDE と一緒に使用する必要がありますが、主な開発ツールとしては使用しないでください。 構文のサポートに制限があり、オートコンプリート機能はなく、ソース管理システムとの統合も制限されています。
ヘルプ! コードが機能しません。 すべての開発と同様に、コードが期待どおりに動作しない場合もあります(おそらく多くの場合)。 AEMは強力なプラットフォームですが、大きな力を持ち、非常に複雑になります。 トラブルシューティングおよびトラッキングの問題を追跡する際の概要を次に示します(ただし、問題が発生する可能性のあるすべての問題のリストからは程遠いものです)。
問題が発生した場合は、まず、コードがAEMに正常にデプロイおよびインストールされていることを確認します。
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(依存関係の問題の理由)
AEMコンポーネントは、 Sling Model :あらゆるビジネスロジックをカプセル化し、HTL レンダリングスクリプトをクリーンなままにします。 Sling モデルが見つからない問題が発生した場合は、 Sling Models コンソールから: http://localhost:4502/system/console/status-slingmodels. これにより、Sling モデルが登録されているかどうか、および関連付けられているリソースタイプ(コンポーネントパス)がわかります。
登録を表示します Sling Model, BylineImpl
コンポーネントのリソースタイプ ( wknd/components/content/byline
.
CSS や JavaScript のほとんどの問題に対して、ブラウザーの開発ツールを使用することが、最も効果的なトラブルシューティング方法です。 AEMオーサーインスタンスに対して開発する際の問題を絞り込むには、「公開済みとして」ページを表示すると便利です。
を開きます。 ページプロパティ メニューとクリック 公開済みとして表示. AEM Editor がなく、クエリパラメーターがに設定されたページが開きます。 wcmmode=disabled. これにより、AEMオーサリング UI が効果的に無効になり、フロントエンドの問題のトラブルシューティングやデバッグが容易になります。
フロントエンドコードの開発時に発生する別の一般的な問題として、古い、または古い CSS/JS が読み込まれている場合があります。 最初の手順として、ブラウザー履歴がクリアされていることを確認し、必要に応じて匿名ブラウザーまたは新しいセッションを開始します。
カテゴリや埋め込みの様々な方法で複数のクライアントライブラリを含めると、トラブルシューティングが面倒になる場合があります。 AEM はそのためにいくつかのツールを公開しています。最も重要なツールの 1 つは、 クライアントライブラリの再構築 これにより、AEMはすべての LESS ファイルを再コンパイルし、CSS を生成します。
常に クライアントライブラリの再構築 ツールを使用する場合は、すべてのクライアントライブラリを 1 回再構築するだけの価値がある場合があります。 この処理には約 15 分かかりますが、通常は将来のキャッシュの問題が解消されます。