在AEM as a Cloud Service上設定AEM Edge功能

最後更新： 2026年6月25日

適用對象：
Experience Manager as a Cloud Service

主題：
Developing

建立對象：

Intermediate
Admin
Developer

IMPORTANT

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

瞭解如何在AEM as a Cloud Service環境中設定AEM Edge功能。

本教學課程涵蓋CLI安裝、AEM網站部署、樣板範本中的專案設定、CDN設定，以及AEM as a Cloud Service上工作端點的部署。

此教學課程使用WKND Sites專案作為示範網站。您可以對自己的網站和環境遵循相同的步驟。

您將建置的內容

AEM Edge函式是在Adobe CDN邊緣執行的JavaScript模組，而不是在您的AEM原始碼上。您部署一個名為my-edge-function的AEM Edge函式，其中包含兩個路由：

/hello-world從邊緣傳回問候語
/weather偵測訪客在邊緣的位置、呼叫Open-Meteo API，並傳回其城市的目前溫度

在開發期間，您可使用開發伺服器在本機測試AEM Edge功能。然後您將CDN設定複製到AEM網站專案、透過Cloud Manager或RDE部署、將AEM Edge函式（JavaScript模組）推送到Adobe CDN，以及在瀏覽器中或透過curl驗證兩個端點。

高階步驟：

安裝Adobe CLI和AEM Edge函式外掛程式
將您的AEM網站部署至RDE或開發環境
在您的AEM環境中設定AEM as a Cloud Service Edge功能
從樣板範本建立AEM Edge函式專案
在本機複製、檢閱及執行AEM Edge函式專案
檢閱、管理和部署CDN設定
建置AEM Edge功能並部署至Adobe CDN
驗證端點是否正常運作

先決條件

開始之前，請確定已具備下列專案。

Node.js和npm已在本機安裝
從範本建立專案的GitHub帳戶
存取作者執行個體上具有 Cloud Manager 部署管理員角色或 AEM管理員 產品設定檔的AEM as a Cloud Service環境
WKND Sites專案或您自己的AEM網站專案複製到本機

NOTE

若為AEM as a Cloud Service，您可以為每個環境部署一個AEM Edge函式。

步驟1：安裝CLI和外掛程式

安裝或更新Adobe aio CLI、AEM Edge函式和RDE外掛程式。

全新安裝

如果是全新安裝，請執行以下命令：

code language-bash

code language-bash
`# Install the Adobe CLI $ npm install -g @adobe/aio-cli # Install the AEM Edge Functions plugin $ aio plugins install @adobe/aio-cli-plugin-aem-edge-functions # Install the RDE plugin if you are using an RDE environment $ aio plugins install @adobe/aio-cli-plugin-aem-rde`

# Install the Adobe CLI
$ npm install -g @adobe/aio-cli

# Install the AEM Edge Functions plugin
$ aio plugins install @adobe/aio-cli-plugin-aem-edge-functions

# Install the RDE plugin if you are using an RDE environment
$ aio plugins install @adobe/aio-cli-plugin-aem-rde

更新現有的

更新Adobe CLI和已安裝的外掛程式：

code language-bash
`# Update the Adobe CLI $ aio update # List installed plugins (confirm the AEM Edge Functions plugin is listed) $ aio plugins # Update the installed plugins $ aio plugins update`

例如，輸出應該看起來像下面的熒幕擷圖：

CLI版本輸出

步驟2：部署您的AEM網站

設定AEM Edge功能之前，請先將AEM網站部署至目標環境。如果您的網站已部署，請確認其可供存取，並跳至步驟3。

RDE

從WKND的根目錄或您自己的網站專案，執行以下命令以設定網站並將其部署到RDE：

code language-bash

code language-bash
`# Set up the RDE $ aio aem:rde:setup # Build the site $ mvn clean install $ aio aem:rde:install all/target/aem-guides-wknd.all-X.Y.Z-SNAPSHOT.zip $ aio aem:rde:install dispatcher/target/aem-guides-wknd.dispatcher.cloud-X.Y.Z-SNAPSHOT.zip # Verify the RDE and site are deployed $ aio aem:rde:status`

