使用本機AEM SDK的AEM Headless快速設定 setup

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
內容片段

建立對象：

初學者
開發人員

AEM Headless快速設定讓您使用WKND Site範例專案中的內容，以AEM Headless進行操作，並提供在AEM Headless GraphQL API使用內容的範例React應用程式(SPA)。本指南使用AEM as a Cloud Service SDK。

先決條件 prerequisites

下列工具應在本機安裝：

1.安裝AEM SDK aem-sdk

此設定使用AEM as a Cloud Service SDK來探索AEM的GraphQL API。本節提供快速指南，說明如何安裝AEM SDK並以作者模式執行。如需設定本機開發環境的詳細指南，請參閱此處。

NOTE

您也可以使用AEM as a Cloud Service環境來學習本教學課程。在本教學課程中，我們還將介紹使用雲端環境的其他注意事項。

導覽至 軟體發佈入口網站 > AEM as a Cloud Service，然後下載最新版的 AEM SDK。
解壓縮下載內容並將Quickstart jar (aem-sdk-quickstart-XXX.jar)複製到專用資料夾，即~/aem-sdk/author。
將jar檔案重新命名為aem-author-p4502.jar。

author名稱指定Quickstart jar會以作者模式啟動。 p4502指定快速入門在連線埠4502上執行。

若要安裝和啟動AEM執行個體，請在包含jar檔案的資料夾中開啟命令提示字元，然後執行下列命令：

code language-shell
`$ cd ~/aem-sdk/author $ java -jar aem-author-p4502.jar`

提供管理員密碼做為admin。可接受任何管理員密碼，但建議使用admin進行本機開發，以減少重新設定的需要。
當AEM服務完成安裝時，新的瀏覽器視窗應在http://localhost:4502開啟。
使用AEM初始啟動期間選取的使用者名稱admin和密碼登入（通常是admin）。

2.安裝範例內容 install-sample-content

來自 WKND參考網站 的範例內容是用來加速教學課程。 WKND是虛構的生活風格品牌，通常與AEM培訓一起使用。

WKND網站包含公開GraphQL端點所需的設定。在真實世界的實作中，請依照檔案說明的步驟，將GraphQL端點🔗納入您的客戶專案。 CORS也已封裝為WKND網站的一部分。需要CORS設定才能授與外部應用程式的存取權，有關CORS的詳細資訊可在下方找到。

下載適用於WKND網站的最新編譯的AEM套件： aem-guides-wknd.all-x.x.x.zip。

note note
NOTE
請確定下載與AEM as a Cloud Service相容的標準版本，不 `classic`版本。

從 AEM開始 功能表，瀏覽至工具 > 部署 > 套件。
按一下 上傳封裝，然後選擇在先前步驟中下載的WKND封裝。按一下安裝以安裝封裝。
從 AEM Start 功能表，瀏覽至 Assets > 檔案 > WKND共用 > 英文 > 冒險。

這是構成WKND品牌宣傳的各種冒險的所有資產的資料夾。這包括影像和視訊等傳統媒體型別，以及 內容片段 等AEM特有的媒體。
按一下 Downhill Skiing Wyoming 資料夾，然後按一下 Downhill Skiing Wyoming內容片段 卡片：
內容片段編輯器隨即開啟，以進行「懷俄明州下山滑雪」冒險活動。

觀察各種欄位，例如 Title、Description 和 Activity 定義片段。

內容片段 是在AEM中管理內容的方式之一。內容片段是可重複使用的、與呈現方式無關的內容，由結構化資料元素組成，例如文字、RTF文字、日期或其他內容片段的參考。內容片段稍後會在快速設定中更詳細地探討。
按一下取消以關閉片段。您可以隨意瀏覽至其他資料夾，並探索其他冒險內容。

NOTE

如果使用Cloud Service環境，請參閱檔案，瞭解如何將程式碼基底（例如WKND參考網站）部署到Cloud Service環境。

3.下載並執行WKND React應用程式 sample-app

本教學課程的目標之一，是說明如何使用GraphQL API取用外部應用程式的AEM內容。本教學課程使用範例React應用程式。 React應用程式經過刻意簡化，可專注與AEM的GraphQL API整合。

開啟新的命令提示字元，並從GitHub複製範例React應用程式：

code language-shell
`$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git $ cd aem-guides-wknd-graphql/react-app`

在您選擇的IDE中開啟aem-guides-wknd-graphql/react-app中的React應用程式。

在IDE中，在/.env.development開啟檔案.env.development。確認REACT_APP_AUTHORIZATION行已取消註解，且檔案宣告下列變數：

code language-plain

code language-plain
`REACT_APP_HOST_URI=http://localhost:4502 REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json # Use Authorization when connecting to an AEM Author environment REACT_APP_AUTHORIZATION=admin:admin`

REACT_APP_HOST_URI=http://localhost:4502
REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
# Use Authorization when connecting to an AEM Author environment
REACT_APP_AUTHORIZATION=admin:admin

確定REACT_APP_HOST_URI指向您的本機AEM SDK。為方便起見，此快速入門會將React應用程式連線至 AEM作者。作者服務需要驗證，所以應用程式使用admin使用者建立連線。將應用程式連線至AEM Author是開發期間的常見做法，因為這有助於在無需發佈變更的情況下快速迭代內容。

note note
NOTE
在生產案例中，應用程式將連線至AEM Publish 環境。生產部署區段將對此進行詳細介紹。

安裝並啟動React應用程式：

code language-shell
`$ cd aem-guides-wknd-graphql/react-app $ npm install $ npm start`

新的瀏覽器視窗會在http://localhost:3000上自動開啟應用程式。

隨即顯示AEM冒險內容清單。
按一下其中一個冒險影像以檢視冒險詳細資料。系統會向AEM提出要求，要求您傳回冒險的詳細資訊。
使用瀏覽器的開發人員工具來檢查網路要求。檢視 XHR 要求，並觀察對/graphql/execute.json/...的多個GET要求。此路徑首碼會叫用AEM的持續查詢端點，並在首碼之後使用名稱和編碼引數選取要執行的持續查詢。