ドキュメント AEM AEM チュートリアル AEM Sites WKND チュートリアル

プロジェクトのセットアップ project-setup

Last update: Thu Oct 10 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
AEM プロジェクトアーキタイプ

作成対象：

初心者
開発者

このチュートリアルでは、Adobe Experience Manager サイトのコードと設定を管理するための Maven Multi Module Project の作成について説明します。

前提条件 prerequisites

ローカル開発環境のセットアップに必要なツールと手順を確認します。Adobe Experience Manager の新しいインスタンスがローカルで使用でき、必要なサービスパック以外、その他のサンプル/デモパッケージがインストールされていないことを確認します。

目的 objective

Maven アーキタイプを使用して新しい AEM プロジェクトを生成する方法を説明します。
AEM プロジェクトアーキタイプで生成される様々なモジュールと、それらが連携する仕組みを理解します。
AEM コアコンポーネントが AEM プロジェクトにどのように含まれるかを理解します。

作ろうとしているもの what-build

https://video.tv.adobe.com/v/36015?quality=12&learn=on&captions=jpn

この章では、AEM プロジェクトアーキタイプを使用して、新しい Adobe Experience Manager プロジェクトを生成します。AEM プロジェクトには、Sites の実装に使用する完全なコード、コンテンツ、設定が含まれています。この章で生成されるプロジェクトは、WKND サイトの実装の基礎となり、今後の章で構築されます。

Maven プロジェクトについて - Apache Maven は、プロジェクトを構築するためのソフトウェア管理ツールです。すべての Adobe Experience Manager の実装では、Maven プロジェクトを使用して、AEM 上にカスタムコードを作成、管理およびデプロイします。

Maven アーキタイプについて - Maven アーキタイプは、新しいプロジェクトを生成するためのテンプレートまたはパターンです。AEM プロジェクトアーキタイプを使用すると、カスタム名前空間で新しいプロジェクトを生成し、ベストプラクティスに従ったプロジェクト構造を含め、プロジェクトの開発を大幅に高速化することができます。

プロジェクトの作成 create

AEM 用の Maven マルチモジュールプロジェクトを作成するには、いくつかのオプションがあります。このチュートリアルでは、Maven AEM プロジェクトアーキタイプ 35 を使用します。Cloud Manager は、AEM アプリケーションプロジェクトの作成を開始するための UI ウィザードも提供します。Cloud Manager UI で生成される基になるプロジェクトの結果は、アーキタイプを直接使用する場合と同じ構造になります。

NOTE

このチュートリアルでは、アーキタイプのバージョン 35 を使用します。最新の バージョンのアーキタイプを使用して新しいプロジェクトを生成することは、常にベストプラクティスです。

次の一連の手順は、UNIX® ベースのコマンドラインターミナルを使用して行いますが、Windows ターミナルを使用する場合も同様です。

コマンドラインターミナルを開きます。Maven がインストールされていることを確認します。

code language-shell
`$ mvn --version Apache Maven 3.6.2 Maven home: /Library/apache-maven-3.6.2 Java version: 11.0.4, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.4.jdk/Contents/Home`

AEM プロジェクトを生成するディレクトリに移動します。これには、プロジェクトのソースコードを管理する任意のディレクトリを指定できます。例えば、ユーザーのホームディレクトリの下にある code という名前のディレクトリで次の操作を行います。

code language-shell
`$ cd ~/code`

以下をコマンドラインに貼り付けて、バッチモードでプロジェクトを生成します。

code language-shell

code language-shell
`mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \ -D archetypeGroupId=com.adobe.aem \ -D archetypeArtifactId=aem-project-archetype \ -D archetypeVersion=39 \ -D appTitle="WKND Sites Project" \ -D appId="wknd" \ -D groupId="com.adobe.aem.guides" \ -D artifactId="aem-guides-wknd" \ -D package="com.adobe.aem.guides.wknd" \ -D version="0.0.1-SNAPSHOT" \ -D aemVersion="cloud"`

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \
    -D archetypeGroupId=com.adobe.aem \
    -D archetypeArtifactId=aem-project-archetype \
    -D archetypeVersion=39 \
    -D appTitle="WKND Sites Project" \
    -D appId="wknd" \
    -D groupId="com.adobe.aem.guides" \
    -D artifactId="aem-guides-wknd" \
    -D package="com.adobe.aem.guides.wknd" \
    -D version="0.0.1-SNAPSHOT" \
    -D aemVersion="cloud"

