「AEM無頭」快速設定可讓您使用WKND站點示例項目中的內容與AEMHeadless進行操作,並提供一個示例反應應用(aSPA),該應用會通過無頭圖形QL APIAEM來消耗內容。
要執行此快速設定,需要執行以下操作:
首先,建立用於部署WKND站點的Cloud Manager Git儲存庫。 WKND站點是一個示例網站項AEM目,它包含快速設定的React App使用的內AEM容(內容片段)和GraphQL終結點。
步驟截屏
aem-headless-quick-setup-wknd
建立Cloud Manager Git儲存庫後,從GitHub克隆WKND站點項目的原始碼,並將其推送到Cloud Manager Git儲存庫。 現在,Cloud Manager可以訪問WKND站點項目,並將其部署到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-wknd/
將示例項目的原始碼從您的本地Git儲存庫推送到Cloud Manager Git儲存庫
$ git push adobe main:main
提示輸入憑據時,請提供 用戶名 和 密碼 從雲管理器 資料庫資訊 模式。
將WKND站點項目推送到Cloud Manager Git儲存庫後,無法使用Cloud Manager管道將其部署到AEMas a Cloud Service。
請記住,WKND站點項目提供的示例內容是React應用程式使用的無AEM頭GraphQL API。
步驟截屏
Dev Deployment pipeline
aem-headless-quick-setup-wknd
的 儲存庫 選擇框main
從 Git分支 選擇框通AEM過as a Cloud Service引導WKND站點項目的內容,下載並啟動示例WKND React App,該示例通過無頭GraphQL API消耗WKND站點的AEM內容。
步驟截屏
在命令行中,從GitHub克隆React App的原始碼。
$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
開啟資料夾 ~/Code/aem-guides-wknd-graphql/react-app
在IDE中。
在IDE中,開啟檔案 .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 App
$ cd ~/Code/aem-guides-wknd-graphql/react-app
$ npm install
$ npm start
本地運行的React App啟動 http://localhost:3000 並顯示冒險清單,這些冒險是使用AEMHeadless的AEMGraphQL API從as a Cloud Service獲取的。
當示例WKND React App連接到AEMHeadless GraphQL API並從其中使用內容時,在AEM Author服務中編寫內容,並查看React App的體驗如何一致更新。
步驟截屏
登錄到AEMas a Cloud Service作者服務
導航到 「資產」>「檔案」>「WKND共用」>「英語」>「冒險」
開啟 南猶他州腳踏車 資料夾
選擇 南猶他州腳踏車 內容片段,並選擇 編輯 從頂部操作欄
更新內容片段的某些欄位,例如:
Cycling Utah's National Parks
6 Days
Intermediate
3500
/content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg
選擇 保存 的子菜單。
選擇 快速發佈 從頂部操作欄 …
刷新運行在上的React App http://localhost:3000。
在React App中,選擇現在更新的循環冒險,並驗證對內容片段所做的內容更改。
在AEM Author服務中,使用相同的方法:
如果您不熟悉建立和發佈新內容或取消發佈現有內容片段,請查看上面的截屏。
恭喜! 您已成功使AEM用無頭功能為React App提供電源!
要詳細瞭解React App如何使用來自as a Cloud Service的AEM內容,請簽出 無頭AEM教程。 本教程將探討內容片AEM段在建立時的使用方式,以及此React App如何將其內容作為JSON使用。