AEM無頭式快速設定可讓您使用WKND Site範例專案中的內容,以及透過AEM無頭式GraphQL API取用內容的範例React應用程式(SPA),來與AEM無頭式實作。
要執行此快速設定,需要以下操作:
首先,建立用於部署WKND網站的Cloud Manager Git存放庫。 WKND Site是範例AEM網站專案,其中包含快速設定的React應用程式所使用的內容(內容片段)和GraphQL AEM端點。
步驟的截屏
aem-headless-quick-setup
在建立Cloud Manager Git存放庫後,從GitHub複製WKND Site專案的原始碼,並推送至Cloud Manager Git存放庫。 現在,Cloud Manager可存取WKND Site專案,並部署至AEMas a Cloud Service環境。
步驟的截屏
從命令列,從GitHub複製範例WKND網站專案的原始碼
$ mkdir -p ~/Code
$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd.git
將Cloud Manager Git存放庫新增為遠端
選擇 儲存庫 中
選擇 存取存放庫資訊 從頂端動作列
在中找到執行命令 將遠端新增至您的Git存放庫 從命令行
$ cd aem-guides-wknd
$ git remote add adobe https://git.cloudmanager.adobe.com/<YOUR ADOBE ORGANIZATION>/aem-headless-quick-setup/
將範例專案的原始碼從您本機的Git存放庫推送至Cloud Manager Git存放庫
$ git push adobe master:main
提示輸入憑證時,請提供 使用者名稱 和 密碼 從Cloud Manager的 儲存庫資訊 模式。
將WKND Site專案推送至Cloud Manager Git存放庫後,便無法使用Cloud Manager管道將其部署至AEMas a Cloud Service。
請記得,WKND Site專案提供透過AEM無周邊GraphQL API使用之React應用程式的範例內容。
步驟的截屏
Dev Deployment pipeline
aem-headless-quick-setup
在 存放庫 選取方塊main
從 Git分支 選取方塊隨著AEMas a Cloud Service引導程式與WKND Site專案的內容一起下載並啟動範例WKND React應用程式,該應用程式會透過AEM無周邊GraphQL API取用WKND Site的內容。
步驟的截屏
從命令列,從GitHub複製React應用程式的原始碼。
$ cd ~/Code
$ git clone --branch tutorial/react git@github.com:adobe/aem-guides-wknd-graphql.git
開啟資料夾 ~/Code/aem-guides-wknd-graphql
在IDE中。
在IDE中,開啟檔案 react-app/.env.development
.
指向AEMas a Cloud Service 發佈 服務的主機URI,來自 REACT_APP_HOST_URI
屬性。
REACT_APP_HOST_URI=https://publish-pXXXX-eYYYY.adobeaemcloud.com/
...
要查找AEMas a Cloud Service發佈服務的主機URI,請執行以下操作:
在IDE中,將更改保存到 .env.development
從命令列執行React應用程式
$ cd ~/Code/aem-guides-wknd-graphql/react-app
$ npm install
$ npm start
在本機執行的React應用程式,從 http://localhost:3000 並顯示冒險清單,這些冒險來自使用AEM Headless的GraphQL API的AEMas a Cloud Service。
透過範例WKND React應用程式連線及使用AEM Headless GraphQL API中的內容,撰寫AEM Author服務中的內容,並了解React應用程式的體驗如何一併更新。
步驟的截屏
登入AEMas a Cloud Service作者服務
導覽至 「資產」 > 「檔案」 > 「WKND」 > 「英文」 > 「Adventures」
開啟 南猶他騎腳踏車 資料夾
選取 南猶他騎腳踏車 內容片段,然後選取 編輯 從頂端動作列
更新內容片段的某些欄位,例如:
Cycling Utah's National Parks
6 Days
Intermediate
$3500
/content/dam/wknd/en/activities/cycling/mountain-biking.jpg
選擇 儲存 在頂端動作列中
選擇 快速發佈 從頂端動作列的 …
重新整理在上執行的React應用程式 http://localhost:3000.
在React應用程式中,選取現在更新的,並驗證對內容片段所做的內容變更。
在AEM製作服務中使用相同的方法:
如果您不熟悉如何建立及發佈新內容,或不熟悉如何取消發佈現有內容片段,請觀看上方的螢幕錄影。
恭喜! 您已成功使用AEM Headless來支援React應用程式!
若要詳細了解React應用程式如何從AEMas a Cloud Service取用內容,請查看 AEM Headless教學課程. 本教學課程探討AEM中內容片段的建立方式,以及此React應用程式如何以JSON取用其內容。