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

https://my.cloudmanager.adobe.com に移動します

このクイックセットアップに使用する AEM as a Cloud Service 環境を含む Cloud Manager プログラム ​を選択します。

WKND サイトプロジェクト用の Git リポジトリを作成します

1. 上部ナビゲーションで「リポジトリ」を選択します
2. 上部のアクションバーで「リポジトリを追加」を選択します。
3. 新しい Git リポジトリに「aem-headless-quick-setup-wknd」という名前を付けます。
   • Git リポジトリ名は、Adobe 組織ごとに一意である必要があります。
4. 「保存」を選択 して、Git リポジトリが初期化されるのを待ちます。

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

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

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

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

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

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

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

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

$ git push adobe main:main

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

実稼動以外のデプロイメントパイプライン ​を新しい 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. 「保存」を選択します

開発デプロイメントパイプライン ​を実行します。

1. 上部ナビゲーションの「概要」を選択します
2. 「パイプライン」セクションで、新しく作成した​ 開発デプロイメントパイプライン ​を見つけます
3. パイプラインエントリの右側にある「…」を選択します
4. 「実行」を選択し、モーダルで確認します
5. 実行中のパイプラインの右側にある「…」を選択します
6. 「詳細を表示」を選択 します

パイプラインの実行の詳細から、正常に完了するまで進行状況を監視します。 パイプラインの実行には 30～40 分かかります

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

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

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

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

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 として使用します

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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