# Set up the RDE
$ aio aem:rde:setup

# Build the site
$ mvn clean install
$ aio aem:rde:install all/target/aem-guides-wknd.all-X.Y.Z-SNAPSHOT.zip
$ aio aem:rde:install dispatcher/target/aem-guides-wknd.dispatcher.cloud-X.Y.Z-SNAPSHOT.zip

# Verify the RDE and site are deployed
$ aio aem:rde:status

驗證網站是否可在https://publish-pXXXXX-eYYYYY.adobeaemcloud.com/存取。

如需完整的逐步說明，請參閱快速開發環境。

開發環境

使用Cloud Manager中的完整棧疊管道將WKND或您自己的網站部署到開發環境。
驗證網站是否可在https://publish-pXXXXX-eYYYYY.adobeaemcloud.com/存取。

如需完整的逐步解說，請參閱完整棧疊管道。

步驟3：在您的環境中設定AEM Edge功能

必須在AEM環境中設定AEM as a Cloud Service Edge功能。它可讓您將程式碼和設定檔案部署至Adobe CDN，以便從網站中的AEM程式碼叫用JavaScript Edge函式支援的路由。

從WKND （或您自己的） AEM專案的根目錄執行以下命令：

$ aio aem edge-functions setup

如果您尚未登入Adobe IMS，命令會觸發登入流程。安裝程式會提示輸入方案、環境、網站型別和ADC專案設定詳細資訊。安裝程式詳細資料儲存在.aio檔案中，提供AEM Edge函式CLI命令的內容。

AEM Edge函式設定提示

IMPORTANT

針對API認證(包括Adobe Developer Console內容傳遞網路(CDN) API卡)設定AEM (ADC)專案的作業，不會在本教學課程中進行。但是，當您想要從CI/CD系統部署AEM Edge函式專案時，必須執行此作業。如需詳細資訊，請參閱Adobe Developer Console整合和CI/CD設定。

使用下列命令檢閱AEM Edge函式設定詳細資料：

$ aio aem edge-functions info

輸出應該如下所示：

AEM Edge函式資訊輸出

步驟4：建立AEM Edge函式專案

從aem-edge-functions-boilerplate GitHub範本建立AEM Edge函式專案。範本包括開始使用所需的檔案和設定。

導覽至GitHub上的aem-edge-functions-boilerplate。
在右上角，選取使用此範本 > 建立新的存放庫。
提供存放庫名稱（例如，wknd-edge-functions）、新增說明、將可見度設定為私人，並選取建立存放庫。

步驟5：複製、檢閱及執行AEM Edge函式專案

複製AEM Edge函式專案

複製您在步驟4中建立的存放庫，然後在IDE中與WKND （或您自己的）專案一起開啟。大多數編輯器支援工作區或多根檢視，可讓您同時在兩個專案中工作。

# Clone the repository
$ git clone https://github.com/<your-org>/<your-project-name>.git

例如，在單一IDE工作區中開啟WKND Sites專案和WKND AEM Edge Functions專案：

在IDE中將WKND和WKND AEM Edge功能專案作為工作區

檢閱AEM Edge功能專案

進行變更或部署AEM Edge Functions專案前，請先檢閱定義AEM Edge Functions合約的重要檔案。

package.json包含專案相依性。請注意@fastly/js-compute相依性。如需詳細資訊，請參閱運算平台🔗上的JavaScript。

src/index.js是函式進入點，並包含專案的主要邏輯。它使用Fastly Compute的addEventListener("fetch", ...)模式。所有傳入的請求都會流經handleRequest函式，您可在此加入路由比對邏輯。例如，下列程式碼來自範本：

code language-js