note note
NOTE
AEM 6.5.14+ をターゲットするには、`aemVersion="cloud"` を `aemVersion="6.5.14"` に置き換えます。
また、AEM プロジェクトアーキタイプ／使用状況を参照して常に最新の `archetypeVersion` を使用します。

プロジェクトの設定に使用できるプロパティの完全なリストは、こちらにあります。

次のフォルダーおよびファイル構造が、ローカルファイルシステム上の Maven アーキタイプによって生成されます。

code language-plain

code language-plain
`~/code/ \|--- aem-guides-wknd/ \|--- all/ \|--- core/ \|--- ui.apps/ \|--- ui.apps.structure/ \|--- ui.config/ \|--- ui.content/ \|--- ui.frontend/ \|--- ui.tests / \|--- it.tests/ \|--- dispatcher/ \|--- pom.xml \|--- README.md \|--- .gitignore`

 ~/code/
    |--- aem-guides-wknd/
        |--- all/
        |--- core/
        |--- ui.apps/
        |--- ui.apps.structure/
        |--- ui.config/
        |--- ui.content/
        |--- ui.frontend/
        |--- ui.tests /
        |--- it.tests/
        |--- dispatcher/
        |--- pom.xml
        |--- README.md
        |--- .gitignore

プロジェクトをデプロイしてビルドします。 build

プロジェクトコードをビルドして、AEM のローカルインスタンスにデプロイします。

ポート 4502 でローカルに実行されている AEM のオーサーインスタンスがあることを確認します。

コマンドラインから aem-guides-wknd プロジェクトディレクトリに移動します。

code language-shell
`$ cd aem-guides-wknd`

以下のコマンドを実行してプロジェクト全体をビルドし、AEM にデプロイします。

code language-shell
`$ mvn clean install -PautoInstallSinglePackage`

ビルドは 1 分程度かかり、最後に次のメッセージが表示されます。

code language-none

