在Edge Delivery Services上设置AEM Edge功能

IMPORTANT
AEM Edge函数当前为测试版。 功能和文档可能会更改。 如需反馈,请联系aemcs-edgecompute-feedback@adobe.com

了解如何在AEM网站上设置Edge Delivery Services Edge Functions。

本教程介绍Cloud Manager中的Edge Delivery站点载入、CLI安装、样板模板中的项目设置、CDN配置以及工作端点的部署。

本教程使用Frescopa站点项目作为演示站点。 您可以对自己的Edge Delivery Services站点执行相同的步骤。

您将构建的内容

AEM Edge函数是在Adobe CDN的边缘位置(而不是您的JavaScript源位置)运行的Edge Delivery模块。 您部署了一个名为my-edge-function的AEM Edge函数,该函数具有两种路由:

  • /hello-world从边缘返回问候语
  • /weather检测访客在边缘的位置,调用Open-Meteo API,并返回其城市的当前温度

在开发过程中,您可以使用开发服务器在本地测试AEM Edge功能。 然后通过Edge Delivery配置管道部署edgeFunctions.yamlcdn.yaml,将AEM Edge功能(JavaScript模块)推送到Adobe CDN,并验证站点域上的两个端点(例如,https://myfrescopa.enablementadobe.com/hello-world)。

高级步骤:

  1. 将Edge Delivery网站载入Cloud Manager
  2. 安装Adobe CLI和AEM Edge函数插件
  3. 在Edge Delivery Services上设置AEM Edge功能
  4. 从样板模板创建AEM Edge函数项目
  5. 在本地克隆、查看和运行AEM Edge函数项目
  6. 查看、管理和部署CDN配置
  7. 构建AEM Edge函数并将其部署到Adobe CDN
  8. 验证端点是否正常工作

先决条件

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

  • Node.js和npm已在本地安装
  • 用于从样板模板创建项目的GitHub帐户
  • 适用于Cloud Manager项目的Edge Delivery Services加载项
  • Cloud Manager中的部署管理员角色
  • Frescopa站点项目或您自己的Edge Delivery站点项目
NOTE
Edge Delivery Services支持每个程序​最多 3个AEM Edge功能,旨在支持站点的开发、暂存和生产分支。

步骤1:将Edge Delivery站点载入Cloud Manager

在设置AEM Edge Functions之前,请在Cloud Manager中载入您的Edge Delivery网站。 此步骤仅使用Cloud Manager,不需要Adobe CLI。

如果您的网站已载入,请验证它是否出现在Cloud Manager中,并跳至步骤2。

以下步骤使用Frescopa站点项目作为演示站点。

  1. 登录到Cloud Manager,并使用Edge Delivery Services加载项打开您的程序。 在程序概述中,确认​ Edge Delivery ​选项卡可见。

  2. 在​ Edge Delivery ​选项卡上,完成​Edge Delivery待办事项列表。 关键步骤包括:

    1. 添加Edge Delivery站点

      • 站点名称Frescopa
      • Edge Delivery原点https://main--frescopa--sachinmali.aem.live/

      格式为https://<branch>--<site-name>--<organization-name>.aem.live/,其中<branch><site-name><organization-name>分别为Edge Delivery Services站点项目的分支、站点名称和组织名称。

      最好是尝试设置Edge Delivery Services站点项目的dev分支。但是,请参阅下面的演示站点屏幕截图。

      添加Edge Delivery站点

    2. 添加域

      • 域名myfrescopa.enablementadobe.com

      您必须设置一个自定义域名才能部署AEM Edge Functions项目,即使您尝试使用的开发站点映射到Edge Delivery Services站点项目的开发分支。

    3. 添加SSL证书

      • 证书类型:客户托管(OV/EV)
      • 证书名称enablementadobe.com
      • 证书:签名证书文件内容介于-----BEGIN CERTIFICATE----------END CERTIFICATE-----之间
      • 私钥:私钥文件内容介于-----BEGIN PRIVATE KEY----------END PRIVATE KEY-----之间
      • 证书链:证书链文件内容介于-----BEGIN CERTIFICATE----------END CERTIFICATE-----之间

      添加SSL证书

      您也可以使用Adobe托管(DV)证书,出于教程目的,我们以客户托管(OV/EV)证书为例。

    4. 在你的DNS托管服务中为myfrescopa.enablementadobe.com添加DNS记录

    5. 将域 myfrescopa.enablementadobe.com映射到Adobe托管的CDN。

      将域映射到Adobe托管的CDN

  3. 验证站点是否显示在Edge Delivery的“站点”表中。 可在https://myfrescopa.enablementadobe.com/上访问演示Frescopa站点。

    Cloud Manager中的 Edge Delivery站点

有关完整的演练,请参阅将Edge Delivery站点添加到Cloud Manager

步骤2:安装CLI和插件

安装或更新Adobe aio CLI和AEM Edge Functions插件。

全新安装

对于全新安装,请运行以下命令:

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
更新现有

更新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和AEM Edge Functions插件应如下所示:

CLI版本输出

步骤3:设置AEM Edge功能

必须在AEM站点域上设置Edge Delivery Services Edge功能。 它允许您将代码和配置文件部署到Adobe CDN,以便能够从网站中的AEM代码调用JavaScript Edge函数支持的路由。

要设置AEM Edge函数,请运行以下命令:

$ aio aem edge-functions setup

如果您尚未登录Adobe IMS,则命令将触发登录流程。 安装过程会提示输入项目、站点类型、Edge Delivery站点和ADC项目配置详细信息。 选择​ Edge Delivery Services ​作为网站类型。 设置详细信息存储在.aio文件中,它为AEM Edge函数CLI命令提供了上下文。

AEM Edge函数设置提示

请注意,安装程序将Frescopa Edge Delivery网站与域myfrescopa.enablementadobe.com关联。

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项目。 样板包括开始使用所需的文件和配置。

  1. 导航到GitHub上的aem-edge-functions-boilerplate

  2. 在右上角,选择​使用此模板 > 创建新存储库

    AEM Edge函数使用此模板选项

  3. 提供存储库名称(例如,frescopa-edge-functions),添加描述,将可见性设置为​专用,然后选择​创建存储库

    AEM Edge Functions创建存储库详细信息

步骤5:克隆、查看和运行AEM Edge函数项目

克隆AEM Edge函数项目

克隆您在步骤4中创建的存储库,然后在IDE中与Frescopa(或您自己的)Edge Delivery站点项目一起打开该存储库。 大多数编辑器支持工作区或多根视图,这些工作区或多根视图允许您同时在这两个项目中工作。

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

例如,请参见Frescopa Edge Delivery站点项目和Frescopa AEM Edge Functions项目作为IDE中的工作区:

Frescopa Edge Delivery站点项目和Frescopa AEM Edge Functions项目作为IDE中的工作区

查看AEM Edge Functions项目

在进行更改或部署AEM Edge Functions项目之前,请查看定义AEM Edge Functions合同的关键文件。

  1. package.json包含项目依赖项。 请注意@fastly/js-compute依赖关系。 有关详细信息,请参阅计算平台🔗上的JavaScript。

  2. src/index.js是函数入口点,包含项目的主逻辑。 它使用Fastly Compute的addEventListener("fetch", ...)模式。 所有传入请求都通过handleRequest函数,您可以在其中添加路由匹配逻辑。 例如,以下代码来自样板:

    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;
    }
    

    单个AEM Edge函数可以通过handleRequest中的if语句处理多个路由。

  3. fastly.toml配置本地开发服务器。 有关详细信息,请参阅Fastly.toml引用

  4. config/包含AEM Edge函数服务的配置文件和CDN路由规则。 通过Cloud Manager中的Edge Delivery配置管道部署这些文件。 步骤6涵盖该流程。

