迅速な開発環境の使用方法

迅速な開発環境(RDE)を AEM as a Cloud Service で​ 使用する方法 ​を説明します。お気に入りの統合開発環境(IDE)から RDE にコードとコンテンツをデプロイして、ほぼ最終的なコードを開発するサイクルを高速化します。

お気に入りの IDE から AEM-RDE の install コマンドを実行して様々な AEM アーティファクトを RDE にデプロイする方法を、AEM WKND Sites プロジェクト を使用して説明します。

  • AEM のコードとコンテンツのパッケージ(すべて、ui.apps)のデプロイメント
  • OSGi バンドルと設定ファイルのデプロイメント
  • zip ファイルでの Apache および Dispatcher 設定のデプロイメント
  • HTL や .content.xml(ダイアログ XML)などの個々のファイルのデプロイメント
  • status, reset and delete などの他の RDE コマンドの確認

前提条件

WKND Sites プロジェクトのクローンを作成してお気に入りの IDE で開き、AEM アーティファクトを RDE にデプロイします。

$ git clone git@github.com:adobe/aem-guides-wknd.git

次に、以下の maven コマンドを実行してビルドし、ローカルの AEM-SDK にデプロイします。

$ cd aem-guides-wknd/
$ mvn clean package

AEM-RDE プラグインを使用した AEM アーティファクトのデプロイ

まず、最新の aio CLI モジュールがインストールされていることを確認します。

次に、aio aem:rde:install コマンドを使用して、様々な AEM アーティファクトをデプロイします。以下を行う必要があります。

all パッケージと dispatcher パッケージのデプロイ

一般には、まず次のコマンドを実行して all パッケージと dispatcher パッケージをデプロイすることから始まります。

# Install the 'all' content package (zip file)
$ aio aem:rde:install all/target/aem-guides-wknd.all-2.1.3-SNAPSHOT.zip

# Install the 'dispatcher' deployment artifact (zip file)
$ aio aem:rde:install dispatcher/target/aem-guides-wknd.dispatcher.cloud-2.1.3-SNAPSHOT.zip

デプロイに成功したら、オーサーサービスとパブリッシュサービスの両方で WKND サイトを検証します。WKND サイトページのコンテンツを追加および編集し公開できるはずです。

コンポーネントの機能強化とデプロイ

Hello World Component を機能強化して RDE にデプロイします。

  1. ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/_cq_dialog/ フォルダーからダイアログ XML(.content.xml)ファイルを開きます。

  2. 既存の Text ダイアログフィールドの後に Description テキストフィールドを追加します。

    code language-xml
    ...
    <description
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
        fieldLabel="Description"
        name="./description"/>
    ...
    
  3. ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld フォルダーから helloworld.html ファイルを開きます。

  4. Text プロパティの既存の <div> 要素の後に Description プロパティをレンダリングします。

    code language-html
    ...
    <div class="cmp-helloworld__item" data-sly-test="${properties.description}">
        <p class="cmp-helloworld__item-label">Description property:</p>
        <pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${properties.description}</pre>
    </div>
    ...
    
  5. Maven ビルドを実行するか個々のファイルを同期して、ローカルの AEM SDK で変更を検証します。

  6. ui.apps パッケージを介して、または個々のダイアログファイルと HTL ファイルをデプロイして、変更を RDE にデプロイします。

    code language-shell
    # Using 'ui.apps' package
    
    $ cd ui.apps
    $ mvn clean package
    $ aio aem:rde:install target/aem-guides-wknd.ui.apps-2.1.3-SNAPSHOT.zip
    
    # Or by deploying the individual HTL and Dialog XML
    
    # HTL file
    $ aio aem:rde:install ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/helloworld.html -t content-file -p /apps/wknd/components/helloworld/helloworld.html
    
    # Dialog XML
    $ aio aem:rde:install ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/_cq_dialog/.content.xml -t content-xml -p /apps/wknd/components/helloworld/_cq_dialog/.content.xml
    
  7. WKND サイト ページで Hello World Component を追加または編集して、RDE での変更を検証します。

install コマンドオプションの確認

上記の個々のファイルデプロイメントコマンドの例では、-t フラグと -p フラグを使用して、それぞれ JCR パスのタイプと宛先を示しています。次のコマンドを実行して、使用可能な install コマンドオプションを確認してみましょう。

$ aio aem:rde:install --help