code language-none
... [INFO] ------------------------------------------------------------------------ [INFO] Reactor Summary for WKND Sites Project 0.0.1-SNAPSHOT: [INFO] [INFO] WKND Sites Project ................................. SUCCESS [ 0.113 s] [INFO] WKND Sites Project - Core .......................... SUCCESS [ 3.136 s] [INFO] WKND Sites Project - UI Frontend ................... SUCCESS [ 4.461 s] [INFO] WKND Sites Project - Repository Structure Package .. SUCCESS [ 0.359 s] [INFO] WKND Sites Project - UI apps ....................... SUCCESS [ 1.732 s] [INFO] WKND Sites Project - UI content .................... SUCCESS [ 0.956 s] [INFO] WKND Sites Project - UI config ..................... SUCCESS [ 0.064 s] [INFO] WKND Sites Project - All ........................... SUCCESS [ 8.229 s] [INFO] WKND Sites Project - Integration Tests ............. SUCCESS [ 3.329 s] [INFO] WKND Sites Project - Dispatcher .................... SUCCESS [ 0.027 s] [INFO] WKND Sites Project - UI Tests ...................... SUCCESS [ 0.032 s] [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 23.189 s [INFO] Finished at: 2023-01-10T11:12:23-05:00 [INFO] ------------------------------------------------------------------------

...
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for WKND Sites Project 0.0.1-SNAPSHOT:
[INFO]
[INFO] WKND Sites Project ................................. SUCCESS [  0.113 s]
[INFO] WKND Sites Project - Core .......................... SUCCESS [  3.136 s]
[INFO] WKND Sites Project - UI Frontend ................... SUCCESS [  4.461 s]
[INFO] WKND Sites Project - Repository Structure Package .. SUCCESS [  0.359 s]
[INFO] WKND Sites Project - UI apps ....................... SUCCESS [  1.732 s]
[INFO] WKND Sites Project - UI content .................... SUCCESS [  0.956 s]
[INFO] WKND Sites Project - UI config ..................... SUCCESS [  0.064 s]
[INFO] WKND Sites Project - All ........................... SUCCESS [  8.229 s]
[INFO] WKND Sites Project - Integration Tests ............. SUCCESS [  3.329 s]
[INFO] WKND Sites Project - Dispatcher .................... SUCCESS [  0.027 s]
[INFO] WKND Sites Project - UI Tests ...................... SUCCESS [  0.032 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  23.189 s
[INFO] Finished at: 2023-01-10T11:12:23-05:00
[INFO] ------------------------------------------------------------------------

Maven プロファイル autoInstallSinglePackage は、プロジェクトの個々のモジュールをコンパイルし、1 つのパッケージを AEM インスタンスにデプロイします。デフォルトでは、このパッケージは、ポート 4502 でローカルに実行され、資格情報が admin:admin である AEM インスタンスにデプロイされます。

ローカル AEM インスタンス上で、パッケージマネージャーに移動します（http://localhost:4502/crx/packmgr/index.jsp）。aem-guides-wknd.ui.apps、aem-guides-wknd.ui.config、aem-guides-wknd.ui.content、aem-guides-wknd.all のパッケージが表示されます。
Sites コンソールに移動します（http://localhost:4502/sites.html/content）。サイトの 1 つに WKND サイトがあります。US と言語のマスターの階層を持つサイト構造が含まれています。このサイト階層は、アーキタイプを使用してプロジェクトを生成するときの language_country と isSingleCountryWebsite の値に基づいています。
US > 英語ページを選択し、メニューバーの「編集」ボタンをクリックしてページを開きます。
スターターコンテンツは既に作成されており、ページに追加できるコンポーネントがいくつかあります。これらのコンポーネントを使用してみることで、機能について大まかに把握できます。次の章では、コンポーネントの基本について説明します。

アーキタイプで生成されたサンプルコンテンツ

プロジェクトの検査 project-structure

生成された AEM プロジェクトは、個別の Maven モジュールで構成され、それぞれ異なる役割を持ちます。このチュートリアルとほとんどの開発では、次のモジュールに焦点を当てています。

コア - Java コードが含まれています。主にバックエンド開発者向け。
ui.frontend - CSS、JavaScript、Sass、TypeScript のソースコードが含まれています。主にフロントエンド開発者向け。
ui.apps - コンポーネントおよびダイアログ定義が含まれ、コンパイル済みの CSS と JavaScript がクライアントライブラリとして埋め込まれています。
ui.content - 編集可能なテンプレート、メタデータスキーマ（/content、/conf）などの構造的なコンテンツや設定が含まれています。
all - 空の Maven モジュールで、上記のモジュールを 1 つのパッケージにまとめ、AEM 環境にデプロイできるようにしたものです。

Maven プロジェクト図

すべての Maven モジュールについて詳しくは、AEM プロジェクトアーキタイプのドキュメントを参照してください。

コアコンポーネントを組み込む core-components

AEM コアコンポーネントは、AEM 用の標準化された一連の web コンテンツ管理（WCM）コンポーネントです。これらのコンポーネントは、機能のベースラインのセットを提供し、個々のプロジェクトに対してスタイル設定、カスタマイズ、拡張を行います。

AEM as a Cloud Service 環境には、最新バージョンの AEM コアコンポーネントが含まれています。したがって、AEM as a Cloud Service 用に生成されたプロジェクトには、AEM コアコンポーネントの埋め込みが 含まれません。

AEM 6.5 または 6.4 で生成されたプロジェクトの場合、アーキタイプは AEM コアコンポーネントをプロジェクトに自動的に埋め込みます。AEM 6.5 または 6.4 では、AEM コアコンポーネントを埋め込んで、最新バージョンがプロジェクトに確実にデプロイされるようにすることがベストプラクティスです。コアコンポーネントがプロジェクトにどのように含まれているかについての詳細は、こちらを参照してください。

ソース制御管理 source-control

アプリケーション内のコードを管理するには、何らかの形のソース制御を使用することをお勧めします。このチュートリアルでは Git と GitHub を使用します。Maven や選択した IDE で生成されるファイルの中には、SCM で無視されるべきものがいくつかあります。

Maven は、コードパッケージをビルドおよびインストールするたびにターゲットフォルダーを作成します。ターゲットフォルダーおよびコンテンツは SCM から除外する必要があります。

ui.apps モジュールでは、.content.xml ファイルが多数作成されることを確認します。これらの XML ファイルは、JCR にインストールされているコンテンツのノードタイプおよびプロパティをマッピングします。これらのファイルは重要であり、無視することはできません。

AEM プロジェクトアーキタイプはサンプルの .gitignore ファイルを生成します。まずはこのファイルを使用して、安全に無視できるファイルを判断します。ファイルは <src>/aem-guides-wknd/.gitignore に生成されます。

おめでとうございます。 congratulations

これで、最初の AEM プロジェクトが作成されました。

次の手順 next-steps

コンポーネントの基本チュートリアルのシンプルな HelloWorld 例を通して、Adobe Experience Manager (AEM) Sites コンポーネントの基礎となるテクノロジーを理解します。

高度な Maven コマンド（ボーナス） advanced-maven-commands

開発時には、1 つのモジュールだけを使用して作業を行う場合があり、時間を節約するために、プロジェクト全体を構築したくない場合があります。また、AEM パブリッシュインスタンスに直接デプロイする場合や、ポート 4502 で実行されていない AEM のインスタンスにデプロイする場合もあります。

次に、開発中の柔軟性を高めるために使用できる Maven のその他のプロファイルおよびコマンドをいくつか見てみましょう。

コアモジュール core-module

このコアモジュールには、プロジェクトに関連付けられたすべての Java™コードが含まれます。コアモジュールのビルドは、AEM に OSGi バンドルをデプロイします。このモジュールのみをビルドするには：

core フォルダー（aem-guides-wknd の下）に移動します。

code language-shell
`$ cd core/`

次のコマンドを実行します。

code language-shell

code language-shell
$ mvn clean install -PautoInstallBundle ... [INFO] --- sling-maven-plugin:2.4.0:install (install-bundle) @ aem-guides-wknd.core --- [INFO] Installing Bundle aem-guides-wknd.core(~/code/aem-guides-wknd/core/target/aem-guides-wknd.core-0.0.1-SNAPSHOT.jar) to http://localhost:4502/system/console via WebConsole [INFO] Bundle installed [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 8.558 s

$ mvn clean install -PautoInstallBundle
...
[INFO] --- sling-maven-plugin:2.4.0:install (install-bundle) @ aem-guides-wknd.core ---
[INFO] Installing Bundle aem-guides-wknd.core(~/code/aem-guides-wknd/core/target/aem-guides-wknd.core-0.0.1-SNAPSHOT.jar) to http://localhost:4502/system/console via WebConsole
[INFO] Bundle installed
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  8.558 s

http://localhost:4502/system/console/bundles に移動します。これは OSGi web コンソールで、AEM インスタンスにインストールされているすべてのバンドルに関する情報が含まれます。
ID の並べ替え列を切り替えると、WKND バンドルがインストールされ、アクティブになっていることが確認できます。
JAR の「物理的」な場所は CRXDE-Lite で確認できます。

Ui.apps および Ui.content モジュール apps-content-module

ui.apps maven モジュールには、/apps 配下のサイトで必要となるすべてのレンダリングコードが含まれます。これには CSS/JS が含まれ、clientlibs と呼ばれる AEM の形式で保存されます。また、これには動的 HTML をレンダリングするための HTL スクリプトも含まれます。ui.apps モジュールは、ファイルシステムに保存でき、ソースコントロールに対してコミットできる、JCR 内の構造へのマップと考えることができます。ui.apps モジュールにはコードのみが含まれています。

このモジュールのみをビルドするには：

コマンドラインから。ui.apps フォルダー（aem-guides-wknd の下）に移動します。

code language-shell
`$ cd ../ui.apps`

次のコマンドを実行します。

code language-shell

code language-shell
`$ mvn clean install -PautoInstallPackage ... Package installed in 70ms. [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 2.987 s [INFO] Finished at: 2023-01-10T11:35:28-05:00 [INFO] ------------------------------------------------------------------------`

$ mvn clean install -PautoInstallPackage
...
Package installed in 70ms.
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  2.987 s
[INFO] Finished at: 2023-01-10T11:35:28-05:00
[INFO] ------------------------------------------------------------------------

http://localhost:4502/crx/packmgr/index.jsp に移動します。 ui.apps パッケージが、最初にインストールされたパッケージとして表示され、他のパッケージよりもタイムスタンプが新しいものになっているはずです。

コマンドラインに戻り、次のコマンドを実行します（ui.apps フォルダー内）。

code language-shell

code language-shell
$ mvn -PautoInstallPackagePublish clean install ... [INFO] --- content-package-maven-plugin:1.0.2:install (install-package-publish) @ aem-guides-wknd.ui.apps --- [INFO] Installing aem-guides-wknd.ui.apps (/Users/sachinmali/Desktop/code/wknd-tutorial/aem-guides-wknd/ui.apps/target/aem-guides-wknd.ui.apps-0.0.1-SNAPSHOT.zip) to http://localhost:4503/crx/packmgr/service.jsp [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused) [INFO] Retrying request [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused) [INFO] Retrying request [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused) [INFO] Retrying request [INFO] ------------------------------------------------------------------------ [INFO] BUILD FAILURE [INFO] ------------------------------------------------------------------------ [INFO] Total time: 2.812 s [INFO] Finished at: 2023-01-10T11:37:28-05:00 [INFO] ------------------------------------------------------------------------ [ERROR] Failed to execute goal com.day.jcr.vault:content-package-maven-plugin:1.0.2:install (install-package-publish) on project aem-guides-wknd.ui.apps: Connection refused (Connection refused) -> [Help 1]

$ mvn -PautoInstallPackagePublish clean install
...
[INFO] --- content-package-maven-plugin:1.0.2:install (install-package-publish) @ aem-guides-wknd.ui.apps ---
[INFO] Installing aem-guides-wknd.ui.apps (/Users/sachinmali/Desktop/code/wknd-tutorial/aem-guides-wknd/ui.apps/target/aem-guides-wknd.ui.apps-0.0.1-SNAPSHOT.zip) to http://localhost:4503/crx/packmgr/service.jsp
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  2.812 s
[INFO] Finished at: 2023-01-10T11:37:28-05:00
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal com.day.jcr.vault:content-package-maven-plugin:1.0.2:install (install-package-publish) on project aem-guides-wknd.ui.apps: Connection refused (Connection refused) -> [Help 1]

プロファイル autoInstallPackagePublish は、ポート 4503 で実行されているパブリッシュ環境にパッケージをデプロイすることを目的としています。上記のエラーは、http://localhost:4503で実行中の AEM インスタンスが見つからない場合に発生します。

最後に、次のコマンドを実行して、4504 ポート上の ui.apps パッケージをデプロイします。

code language-shell

code language-shell
$ mvn -PautoInstallPackage clean install -Daem.port=4504 ... [INFO] --- content-package-maven-plugin:1.0.2:install (install-package) @ aem-guides-wknd.ui.apps --- [INFO] Installing aem-guides-wknd.ui.apps (/Users/dgordon/code/aem-guides-wknd/ui.apps/target/aem-guides-wknd.ui.apps-0.0.1-SNAPSHOT.zip) to http://localhost:4504/crx/packmgr/service.jsp [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused) [INFO] Retrying request [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused) [INFO] Retrying request [INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused) [INFO] Retrying request [INFO] ------------------------------------------------------------------------ [INFO] BUILD FAILURE [INFO] --------------------------------------------------------------------

$ mvn -PautoInstallPackage clean install -Daem.port=4504
...
[INFO] --- content-package-maven-plugin:1.0.2:install (install-package) @ aem-guides-wknd.ui.apps ---
[INFO] Installing aem-guides-wknd.ui.apps (/Users/dgordon/code/aem-guides-wknd/ui.apps/target/aem-guides-wknd.ui.apps-0.0.1-SNAPSHOT.zip) to http://localhost:4504/crx/packmgr/service.jsp
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] I/O exception (java.net.ConnectException) caught when processing request: Connection refused (Connection refused)
[INFO] Retrying request
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] --------------------------------------------------------------------

