AEMas a Cloud Service的AEM Headless快速設定

AEM Headless快速設定可讓您使用AEM Headless的實際操作，其中包含來自WKND Site範例專案的內容，以及一個透過AEM Headless GraphQL API使用內容的範例React應用程式(SPA)。

必備條件

進行此快速設定需要下列專案：

  • AEMas a Cloud Service沙箱環境（最好是開發環境）
  • 存取AEMas a Cloud Service和Cloud Manager
    • AEM管理員 AEMas a Cloud Service的存取權
    • Cloud Manager — 部署管理員 存取Cloud Manager
  • 下列工具必須安裝在本機：

1.建立Cloud Manager Git存放庫

首先，建立用於部署WKND網站的Cloud Manager Git存放庫。 WKND網站是範例AEM網站專案，其中包含快速設定的React應用程式所使用的內容（內容片段）和GraphQL AEM端點。

步驟的熒幕截圖

  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
      • 每個Adobe組織的Git存放庫名稱必須是唯一的，
    4. 選取 儲存，並等待Git存放庫初始化

2.將範例WKND網站專案推送到Cloud Manager Git存放庫

建立Cloud Manager Git存放庫後，從GitHub複製WKND網站專案的原始程式碼，並將其推送到Cloud Manager Git存放庫。 Cloud Manager現在可存取WKND網站專案，並將其部署到AEMas a Cloud Service環境。

步驟的熒幕截圖

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

    $ 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網站部署至AEMas a Cloud Service

將WKND網站專案推送到Cloud Manager Git存放庫時，無法使用Cloud Manager管道將其部署到AEMas a Cloud Service。

請記住，WKND網站專案提供React應用程式透過AEM Headless GraphQL API使用的範例內容。

步驟的熒幕截圖

  1. 附加 非生產部署管道 至新的Git存放庫
    1. 選取 管道 在頂端導覽列中
    2. 選取 新增管道 從頂端動作列
    3. 於 設定 標籤
      1. 選取 部署管道 option
      2. 設定 非生產管道名稱 至 Dev Deployment pipeline
      3. 選取 部署觸發程式>開啟Git變更
      4. 選取 重要量度失敗行為>立即繼續
      5. 選取 繼續
    4. 於 原始碼 標籤
      1. 選取 完整棧疊計畫碼 option
      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網站專案中的內容啟動AEMas a Cloud Service後，下載並啟動範例WKND React應用程式，該應用程式會透過AEM Headless GraphQL API使用WKND網站的內容。

步驟的熒幕截圖

  1. 從命令列，從GitHub複製React應用程式的原始程式碼。

    $ 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應用程式

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

  7. 在本機執行的React應用程式會於 http://localhost:3000 和顯示冒險清單，這些冒險是使用AEM Headless的GraphQL API從AEMas a Cloud Service取得。

5.編輯AEM內容

使用範例WKND React應用程式連線到AEM Headless GraphQL API並使用其內容，在AEM Author服務中創作內容，並檢視React應用程式的體驗如何一致更新。

步驟的熒幕截圖

  1. 登入AEMas a Cloud Service作者服務

  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應用程式中，選取現在更新的Cycling Adventure，並驗證對內容片段進行的內容變更。

  10. 使用相同方法，在AEM Author服務中：

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

    如果您不熟悉如何建立和發佈新的內容片段，或取消發佈現有的內容片段，請觀看上面的熒幕擷圖。

恭喜！

恭喜！您已成功使用AEM Headless來增強React應用程式！

若要詳細瞭解React應用程式如何使用AEMas a Cloud Service的內容，請檢視 AEM Headless教學. 本教學課程探討如何在AEM中建立內容片段，以及此React應用程式如何以JSON形式使用其內容。

後續步驟

本頁內容