AEM as a Cloud Service 用の AEM ヘッドレスのクイックセットアップ

AEM ヘッドレスのクイックセットアップでは、WKND サイトサンプルプロジェクトのコンテンツと、AEM ヘッドレス GraphQL API を介してコンテンツを使用するサンプルの React アプリ（SPA）を使用して、AEM ヘッドレスを操作できます。

前提条件

このクイックセットアップに行うには、以下が必要です。

  • AEM as a Cloud Service サンドボックス環境（できれば開発環境）
  • AEM as a Cloud Service および Cloud Manager へのアクセス
    • AEM as a Cloud Serviceへの AEM 管理者​アクセス権
    • Cloud Manager - Cloud Manager へのデプロイメントマネージャー​のアクセス権
  • 以下のツールをローカルにインストールする必要があります。

1. Cloud Manager Git リポジトリの作成

まず、WKND サイトのデプロイに使用する Cloud Manager Git リポジトリを作成します。 WKND サイトは、コンテンツ（コンテンツフラグメント）と、クイックセットアップの React アプリで使用される GraphQL AEM エンドポイントを含むサンプルの AEM web サイトプロジェクトです。

手順のスクリーンキャスト

  1. https://my.cloudmanager.adobe.com に移動します
  2. このクイックセットアップに使用する AEM as a Cloud Service 環境を含む Cloud Manager プログラム​を選択します。
  3. WKND サイトプロジェクト用の Git リポジトリを作成します
    1. 上部ナビゲーションで「リポジトリ」を選択します
    2. 上部のアクションバーで「リポジトリを追加」を選択します。
    3. 新しい Git リポジトリに「aem-headless-quick-setup-wknd」という名前を付けます。
      • Git リポジトリ名は、Adobe 組織ごとに一意である必要があります。
    4. 「保存」を選択 して、Git リポジトリが初期化されるのを待ちます。

2.サンプル WKND サイトプロジェクトの Cloud Manager Git リポジトリへのプッシュ

Cloud Manager Git リポジトリを作成したら、WKND サイトプロジェクトのソースコードを GitHub からコピーし、Cloud Manager Git リポジトリにプッシュします。 Cloud Manager で、WKND サイトプロジェクトを AEM as a Cloud Service 環境にデプロイします。

手順のスクリーンキャスト

  1. コマンドラインから、サンプルの WKND サイトプロジェクトのソースコードを GitHub からコピーします

    $ mkdir -p ~/Code
$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd.git

  2. Cloud Manager Git リポジトリをリモートリポジトリとして追加します

    1. 上部ナビゲーションの「リポジトリ」を選択します

    2. 上部のアクションバーの「リポジトリ情報にアクセス」を選択します。

    3. 「リモートを Git リポジトリに追加」にあるコマンドを コマンドラインから実行します。

      $ cd aem-guides-wknd
$ git remote add adobe https://git.cloudmanager.adobe.com/<YOUR ADOBE ORGANIZATION>/aem-headless-quick-setup-wknd/

  3. サンプルプロジェクトのソースコードをローカル Git リポジトリから Cloud Manager Git リポジトリにプッシュします。

    $ git push adobe main:main

    資格情報の入力を求められたら、ユーザー名​および​パスワード​を Cloud Manager の​リポジトリ情報​モーダルから指定します。

3. WKND サイトの AEM as a Cloud Service へのデプロイ

WKND サイトプロジェクトを Cloud Manager Git リポジトリにプッシュすると、Cloud Manager パイプラインを使用して AEM as a Cloud Service にデプロイすることはできません。

WKND サイトプロジェクトには、React アプリが AEM ヘッドレス GraphQL API を介して消費するサンプルコンテンツが用意されています。

手順のスクリーンキャスト

  1. 実稼動以外のデプロイメントパイプライン​を新しい Git リポジトリに追加します。
    1. 上部ナビゲーションの「パイプライン」を選択します。
    2. 上部のアクションバーの「パイプラインを追加」を選択します。
    3. 「設定」タブで、次の設定を行います。
      1. 「デプロイメントパイプライン」オプションを選択します。
      2. 実稼動以外のパイプライン名​を Dev Deployment pipeline に設定します。
      3. デプロイメントトリガー／Git の変更時​を選択します
      4. 重要な指標の失敗動作／今すぐ続行​を選択します
      5. 「続行」を選択します
    4. 「ソースコード」タブで、以下の操作を行います
      1. 「フルスタックコード」オプションを選択します
      2. 「適格なデプロイメント環境」選択ボックスから「AEM as a Cloud Service 開発環境」を選択します
      3. 「リポジトリ」選択ボックスで aem-headless-quick-setup-wknd を選択します
      4. 「Git ブランチ」選択ボックスで main を選択します
      5. 「保存」を選択します
  2. 開発デプロイメントパイプライン​を実行します。
    1. 上部ナビゲーションの「概要」を選択します
    2. 「パイプライン」セクションで、新しく作成した​開発デプロイメントパイプライン​を見つけます
    3. パイプラインエントリの右側にある「…」を選択します
    4. 「実行」を選択し、モーダルで確認します
    5. 実行中のパイプラインの右側にある「…」を選択します
    6. 「詳細を表示」を選択 します
  3. パイプラインの実行の詳細から、正常に完了するまで進行状況を監視します。 パイプラインの実行には 30～40 分かかります