この場合も、ポート 4504 で実行されている AEM インスタンスが利用できない場合、ビルドエラーが発生することが予想されます。パラメーター aem.port は、aem-guides-wknd/pom.xml にある POM ファイルで定義されます。

ui.content モジュールは、ui.apps モジュールと同じ方法で構造化されます。唯一の違いは、ui.content モジュールに可変コンテンツが含まれることです。可変コンテンツとは基本的に、ソース管理下に保存されている、テンプレート、ポリシー、フォルダー構造などのコード以外の設定を指します。 ただし、AEMインスタンス上で直接変更できます。これについて詳しくは、ページとテンプレートの章で説明しています。

ui.apps モジュールをビルドするために使用するのと同じ Maven コマンドは、ui.content モジュールのビルドに使用できます。上記の手順を、ui.content フォルダー内から自由に繰り返してください。

トラブルシューティング

AEM プロジェクトアーキタイプを使用したプロジェクトの生成で問題が発生した場合は、既知の問題およびオープンの問題リストを確認してください。

お疲れさまでした。 congratulations-bonus

ボーナスマテリアルを完了しました。

次の手順 next-steps-bonus

シンプルな HelloWorld の例とコンポーネントの基本チュートリアルを使って、Adobe Experience Manager（AEM）Sites コンポーネントの基盤となるテクノロジーについて理解します。

recommendation-more-help

b2a561c1-47c0-4182-b8c1-757a197484f9