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. 選取 mainGit分支 選取方塊
      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形式使用其內容。

後續步驟

本頁內容