フラグは自明であり、-s フラグは、オーサーサービスまたはパブリッシュサービスのみをデプロイメントの対象とする場合に便利です。content-file または content-xml ファイルをデプロイするときに -t フラグを -p フラグとともに使用して、AEM RDE 環境での宛先 JCR パスを指定します。

OSGi バンドルのデプロイ

OSGi バンドルのデプロイ方法を説明するために、HelloWorldModel Java™ クラスを機能強化して RDE にデプロイします。

  1. core/src/main/java/com/adobe/aem/guides/wknd/core/models フォルダー内の HelloWorldModel.java ファイルを開きます。

  2. init() メソッドを次のように更新します。

    code language-java
    ...
    message = "Hello World!\n"
        + "Resource type is: " + resourceType + "\n"
        + "Current page is:  " + currentPagePath + "\n"
        + "Changes deployed via RDE, lets try faster dev cycles";
    ...
    
  3. Maven コマンドを使用して core バンドルをデプロイすることで、ローカル AEM-SDK の変更を検証します。

  4. 次のコマンドを実行して、RDE に変更をデプロイします。

    code language-shell
    $ cd core
    $ mvn clean package
    $ aio aem:rde:install target/aem-guides-wknd.core-2.1.3-SNAPSHOT.jar
    
  5. WKND サイトページで Hello World Component を追加または編集して、RDE での変更を検証します。

OSGi 設定のデプロイ

個々の設定ファイルまたは設定パッケージ全体をデプロイできます。次に例を示します。

# Deploy individual config file
$ aio aem:rde:install ui.config/src/main/content/jcr_root/apps/wknd/osgiconfig/config/org.apache.sling.commons.log.LogManager.factory.config~wknd.cfg.json

# Or deploy the complete config package
$ cd ui.config
$ mvn clean package
$ aio aem:rde:install target/aem-guides-wknd.ui.config-2.1.3-SNAPSHOT.zip
TIP
OSGi 設定をオーサーインスタンスまたはパブリッシュインスタンスにのみインストールするには、-s フラグを使用します。

Apache または Dispatcher 設定のデプロイ

Apache または Dispatcher 設定ファイルを​ 個別にデプロイできるのではなく、Dispatcher フォルダー構造全体を ZIP ファイルの形式でデプロイする必要があります。

  1. dispatcher モジュールの設定ファイルに必要な変更を加えます。デモのために、html ファイルを 60 秒間だけキャッシュするように dispatcher/src/conf.d/available_vhosts/wknd.vhost を更新します。

    code language-none
    ...
    <LocationMatch "^/content/.*\.html$">
        Header unset Cache-Control
        Header always set Cache-Control "max-age=60,stale-while-revalidate=60" "expr=%{REQUEST_STATUS} < 400"
        Header always set Surrogate-Control "stale-while-revalidate=43200,stale-if-error=43200" "expr=%{REQUEST_STATUS} < 400"
        Header set Age 0
    </LocationMatch>
    ...
    
  2. ローカルで変更を検証します。詳しくは、Dispatcher のローカルでの実行を参照してください。

  3. 次のコマンドを実行して、変更を RDE にデプロイします。

    code language-shell
    $ cd dispatcher
    $ mvn clean install
    $ aio aem:rde:install target/aem-guides-wknd.dispatcher.cloud-2.1.3-SNAPSHOT.zip
    
  4. RDE での変更の検証

追加の AEM RDE プラグインコマンド

ローカルマシンから RDE を管理および操作するための追加の AEM RDE プラグインコマンドを確認します。

$ aio aem:rde --help
Interact with RapidDev Environments.

USAGE
$ aio aem rde COMMAND

COMMANDS
aem rde delete   Delete bundles and configs from the current rde.
aem rde history  Get a list of the updates done to the current rde.
aem rde install  Install/update bundles, configs, and content-packages.
aem rde reset    Reset the RDE
aem rde restart  Restart the author and publish of an RDE
aem rde status   Get a list of the bundles and configs deployed to the current rde.

上記のコマンドを使用すると、お気に入りの IDE から RDE を管理して、開発/デプロイメントのライフサイクルを迅速化できます。

次の手順

機能を迅速に提供できるように、RDE を使用した開発/デプロイメントライフサイクルについて説明します。

その他のリソース

RDE コマンドのドキュメント

AEM の迅速な開発環境とやり取りするための Adobe I/O Runtime CLI プラグイン

AEM プロジェクトのセットアップ

recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69