AEM無頭快速設定AEMas a Cloud Service

「AEM無頭」快速設定可讓您使用WKND站點示例項目中的內容與AEMHeadless進行操作,並提供一個示例反應應用(aSPA),該應用會通過無頭圖形QL APIAEM來消耗內容。

必備條件

要執行此快速設定,需要執行以下操作:

  • AEMas a Cloud Service沙盒環境(最好是開發)
  • 訪問AEMas a Cloud Service和雲管理器
    • 管AEM理員 訪問AEMas a Cloud Service
    • 雲管理器 — 部署管理器 訪問雲管理器
  • 必須本地安裝以下工具:

1。建立Cloud Manager Git儲存庫

首先,建立用於部署WKND站點的Cloud Manager Git儲存庫。 WKND站點是一個示例網站項AEM目,它包含快速設定的React App使用的內AEM容(內容片段)和GraphQL終結點。

步驟截屏

  1. 導航到 https://my.cloudmanager.adobe.com
  2. 選擇雲管理器 計畫 包含用於AEM此快速設定的as 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
    

    提示輸入憑據時,請提供 用戶名密碼 從雲管理器 資料庫資訊 模式。

3.將WKND站點部署到AEMas a Cloud Service

將WKND站點項目推送到Cloud Manager Git儲存庫後,無法使用Cloud Manager管道將其部署到AEMas a Cloud Service。

請記住,WKND站點項目提供的示例內容是React應用程式使用的無AEM頭GraphQL API。

步驟截屏

  1. 附加 非生產部署管道 到新的Git儲存庫
    1. 選擇 管線
    2. 選擇 添加管線 從頂部操作欄
    3. 配置 頁籤
      1. 選擇 部署管道 選項
      2. 設定 非生產管道名稱Dev Deployment pipeline
      3. 選擇 部署觸發器> On 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應用

通AEM過as a Cloud Service引導WKND站點項目的內容,下載並啟動示例WKND React App,該示例通過無頭GraphQL API消耗WKND站點的AEM內容。

步驟截屏

  1. 在命令行中,從GitHub克隆React App的原始碼。

    $ 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. 在雲管理器中,選擇 環境
    2. 選擇 開發 環境
    3. 查找 發佈服AEM務(和Dispatcher) 連結 環境段
    4. 複製連結的地址,並將其用作AEMas a Cloud Service發佈服務的URI
  5. 在IDE中,將更改保存到 .env.development

  6. 從命令行運行React App

    $ cd ~/Code/aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  7. 本地運行的React App啟動 http://localhost:3000 並顯示冒險清單,這些冒險是使用AEMHeadless的AEMGraphQL API從as a Cloud Service獲取的。

5.編輯內AEM容

當示例WKND React App連接到AEMHeadless GraphQL API並從其中使用內容時,在AEM Author服務中編寫內容,並查看React App的體驗如何一致更新。

步驟截屏

  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 App http://localhost:3000

  9. 在React App中,選擇現在更新的循環冒險,並驗證對內容片段所做的內容更改。

  10. 在AEM Author服務中,使用相同的方法:

    1. 取消發佈現有的冒險內容片段,並驗證是否從React App體驗中刪除了它
    2. 建立並發佈新的冒險內容片段,並驗證它是否顯示在React App體驗中
    秘訣

    如果您不熟悉建立和發佈新內容或取消發佈現有內容片段,請查看上面的截屏。

恭喜!

恭喜! 您已成功使AEM用無頭功能為React App提供電源!

要詳細瞭解React App如何使用來自as a Cloud Service的AEM內容,請簽出 無頭AEM教程。 本教程將探討內容片AEM段在建立時的使用方式,以及此React App如何將其內容作為JSON使用。

後續步驟

本頁內容