在Edge Delivery Services上设置AEM Edge功能
了解如何在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.yaml和cdn.yaml,将AEM Edge功能(JavaScript模块)推送到Adobe CDN,并验证站点域上的两个端点(例如,https://myfrescopa.enablementadobe.com/hello-world)。
高级步骤:
- 将Edge Delivery网站载入Cloud Manager
- 安装Adobe CLI和AEM Edge函数插件
- 在Edge Delivery Services上设置AEM Edge功能
- 从样板模板创建AEM Edge函数项目
- 在本地克隆、查看和运行AEM Edge函数项目
- 查看、管理和部署CDN配置
- 构建AEM Edge函数并将其部署到Adobe CDN
- 验证端点是否正常工作
先决条件
在开始之前,请确保已具备以下条件。
- Node.js和npm已在本地安装
- 用于从样板模板创建项目的GitHub帐户
- 适用于Cloud Manager项目的Edge Delivery Services加载项
- Cloud Manager中的部署管理员角色
- Frescopa站点项目或您自己的Edge Delivery站点项目
步骤1:将Edge Delivery站点载入Cloud Manager
在设置AEM Edge Functions之前,请在Cloud Manager中载入您的Edge Delivery网站。 此步骤仅使用Cloud Manager,不需要Adobe CLI。
如果您的网站已载入,请验证它是否出现在Cloud Manager中,并跳至步骤2。
以下步骤使用Frescopa站点项目作为演示站点。
-
登录到Cloud Manager,并使用Edge Delivery Services加载项打开您的程序。 在程序概述中,确认 Edge Delivery 选项卡可见。
-
在 Edge Delivery 选项卡上,完成Edge Delivery待办事项列表。 关键步骤包括:
-
添加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分支。但是,请参阅下面的演示站点屏幕截图。
- 站点名称:
-
添加域:
- 域名:
myfrescopa.enablementadobe.com
您必须设置一个自定义域名才能部署AEM Edge Functions项目,即使您尝试使用的开发站点映射到Edge Delivery Services站点项目的开发分支。
- 域名:
-
添加SSL证书:
- 证书类型:客户托管(OV/EV)
- 证书名称:
enablementadobe.com - 证书:签名证书文件内容介于
-----BEGIN CERTIFICATE-----和-----END CERTIFICATE-----之间 - 私钥:私钥文件内容介于
-----BEGIN PRIVATE KEY-----和-----END PRIVATE KEY-----之间 - 证书链:证书链文件内容介于
-----BEGIN CERTIFICATE-----和-----END CERTIFICATE-----之间
您也可以使用Adobe托管(DV)证书,出于教程目的,我们以客户托管(OV/EV)证书为例。
-
在你的DNS托管服务中为
myfrescopa.enablementadobe.com添加DNS记录。 -
将域
myfrescopa.enablementadobe.com映射到Adobe托管的CDN。
-
-
验证站点是否显示在Edge Delivery的“站点”表中。 可在https://myfrescopa.enablementadobe.com/上访问演示Frescopa站点。
Cloud Manager中的
有关完整的演练,请参阅将Edge Delivery站点添加到Cloud Manager。
步骤2:安装CLI和插件
安装或更新Adobe aio CLI和AEM Edge Functions插件。
对于全新安装,请运行以下命令:
| code language-bash |
|---|
|
更新Adobe CLI和已安装的插件:
| code language-bash |
|---|
|
例如,成功安装CLI和AEM Edge Functions插件应如下所示:
步骤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命令提供了上下文。
请注意,安装程序将Frescopa Edge Delivery网站与域myfrescopa.enablementadobe.com关联。
使用以下命令查看AEM Edge函数设置详细信息:
$ aio aem edge-functions info
输出应如下所示:
步骤4:创建AEM Edge函数项目
从aem-edge-functions-boilerplate GitHub模板创建AEM Edge Functions项目。 样板包括开始使用所需的文件和配置。
-
导航到GitHub上的aem-edge-functions-boilerplate。
-
在右上角,选择使用此模板 > 创建新存储库。
-
提供存储库名称(例如,
frescopa-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中的工作区:
查看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 // 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中的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配置文件。
config/edgeFunctions.yaml声明了AEM Edge Function服务。 例如:
kind: "EdgeFunctions"
version: "1"
data:
functions:
- name: my-edge-function
有关支持的属性的详细信息,请参阅edgeFunctions.yaml引用。
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使用。 您有两个选项:
-
Adobe存储库:在Cloud Manager中为您的项目创建新存储库。
-
专用存储库:将您现有的GitHub存储库链接到Cloud Manager。
本教程将步骤4中的Frescopa AEM Edge Functions项目用作专用存储库。
-
在Cloud Manager中,打开 存储库 并选择添加存储库。
-
在 添加存储库 对话框中,选择专用存储库,然后提供存储库名称、URL和类型。 选择保存。
-
完成 私有存储库所有权验证 对话框中的步骤。
-
授予Cloud Manager对存储库的访问权限:
用于访问AEM存储库的
-
将验证密钥存储在AEM Edge Functions项目存储库中:
-
验证完成后,专用存储库将出现在 存储库 表中。
部署CDN配置
在Cloud Manager中创建并运行Edge Delivery配置管道。
-
在程序概述页面上,打开 Edge Delivery 选项卡。 在 管道 下,选择添加Edge Delivery管道。
-
在 添加Edge Delivery管道 对话框中,提供名称并选择继续。
-
在 Source代码 步骤中,选择您添加的专用存储库、
main分支和/config作为代码位置。 选择保存。
-
通过选择管道名称旁边的…,然后选择 运行 来运行管道。
成功运行会将edgeFunctions.yaml和cdn.yaml文件部署到Edge Delivery站点域。
验证CDN配置是否已成功部署:
$ aio aem edge-functions list
输出应列出my-edge-function(或您在edgeFunctions.yaml中声明的任何名称)。
步骤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部署管理器 产品配置文件的一部分。
例如,输出应类似于以下屏幕截图:
步骤8:验证端点
在浏览器中或使用curl验证部署的端点:
$ curl https://myfrescopa.enablementadobe.com/hello-world
$ curl https://myfrescopa.enablementadobe.com/weather
将步骤1中的域替换为Edge Delivery站点域。
例如,响应类似于以下屏幕截图:
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功能以及验证端点。