查看剩余的项目文件,如test/src/lib/README.md,以了解完整设置。

在本地运行AEM Edge函数项目

要快速迭代,您可以在本地运行AEM Edge函数项目。 从AEM Edge Functions项目目录中,安装依赖项并启动本地开发服务器:

# Navigate to the project directory (replace with your project name)
$ cd frescopa-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函数项目包括CDN配置文件。 查看这些组件并使用Cloud Manager中的Edge Delivery配置管道进行部署。

查看CDN配置

查看AEM Edge Functions项目的config/目录中的CDN配置文件。

  1. config/edgeFunctions.yaml声明了AEM Edge Function服务。 例如:
kind: "EdgeFunctions"
version: "1"
data:
  functions:
    - name: my-edge-function

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

  1. config/cdn.yaml声明了将流量定向到AEM Edge函数服务的CDN路由规则。 例如:
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配置

通过Cloud Manager配置管道部署CDN配置。 首先,使您的AEM Edge Functions项目中的config/文件可供Cloud Manager使用。 您有两个选项:

  1. Adobe存储库:在Cloud Manager中为您的项目创建新存储库。

  2. 专用存储库:将您现有的GitHub存储库链接到Cloud Manager。

本教程将步骤4中的Frescopa AEM Edge Functions项目用作专用存储库。

  1. 在Cloud Manager中,打开​ 存储库 ​并选择​添加存储库

  2. 在​ 添加存储库 ​对话框中,选择​专用存储库,然后提供存储库名称、URL和类型。 选择​保存

    添加存储库对话框

  3. 完成​ 私有存储库所有权验证 ​对话框中的步骤。

    私有存储库所有权验证对话框

    1. 授予Cloud Manager对存储库的访问权限:

      用于访问AEM存储库的 Cloud Manager

    2. 将验证密钥存储在AEM Edge Functions项目存储库中:

      存储在AEM Edge Functions项目存储库中的密钥

