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. 選擇 main 從 Git分支 選擇框
      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使用。

後續步驟

本頁內容