将 AWS Lambda@Edge 与 CloudFront 结合使用

Lambda@Edge 是 AWS Lambda 计算服务的补充，用于自定义 Cloudfront 提供的内容。

显示 AWS Lambda 与 AWS Cloudfront 的工作原理框图如下所示：

AWS Lambda 有四种使用方式 -

查看器请求 -最终用户向 CloudFront 发出名为“查看器请求”的请求
源请求 - CloudFront 将请求转发到源
源响应 - CloudFront 接收来自源的响应
查看器响应 - CloudFront 将响应发送给查看器

我们可以将 Lambda@Edge 用于以下目的 -

在请求和响应时更改标头。
将 cookie 详细信息添加到标头中。根据请求和响应进行AB测试。
根据标头详细信息将 URL 重定向到另一个站点。
我们可以从标头中获取用户代理并找出浏览器、操作系统等的详细信息。

必备条件

要开始使用 CloudFront 和 Lambda@Edge，我们需要以下内容 -

创建包含文件详细信息的 S3 存储桶
创建允许使用 CloudFront 和 Lambda@Edge 的角色
创建 CloudFront 分配
创建 lambda 函数
将 lambda 函数详细信息添加到 cloudfront
在浏览器中检查cloudfront url

我们将使用 CloudFront 和 Lambda@Egde 制作一个示例，其中我们将托管页面并在检测为桌面和设备时更改响应。

创建包含文件详细信息的 S3 存储桶

登录AWS控制台并在S3中创建一个存储桶并添加. 您要显示的html文件。

单击S3并创建存储桶，如下所示 -

现在，单击创建存储桶按钮并添加存储桶的详细信息，如下所示 -

单击“创建”按钮并上传其中的 .html。

创建角色

转到 AWS 控制台并单击IAM。

现在，单击“角色”->“创建角色”按钮，如图所示 -

选择S3、Lambda和Cloudfront的权限。最好使用 ARN 详细信息创建策略，仅授予所需功能和存储的权限。

在下面讨论的示例中，我们显示完全访问权限。如上所示添加了cloudfront 的角色名称 role 的策略。单击创建角色。

lambda@edge 和 cloudfront 所需的所有策略如上所示。这里还需要执行一个额外的步骤，因为在 Cloudfront 的情况下，URL 将跨区域可用，并且需要我们正在使用的服务之间建立信任关系。

现在，对于创建的角色，单击“信任关系”选项卡，如下所示 -

单击编辑信任关系，如下所示 -

它显示政策文件。我们需要在我们计划使用的主体 -> 服务中添加其他服务。最终的信任关系政策文件如下所示 -

单击“更新信任策略”按钮保存更改。

创建 CloudFront 分配

转到 CloudFront 服务，如下所示 -

单击 CloudFront 服务，然后单击创建分发-

原点设置、Behave设置和分布设置

让我们一一研究这些设置 -

原点设置

原点设置的各种参数解释如下 -

原始域名-这是我们存储 html 文件的 S3 存储桶的名称。我们还可以通过创建我们选择的文件夹将图像（如果有）存储在 S3 存储桶中。

原始路径-在这里您需要输入存储文件的文件夹的名称。目前我们还没有这个文件夹，所以暂时将其保留为空。

原始 ID -当选择原始域名时，它会被填充。您可以根据自己的选择更改 id。

限制存储桶访问 -在此，我们将选择选项yes。这里我们需要 S3 存储桶的安全性，以便任何人都无法访问 S3 存储桶。对于此选项，还填充了一些其他选项，例如Origin Access Identity、Comment 和 Grant Read Permission on Bucket。

原始访问身份-我们使用创建一个新的身份选项。您也可以选择现有的身份。这将创建一个新身份，CloudFront 使用该身份从 S3 存储桶读取详细信息。

存储桶上的大读取权限 -为此，选择选项Yes。

Origin Custom Headers -我们将在此处将标题保留为空白，因为我们现在不需要详细信息。

接下来，让我们讨论并填写Cloudront 发行版的Behave设置-

现在，选择协议 - https 或 http，以及缓存选项。请注意，默认缓存为 86400 或 24 小时。您可以根据需要更改该值。

单击对象缓存（自定义选项）以更改缓存。如果您的页面上有任何视频，您可以使用平滑流式传输。在这里，我们保留默认选项。创建 lambda 函数后，将添加其详细信息。

分发设置的详细信息如下所示 -

分布设置的各种参数解释如下 -

价格等级-它包含用户流量来源等详细信息。请注意，这里我们选择了默认值 -使用所有边缘位置。

AWS WAF Web ACL -用于选择 Web 应用程序防火墙。在这里，它的选项为None。首先，我们需要在AWS中创建防火墙。它为站点提供安全性。

备用域名- 如果有的话，您可以在此处指定域名。

SSL 证书 -这包含为 SSL 证书选择的所有详细信息。我们将保留默认值。

默认根对象-这里我们将指定我们在 S3 中上传的文件名。为此，我们需要默认显示 .html 中的内容。

对于其余的，我们将保留默认设置。

单击创建分发按钮以添加分发。

请注意，分发需要一些时间才能显示已部署的状态。

创建 AWS Lambda 函数

转到AWS控制台并创建Lambda函数。

在 AWS Lambda 代码中，我们将获取请求标头并检查用户代理。如果用户代理来自桌面，我们将更改响应以将消息显示为“桌面：欢迎使用 Cloudfront 的 AWS Lambda！” 如果是设备，则消息将为“移动设备：来自 Lambda@Edge 的问候！”

相应的AWS Lambda代码如下所示：

let content = `
<\!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Simple Lambda@Edge Static Content Response</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   
   <body>
      <h1>MOBILE DEVICES : Hello from Lambda@Edge!</h1>
   </body>
</html>
`;
let content1 = `
<\!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Simple Lambda@Edge Static Content Response</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   
   <body>
      <h1>DESKTOP : Welcome to AWS Lambda with Cloudfront!</h1>
   </body>
</html>
`;
exports.handler = (event, context, callback) => {
   let request = event.Records[0].cf.request;
   let finalrequest = JSON.stringify(request);
   let headers = request.headers;
   let useragent = JSON.stringify(headers["user-agent"][0].value);
   let str = "";
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(useragent)) {
      str = content;
   } else {
      str = content1;
   }
   const response = {
      status: '200',
      statusDescription: 'OK',        
      body: str+useragent,
   };
   callback(null, response);
};

现在，保存 Lambda 函数。请注意，我们需要发布 Lambda 函数，以便它可以在所有区域中使用。要发布，我们需要执行以下操作 -

从操作下拉列表中，选择发布新版本，如下所示 -