code language-js
// src/index.js addEventListener("fetch", (event) => event.respondWith(handleRequest(event))); async function handleRequest(event) { const req = event.request; const url = new URL(req.url); let finalResponse; try { // Route matching logic if (url.pathname === "/" && req.method === "GET") { finalResponse = new Response("Hello World from the edge!", { status: 200 }); } else if (url.pathname === "/hello-world" && req.method === "GET") { finalResponse = new Response("Hello World from the edge!", { status: 200 }); } else if (url.pathname === "/weather" && req.method === "GET") { finalResponse = await weatherHandler(req, event.client); } else { finalResponse = response.notFound(); } } catch (err) { finalResponse = new Response("Internal Server Error", { status: 500 }); } return finalResponse; }

// src/index.js
addEventListener("fetch", (event) => event.respondWith(handleRequest(event)));

async function handleRequest(event) {
    const req = event.request;
    const url = new URL(req.url);

    let finalResponse;

    try {
        // Route matching logic
        if (url.pathname === "/" && req.method === "GET") {
            finalResponse = new Response("Hello World from the edge!", { status: 200 });
        } else if (url.pathname === "/hello-world" && req.method === "GET") {
            finalResponse = new Response("Hello World from the edge!", { status: 200 });
        } else if (url.pathname === "/weather" && req.method === "GET") {
            finalResponse = await weatherHandler(req, event.client);
        } else {
            finalResponse = response.notFound();
        }
    } catch (err) {
        finalResponse = new Response("Internal Server Error", { status: 500 });
    }

    return finalResponse;
}

單一AEM Edge函式可以處理handleRequest中if陳述式的多個路由。

fastly.toml設定本機開發伺服器。如需詳細資訊，請參閱Fastly.toml參考。
config/包含AEM Edge功能服務和CDN路由規則的設定檔。使用Cloud Manager設定管道將這些檔案部署到您的AEM as a Cloud Service環境。步驟6涵蓋該程式。

檢閱剩餘的專案檔（例如test/、src/lib/和README.md）以瞭解完整設定。

在本機執行AEM Edge函式專案

若要快速反複執行，您可以在本機執行AEM Edge函式專案。從AEM Edge Functions專案目錄，安裝相依性並啟動本機開發伺服器：

# Navigate to the project directory (replace with your project name)
$ cd wknd-edge-functions

# Install dependencies
$ npm install

# Start the local development server
$ aio aem edge-functions serve

伺服器從http://127.0.0.1:7676開始。

例如，輸出應該看起來像下面的熒幕擷圖：

本機開發伺服器輸出

步驟6：檢閱和部署CDN設定

AEM Edge Functions專案包含config/目錄中的CDN設定檔。在將範本複製到AEM網站專案之前，請先檢閱這些範本。

檢閱CDN設定

檢閱AEM Edge Functions專案config/目錄中的CDN設定檔。

config/edgeFunctions.yaml宣告AEM Edge函式服務。例如，下列程式碼來自WKND AEM Edge函式專案：

kind: "EdgeFunctions"
version: "1"
data:
  functions:
    - name: my-edge-function

如需支援屬性的詳細資訊，請參閱edgeFunctions.yaml reference。

config/cdn.yaml會宣告將流量導向至AEM Edge函式服務的CDN路由規則。例如，下列程式碼來自WKND AEM Edge函式專案：

kind: 'CDN'
version: '1'
data:
  originSelectors:
    rules:
      - name: route-weather-to-edge-function
        when: { reqProperty: path, equals: "/weather" }
        action:
          type: selectAemOrigin
          originName: edgefunction-my-edge-function
          skipCache: true
      - name: route-hello-world-to-edge-function
        when: { reqProperty: path, equals: "/hello-world" }
        action:
          type: selectAemOrigin
          originName: edgefunction-my-edge-function
          skipCache: true

重要標註：

originName必須遵循模式edgefunction-<edge-function-name>，其中<edge-function-name>是在edgeFunctions.yaml中宣告的AEM Edge函式的名稱。
type必須為selectAemOrigin。
skipCache已設定為true，略過請求的CDN快取。

