AEMas a Cloud Service的AEM Headless快速設定

AEM Headless快速設定讓您使用WKND Site範例專案中的內容,以AEM Headless進行操作,並提供在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 Site是範例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網站專案的原始程式碼

    code language-shell
    $ mkdir -p ~/Code
    $ cd ~/Code
    $ git clone git@github.com:adobe/aem-guides-wknd.git
    
  2. 將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/
      
  3. 將範例專案的原始程式碼從您的本機Git存放庫推送到Cloud Manager Git存放庫

    code language-shell
    $ git push adobe main:main
    

    在系統提示輸入認證時,請提供 使用者名稱密碼 從Cloud Manager的 存放庫資訊 強制回應視窗。

3.將WKND網站部署至AEMas a Cloud Service

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

請記住,WKND Site專案提供React應用程式透過AEM Headless 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. 選取 mainGit分支 選取方塊
      5. 選取 儲存
  2. 執行 開發部署管道

    1. 選取 概觀 在頂端導覽列中
    2. 找出新建立的 開發部署管道管道 區段
    3. 選取 位於管道專案的右側
    4. 選取 執行,並在強制回應視窗確認
    5. 選取 至執行中的管道右側
    6. 選取 檢視詳細資料
  3. 從管道執行的詳細資訊,監視進度直到成功完成。 管道執行應需要30到40分鐘之間。

4.下載並執行WKND React應用程式

使用WKND Site專案中的內容啟動AEMas a Cloud Service,下載並啟動範例WKND React應用程式,該應用程式透過AEM Headless GraphQL API使用WKND網站的內容。

步驟的熒幕截圖

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

    code language-shell
    $ 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 屬性。

    code language-plain
    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應用程式

    code language-shell
    $ 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應用程式中,選取現在更新的「循環冒險」,並驗證對內容片段進行的內容變更。

  10. 使用相同方法,在AEM作者服務中:

    1. 取消發佈現有的冒險內容片段,並確認該片段已從React應用程式體驗中移除
    2. 建立並發佈新的冒險內容片段,並確認它出現在React應用程式體驗中
    note tip
    TIP
    如果您不熟悉如何建立和發佈新的內容片段,或無法發佈現有的內容片段,請觀看上方的熒幕擷取畫面。

恭喜!

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

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

後續步驟

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4