文档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块 ​调用Edge Delivery Services函数，以便该块可以从第三方API 获取动态数据。

Edge Delivery Services专为提高速度而构建。 它会在发布过程中生成语义HTML文档，并且页面本身没有服务器端逻辑，因此块无法单独从第三方系统获取动态数据，例如库存或定价。 直接从浏览器获取此令牌是一种替代方法，但浏览器可能没有用于进行身份验证的用户会话，并且客户端代码中的任何​API令牌都是公共。

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函数以检查产品可用性和交付时间。 此块在通用编辑器中创作，而AEM Edge函数端点是在单独的项目中开发的。 该块调用端点，该端点调用两个上游API（在本教程中模拟）并返回对块的组合响应。

预计的投放检查器块流

您可以按照与满足自己Edge Delivery Services网站中的动态数据需求相同的步骤，在自己所在的块中交换和AEM Edge函数代码。

高级步骤包括：

  1. 开发AEM Edge函数：实现一个处理程序，该处理程序将两个上游调用合并为一个响应，为本地开发启用CORS，并在本地测试端点。
  2. 开发Edge Delivery Services块：为块的JSON模型、JavaScript和CSS提供基架，并在通用编辑器中创作它。
  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函数更改：路由、处理程序、上游调用模拟和CORS帮助程序相对于样板的main分支的完整差异。
  • 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