在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环境中设置AEM as a Cloud Service 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 as a Cloud Service环境中设置AEM Edge功能
从样板模板创建AEM Edge函数项目
在本地克隆、查看和运行AEM Edge函数项目
查看、管理和部署CDN配置
构建AEM Edge函数并将其部署到Adobe CDN
验证端点是否正常工作

先决条件

在开始之前，请确保已具备以下条件。

Node.js和npm已在本地安装
用于从样板模板创建项目的GitHub帐户
访问创作实例上具有 Cloud Manager 部署管理器角色或 AEM管理员 产品配置文件的AEM as a Cloud Service环境
在本地克隆了WKND站点项目或您自己的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 Functions之前，请将AEM站点部署到Target环境。如果您的站点已部署，请验证它是否可访问，并跳至步骤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

Adobe Developer Console (ADC)项目的API凭据配置 — 包括AEM内容分发网络(CDN) API卡 — 未在本教程中完成。但是，当您想要从CI/CD系统部署AEM Edge Functions项目时，必须执行此操作。有关详细信息，请参阅Adobe Developer Console集成和CI/CD安装程序。

使用以下命令查看AEM Edge函数设置详细信息：

$ aio aem edge-functions info

输出应如下所示：

AEM Edge函数信息输出

步骤4：创建AEM Edge函数项目

从aem-edge-functions-boilerplate GitHub模板创建AEM Edge Functions项目。样板包括开始使用所需的文件和配置。

导航到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 Functions项目

在进行更改或部署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 Function服务。例如，以下代码来自WKND AEM Edge函数项目：

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

有关支持的属性的详细信息，请参阅edgeFunctions.yaml引用。

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 Functions项目，这些命令使用存储在.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匹配。此外，您还必须是Author实例上 AEM Administrator - author 产品配置文件的一部分。

例如，输出应类似于以下屏幕截图：

AEM Edge Functions生成和部署输出

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 Functions，根据样板模板创建项目，克隆项目，审查项目文件，在本地运行项目，审查和部署CDN配置，构建和部署项目，以及验证端点。

其他资源

recommendation-more-help

experience-manager-learn-help-cloud-service