AEM無頭快速設定AEMas a Cloud Service

AEM無頭式快速設定可讓您使用WKND Site範例專案中的內容，以及透過AEM無頭式GraphQL API取用內容的範例React應用程式(SPA)，來與AEM無頭式實作。

必備條件

要執行此快速設定，需要以下操作：

  • 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
    4. 選擇 儲存，並等待Git存放庫初始化

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

在建立Cloud Manager Git存放庫後，從GitHub複製WKND Site專案的原始碼，並推送至Cloud Manager Git存放庫。 現在，Cloud Manager可存取WKND Site專案，並部署至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/

  3. 將範例專案的原始碼從您本機的Git存放庫推送至Cloud Manager Git存放庫

    $ git push adobe master:main

    提示輸入憑證時，請提供 使用者名稱 和 密碼 從Cloud Manager的 儲存庫資訊 模式。

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

將WKND Site專案推送至Cloud Manager Git存放庫後，便無法使用Cloud Manager管道將其部署至AEMas a Cloud Service。

請記得，WKND Site專案提供透過AEM無周邊GraphQL API使用之React應用程式的範例內容。

步驟的截屏

  1. 附加 非生產部署管道 新Git存放庫
    1. 選擇 管道 中
    2. 選擇 新增管道 從頂端動作列
    3. 在 設定 標籤
      1. 選擇 部署管道 選項
      2. 設定 非生產管道名稱 to Dev Deployment pipeline
      3. 選擇 部署觸發器> Git變更時
      4. 選擇 重要量度失敗行為>立即繼續
      5. 選擇 繼續
    4. 在 原始碼 標籤
      1. 選擇 完整堆疊程式碼 選項
      2. 選取 AEMas a Cloud Service開發環境 從 合格的部署環境 選取方塊
      3. 選擇 aem-headless-quick-setup 在 存放庫 選取方塊
      4. 選擇 main 從 Git分支 選取方塊
      5. 選擇 儲存
  2. 執行 開發部署管道
    1. 選擇 概述 中
    2. 找出新建立的 開發部署管道 在 管道 節
    3. 選取 … 輸入管道的右側
    4. 選擇 執行，並在強制回應視窗中確認
    5. 選取 … 到現在管道的右側
    6. 選擇 查看詳細資訊
  3. 從管道執行的詳細資訊，監視進度，直到成功完成。 管道執行需要45到60分鐘。

4.下載並運行WKND React應用

隨著AEMas a Cloud Service引導程式與WKND Site專案的內容一起下載並啟動範例WKND React應用程式，該應用程式會透過AEM無周邊GraphQL API取用WKND Site的內容。

步驟的截屏

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

    $ cd ~/Code
$ git clone --branch tutorial/react git@github.com:adobe/aem-guides-wknd-graphql.git

  2. 開啟資料夾 ~/Code/aem-guides-wknd-graphql 在IDE中。

  3. 在IDE中，開啟檔案 react-app/.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」 > 「英文」 > 「Adventures」

  3. 開啟 南猶他騎腳踏車 資料夾

  4. 選取 南猶他騎腳踏車 內容片段，然後選取 編輯 從頂端動作列

  5. 更新內容片段的某些欄位，例如：

    • 標題: Cycling Utah's National Parks
    • 行程長度： 6 Days
    • 困難： Intermediate
    • 價格: $3500
    • 主映像： /content/dam/wknd/en/activities/cycling/mountain-biking.jpg

  6. 選擇 儲存 在頂端動作列中

  7. 選擇 快速發佈 從頂端動作列的 …

  8. 重新整理在上執行的React應用程式 http://localhost:3000.

  9. 在React應用程式中，選取現在更新的，並驗證對內容片段所做的內容變更。

  10. 在AEM製作服務中使用相同的方法：

    1. 取消發佈現有的冒險內容片段，然後確認其已從React應用程式體驗中移除
    2. 建立並發佈新的冒險內容片段，並驗證其是否顯示在React應用程式體驗中
    秘訣

    如果您不熟悉如何建立及發佈新內容，或不熟悉如何取消發佈現有內容片段，請觀看上方的螢幕錄影。

恭喜！

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

若要詳細了解React應用程式如何從AEMas a Cloud Service取用內容，請查看 AEM Headless教學課程. 本教學課程探討AEM中內容片段的建立方式，以及此React應用程式如何以JSON取用其內容。

後續步驟

本頁內容