文件AEMAEM as a Cloud Service 教學課程

使用AEM Edge函式建立動態Edge Delivery Services區塊

最後更新： 2026年8月13日
  • 適用對象：
  • Experience Manager as a Cloud Service

建立對象：

  • Intermediate
  • Developer
IMPORTANT
AEM Edge功能目前仍在測試階段。 功能和檔案可能會變更。 如需意見回饋，請連絡aemcs-edgecompute-feedback@adobe.com。

瞭解如何從​ AEM區塊 ​呼叫Edge Delivery Services Edge函式，讓區塊可以從協力廠商API 擷取動態資料。

Edge Delivery Services是專為快速而打造。 它會在發佈過程中產生語意HTML檔案，且頁面本身沒有伺服器端邏輯，因此區塊無法自行擷取動態資料，例如庫存或來自協力廠商系統的定價。 直接從瀏覽器擷取它是替代方法，但瀏覽器可能沒有使用者工作階段可供驗證，而且放在使用者端程式碼中的任何​API Token是公用的。

AEM Edge函式可解決此問題。 它會在Adobe CDN上執行、保留認證、代表區塊呼叫第三方API，並只傳回區塊需要的資料。

邏輯流程如下所示：

Browser (block) → AEM Edge Function (holds credentials) → Third-party API

您將建置的內容

在本教學課程中，您會建立端對端流程，將Edge Delivery Services區塊連線至AEM Edge函式端點，該端點會呼叫第三方API並將動態資料傳回至區塊。

為了示範目的，Frescopa網站專案用作Edge Delivery Services網站。 您開發了​ 預估傳遞檢查程式 ​區塊，其會呼叫AEM Edge函式來檢查產品可用性與傳遞時間。 區塊會在Universal Editor中編寫，而AEM Edge函式端點會在個別專案中開發。 區塊會呼叫端點，而端點會呼叫兩個上游API （在本教學課程中模擬），並傳回區塊的合併回應。

預估的傳遞檢查器區塊流程

針對您自己Edge Delivery Services網站中的動態資料需求，您可以遵循相同步驟，在專屬區塊中交換和AEM Edge函式程式碼。

高層級步驟為：

  1. 開發AEM Edge函式：實作將兩個上游呼叫合併為一個回應的處理常式、為本機開發啟用CORS，以及在本機測試端點。
  2. 開發Edge Delivery Services區塊：建構區塊的JSON模型、JavaScript和CSS，並在Universal Editor中編寫它。
  3. 將區塊連線至AEM Edge函式：從區塊呼叫AEM Edge函式的本機端點，在部署後切換到相對路徑，並處理載入和錯誤狀態。
  4. 部署及驗證：合併程式碼、部署AEM Edge函式並發佈Edge Delivery Services網站頁面，並確認區塊會從您網站網域上部署的端點轉譯即時資料。

先決條件

若要完成本教學課程，請確定您已完成下列操作：

NOTE
為了示範，本教學課程會模擬協力廠商API呼叫（目錄查閱和傳送估計值），讓您可專注在區塊與AEM Edge函式之間的連線，而非特定協力廠商整合。

本機開發與已部署的比較

在開發之前，請務必瞭解本機開發和已部署環境之間的差異。 下表總結了這些差異：

層面
本機開發
已部署
Edge Delivery Services區塊
直接呼叫本機AEM Edge函式來源，例如http://127.0.0.1:7676/api/frescopa/estimated-delivery
呼叫相對路徑，例如/api/frescopa/estimated-delivery
路由
直接呼叫
CDN來源選擇器(cdn.yaml)將路徑轉送至AEM Edge函式執行個體
AEM Edge函式例項
透過aio aem edge-functions serve在本機執行
部署至Adobe CDN且範圍設定為Edge Delivery Services網站
上游API呼叫
在本教學課程中模擬
已在本教學課程中模擬，不過可交換給您專案中的實際API使用者端

CORS處理

讓我們來看看CORS處理本機開發和已部署環境之間的差異。

  • 本機開發： Edge Delivery Services本機開發伺服器執行於連線埠3000，AEM Edge函式的本機開發伺服器執行於連線埠7676。 兩種不同的來源和連線埠，因此AEM Edge函式必須傳回CORS標頭，否則瀏覽器會封鎖回應。
  • 已部署：​部署後，CDN會將相對路徑路由至與網站相同網域上的AEM Edge函式，因此在那裡不需要CORS處理。

您在AEM Edge函式處理常式中實作CORS標題。 然後，區塊的JavaScript會根據環境挑選相對或絕對路徑。

參考實作

一個完整的工作範例將說明本教學課程的每個步驟。 使用下列差異來對照它檢查您自己的實施，或直接跳至程式碼而不執行每個步驟。

  • AEM Edge函式變更：相對於樣板的main分支，路由、處理常式、上游呼叫模擬和CORS協助程式的完整差異。
  • Edge Delivery Services區塊變更：區塊的JSON模型、JavaScript和CSS的完整差異（相對於Frescopa網站的main分支）。
  • 即時預覽：在Frescopa示範網站上以端對端方式執行的「預估傳送檢查器」區塊，並部署AEM Edge函式來回應即時請求。

後續步驟

從開發AEM Edge函式開始，因為Edge Delivery Services區塊需要端點才能連線至任何專案。

其他資源

recommendation-more-help
experience-manager-learn-help-cloud-service