验证完成后,专用存储库将出现在​ 存储库 ​表中。

部署CDN配置

在Cloud Manager中创建并运行Edge Delivery配置管道。

  1. 在程序概述页面上,打开​ Edge Delivery ​选项卡。 在​ 管道 ​下,选择​添加Edge Delivery管道

    “添加Edge Delivery管道”按钮

  2. 在​ 添加Edge Delivery管道 ​对话框中,提供名称并选择​继续

    添加Edge Delivery管道对话框

  3. 在​ Source代码 ​步骤中,选择您添加的专用存储库、main分支和/config作为代码位置。 选择​保存

    Source代码步骤

  4. 通过选择管道名称旁边的​,然后选择​ 运行 ​来运行管道。

    运行Edge Delivery管道

成功运行会将edgeFunctions.yaml和cdn.yaml文件部署到Edge Delivery站点域。

验证CDN配置是否已成功部署:

$ 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 frescopa-edge-functions

# Review to make sure you are deploying to the correct Edge Delivery Services site
$ 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匹配。 另外,您必须是​ Cloud Manager部署管理器 ​产品配置文件的一部分。

例如,输出应类似于以下屏幕截图:

AEM Edge Functions生成和部署输出

IMPORTANT
要从CI/CD系统部署AEM Edge Functions项目,您需要Adobe Developer Console (ADC)项目来获取API凭据。 有关详细信息,请参阅Adobe Developer Console集成CI/CD安装程序

步骤8:验证端点

在浏览器中或使用curl验证部署的端点:

$ curl https://myfrescopa.enablementadobe.com/hello-world
$ curl https://myfrescopa.enablementadobe.com/weather

将步骤1中的域替换为Edge Delivery站点域。

例如,响应类似于以下屏幕截图:

实时终结点响应

NOTE
edgefunction-pXXXXX-dYYYYY-<edge-function-name>.adobeaemcloud.com域仅可用于调试,并且不能保证稳定。 在生产环境中,请求通过cdn.yaml中的CDN路由规则通过您网站的自定义域访问AEM Edge功能。

在真实情景中,将AEM Edge函数用于CDN上的服务器端逻辑,并从网站的JavaScript中调用它们。 有关高级配置,请参阅AEM Edge函数产品文档

摘要

您已将Frescopa Edge Delivery站点载入Cloud Manager、安装CLI、在Edge Delivery Services上设置AEM Edge功能、在本地创建和运行项目、部署CDN配置、构建和部署AEM Edge功能以及验证端点。

其他资源

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