AEM as a Cloud Service的AEM Headless快速設定

導覽至https://my.cloudmanager.adobe.com

選取包含要用於此快速設定的AEM as a Cloud Service環境的Cloud Manager 方案

為WKND網站專案建立Git存放庫

1. 在頂端導覽中選取​ 存放庫
2. 在頂端動作列中選取​ 新增存放庫
3. 命名新的Git存放庫： aem-headless-quick-setup-wknd
   • 每個Adobe組織的Git存放庫名稱必須是唯一的，
4. 選取​ 儲存，並等待Git存放庫初始化

從命令列，從GitHub複製範例WKND網站專案的原始程式碼

$ 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. 在​ Source程式碼 ​索引標籤上

   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 Headless的GraphQL API從AEM as a Cloud Service取得。

登入AEM as a Cloud Service Author服務

導覽至​ Assets >檔案> WKND共用>英文>冒險

開啟​ Cycling Southern Utah ​資料夾

選取​ Cycling Southern Utah ​內容片段，並從上方動作列選取​ 編輯

更新內容片段的某些欄位，例如：

• 標題： Cycling Utah's National Parks
• 行程長度： 6 Days
• 難度： Intermediate
• 價格： 3500
• 主要影像： /content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg

在頂端動作列中選取​ 儲存

從頂端動作列的​ 選取 ​快速Publish …

重新整理http://localhost:3000上執行的React應用程式。

在React應用程式中，選取現在更新的「循環冒險」，並驗證對內容片段進行的內容變更。

使用相同方法，在AEM作者服務中：

1. 取消發佈現有的冒險內容片段，並確認該片段已從React應用程式體驗中移除
2. 建立並發佈新的冒險內容片段，並確認它出現在React應用程式體驗中