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

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

前提条件

このクイックセットアップに従うには、次の操作が必要です。

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

1. Cloud Manager Git リポジトリを作成する

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

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

  1. に移動します。 https://my.cloudmanager.adobe.com
  2. Cloud Manager を選択します。 プログラム このクイックセットアップに使用するAEMas a Cloud Service環境を含む
  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 Site プロジェクトのソースコードを GitHub からコピーし、Cloud Manager Git リポジトリにプッシュします。 Cloud Manager で、WKND サイトプロジェクトにアクセスし、AEMas a Cloud Service環境にデプロイできます。

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

  1. コマンドラインから、サンプルの WKND Site プロジェクトのソースコードを 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. を選択します。 AEMas a Cloud Service開発環境 から 適格なデプロイメント環境 選択ボックス
      3. 選択 aem-headless-quick-setup-wkndリポジトリ 選択ボックス
      4. 選択 main から Git ブランチ 選択ボックス
      5. 選択 保存
  2. を実行します。 開発デプロイメントパイプライン
    1. 選択 概要 上部ナビゲーション
    2. 新しく作成した 開発デプロイメントパイプラインパイプライン セクション
    3. を選択します。 をパイプラインエントリの右側に追加します。
    4. 選択 実行​をクリックし、モーダルでを確認します。
    5. を選択します。 を実行中のパイプラインの右側に移動します。
    6. 選択 詳細を表示
  3. パイプラインの実行の詳細から、正常に完了するまで進行状況を監視します。 パイプラインの実行には 30 ~ 40 分かかる必要があります。

4. WKND React アプリをダウンロードして実行します。

WKND Site プロジェクトのコンテンツでAEMas a Cloud Service的にブートストラップ処理を行い、AEM Headless GraphQL API を介して WKND Site のコンテンツを使用するサンプルの WKND React App をダウンロードして起動します。

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

  1. コマンドラインから、React App のソースコードを GitHub からクローンします。

    $ cd ~/Code
    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. フォルダーを開く ~/Code/aem-guides-wknd-graphql/react-app を IDE に追加します。

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

  4. AEMas a Cloud Serviceを指す 公開 から取得したサービスのホスト URI REACT_APP_HOST_URI プロパティ。

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

    AEMas a Cloud Serviceパブリッシュサービスのホスト URI を検索するには:

    1. Cloud Manager で、 環境 上部ナビゲーション
    2. 選択 開発 環境
    3. パブリッシュサービス (AEMおよび Dispatcher) リンク 環境セグメント
    4. リンクのアドレスをコピーして、AEMas a Cloud Serviceパブリッシュサービスの URI として使用します
  5. IDE で、変更を .env.development

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

    $ 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 Author サービスにログインします。

  2. に移動します。 アセット/ファイル/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. で実行中の React アプリを更新する http://localhost:3000.

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

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

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

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

おめでとうございます。

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

React App がAEM as a Cloud Serviceからコンテンツをどのように消費するかを詳しく理解するには、 AEMヘッドレスチュートリアル. このチュートリアルでは、AEMでのコンテンツフラグメントの作成方法と、この React App が JSON としてコンテンツを使用する方法について説明します。

次の手順

このページ