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

後續步驟

本頁內容