4. WKND React アプリのダウンロードと実行

WKND サイトプロジェクトのコンテンツでブートストラップを行う AEMas a Cloud Service を使って、AEM ヘッドレス GraphQL API を介して WKND サイトのコンテンツを使用するサンプルの WKND React アプリをダウンロードして起動します。

手順のスクリーンキャスト

  1. コマンドラインから、GitHub の React アプリのソースコードをコピーします。

    $ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git

  2. IDE で ~/Code/aem-guides-wknd-graphql/react-app フォルダーを開きます。

  3. IDE で .env.development ファイルを開きます。

  4. REACT_APP_HOST_URI プロパティから AEM as a Cloud Service Publish​サービスのホスト URI をポイントします。

    REACT_APP_HOST_URI=https://publish-pXXXX-eYYYY.adobeaemcloud.com
...

    AEM as a Cloud Service Publish サービスのホスト URI を見つけるには

    1. Cloud Manager で、上部ナビゲーションの「環境」を選択します。
    2. 「開発」環境を選択します
    3. Publish サービス（AEM および Dispatcher） リンクの「環境セグメント」テーブルを見つけます
    4. リンクのアドレスをコピーして、AEM as a Cloud Service Publish サービスの URI として使用します

  5. IDE で 変更を .env.development に保存します

  6. コマンドラインから、React アプリを実行します。

    $ cd ~/Code/aem-guides-wknd-graphql/react-app
$ npm install
$ npm start

  7. ローカルで実行される React アプリが http://localhost:3000 で開始し、AEM ヘッドレスの GraphQL API を使用して AEM as a Cloud Service から取得されるアドベンチャーのリストを表示します。

5. AEM でのコンテンツの編集

AEM ヘッドレス GraphQL API のコンテンツに接続して消費するサンプル WKND React アプリを使用して、AEM オーサーサービスのコンテンツを作成し、React アプリのエクスペリエンスがどのように更新されるかを確認します。

手順のスクリーンキャスト

  1. AEM as a Cloud Service オーサーサービスにログインします

  2. Assets／ファイル／WKND 共有／英語／アドベンチャー​に移動します

  3. ユタ州南部のサイクリング​フォルダーを開きます

  4. ユタ州南部のサイクリング コンテンツフラグメントを選択し、上部のアクションバーの「編集」を選択します

  5. 例えば、以下のようにコンテンツフラグメントの一部のフィールドを更新します。

    • タイトル：Cycling Utah's National Parks
    • 旅の期間： 6 Days
    • 難易度： Intermediate
    • 価格：3500
    • プライマリ画像： /content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg

  6. 上部のアクションバーで「保存」を選択します

  7. 上部のアクションバーの「…」から「クイック公開」を選択します

  8. http://localhost:3000 で実行中の React アプリを更新します

  9. React アプリで、更新後のサイクリングアドベンチャーを選択し、コンテンツフラグメントに加えたコンテンツの変更を確認します。

  10. AEM オーサーサービスでも、同じ方法を使用します。

    1. 既存の Adventure コンテンツフラグメントを非公開にし、React アプリエクスペリエンスから削除されたことを確認します。
    2. 新しいアドベンチャーコンテンツフラグメントを作成して公開し、React アプリのエクスペリエンスに表示されることを確認します。
    ヒント

    新しいコンテンツフラグメントの作成と公開や、既存のコンテンツフラグメントの非公開に不慣れな場合は、上記のスクリーンキャストをご覧ください。

これで完了です。

おめでとうございます。AEM ヘッドレスを正常に使用して React アプリを強化できました。

React アプリが AEM as a Cloud Service 内のコンテンツをどのように消費するかを詳しく理解するには、AEM ヘッドレスチュートリアルを参照してください。このチュートリアルでは、AEM でコンテンツフラグメントがどのように作成されるかと、この React アプリがコンテンツを JSON としてどのように消費するかを説明します。

次の手順

このページ