如需詳細資訊，請參閱來源選取器。請注意，cdn.yaml檔案也支援流量篩選規則、請求和回應轉換，以及其他CDN功能。如需詳細資訊，請參閱在CDN設定流量。

管理CDN設定

將所有CDN設定保留在您的AEM網站專案的config/目錄中，因為您的網站可能已經包含cdn.yaml中的WAF規則、流量篩選器和其他設定。如此，所有CDN設定都會集中在一處。

將edgeFunctions.yaml從AEM Edge Functions專案複製到 AEM網站專案 的config/目錄。
將AEM Edge Functions專案的cdn.yaml中的originSelectors區段合併至您的 AEM網站專案 的cdn.yaml。

例如，WKND網站專案中的CDN設定檔案如下所示：

WKND專案中的 CDN設定檔

部署CDN設定

最後，將CDN設定部署至您的AEM as a Cloud Service環境。

RDE

對於RDE環境，請從WKND （或您自己的） AEM專案的根執行以下命令：

code language-bash
`# Navigate to the AEM project directory (replace with your project name) $ cd aem-guides-wknd # Deploy the CDN configuration $ aio aem:rde:install -t env-config ./config`

開發環境

對於開發環境，提交設定檔案並在Cloud Manager中執行設定管道：

提交設定檔案並將其推送到Cloud Manager Git存放庫。
導覽至Cloud Manager中的管道，然後為您的環境執行設定管道。

Cloud Manager設定管道執行

驗證組態是否已成功部署：

$ aio aem edge-functions list

輸出應列出my-edge-function （或您在edgeFunctions.yaml中宣告的任何名稱）。

AEM Edge函式清單輸出

步驟7：建置和部署AEM Edge函式專案

使用下列命令建置及部署AEM Edge函式專案，這些命令會使用儲存在.aio檔案中的內容。

# Navigate to the AEM Edge Functions project directory (replace with your project name)
$ cd wknd-edge-functions

# Review to make sure you are deploying to the correct AEM as a Cloud Service environment
$ aio aem edge-functions info

# Build the project
$ aio aem edge-functions build

# Deploy to Adobe CDN
$ aio aem edge-functions deploy my-edge-function

傳遞至deploy的名稱必須符合config/edgeFunctions.yaml中宣告的name。您也必須屬於作者執行個體上的 AEM管理員 — 作者 產品設定檔。

例如，輸出應該看起來像下面的熒幕擷圖：

AEM Edge函式建置和部署輸出

IMPORTANT

若要從CI/CD系統部署AEM Edge Functions專案，您需要Adobe Developer Console (ADC)專案的API認證，包括AEM內容傳遞網路(CDN) API卡片。如需詳細資訊，請參閱Adobe Developer Console整合和CI/CD設定。

步驟8：驗證端點

在瀏覽器中或使用curl驗證已部署的端點：

curl https://edgefunction-pXXXXX-eYYYYY-my-edge-function.adobeaemcloud.com/hello-world
curl https://edgefunction-pXXXXX-eYYYYY-my-edge-function.adobeaemcloud.com/weather

將pXXXXX和eYYYYY取代為您的Cloud Manager程式和環境ID。

例如，回應看起來像下面的熒幕擷圖：

即時端點回應

NOTE

edgefunction-pXXXXX-eYYYYY-<edge-function-name>.adobeaemcloud.com網域僅供偵錯使用，且無法保證穩定。在生產環境中，要求會透過cdn.yaml中的CDN路由規則，透過您網站的網域達到AEM Edge功能。

在真實世界情況中，請將AEM Edge函式用於CDN的伺服器端邏輯，並透過cdn.yaml中定義的路由路徑從您的網站呼叫它們。如需進階設定，請參閱AEM Edge功能產品檔案。

摘要

您已成功在AEM as a Cloud Service環境中設定AEM Edge功能、從樣板範本建立專案、複製專案、檢閱專案檔案、在本機執行、檢閱和部署CDN設定、建立和部署專案，以及驗證端點。

其他資源

recommendation-more-help

experience-manager-learn-help-cloud-service