当前位置：首页 > news >正文

【AWS】使用CloudFront S3 Lambda打造丝滑低延迟Web体验

news 来源：原创 2025/5/18 16:26:50

使用CloudFront S3 Lambda打造丝滑低延迟Web体验

推荐超级课程：

本地离线DeepSeek AI方案部署实战教程【完全版】
Docker快速入门到精通
Kubernetes入门到大师通关课
AWS云服务快速入门实战

想象一下，加快网站和应用程序的运行速度，使它们更安全，并使用户体验更加顺畅。AWS CloudFront就像一个魔法师，它正是这样做的。在这篇博客中，我们将探讨如何使用CloudFront的行为和功能来使Web应用程序无缝连接。
架构图：
在这里插入图片描述

配置S3存储桶

创建一个包含静态Web应用程序文件的存储桶，如下所示。
在这里插入图片描述

创建CloudFront分发

以下是使用S3作为目标的步骤，创建CloudFront分发。
在这里插入图片描述

选择S3存储桶作为源，并为存储桶创建OAC。
在这里插入图片描述

现在我们有OAC，我们可以继续进行SSL证书设置。
在这里插入图片描述

在上面的图片中，我们可以看到CloudFront分发的所有设置。
创建CloudFront分发后，我们必须通过向存储桶添加策略来授予Cloudfront对存储桶的访问权限。策略将如下所示。
在这里插入图片描述

让我们将策略添加到存储桶中，以下是相同的步骤。
转到S3存储桶 -> 权限 -> 存储桶策略并添加策略。
在这里插入图片描述

使用行为进行路由逻辑

以下是用于演示的路由逻辑。
在这里插入图片描述

路由逻辑
正如我们上面看到的，我们需要将默认域和路径：page1重定向到page1.html
我们需要将具有路径：page2的域路由到page2.html
我们需要为上述用例创建3个函数

重定向函数：需要将具有根目录的域重定向到具有路径：page1的域
page1函数：page1函数需要将域demo.proclouds.co.in/page1映射到page1.html文件
page2函数：page2函数需要将域demo.proclouds.co.in/page2映射到page2.html文件
以下是CloudFront分发的行为配置。

CloudFront函数

以下是用于演示所需的三个函数的CloudFront函数代码。
重定向函数代码

// 重定向函数文件。  
function handler(event) {  
    var request = event.request;  
    var headers = request.headers;  
    var host = request.headers.host.value;  
    var uri = request.uri;  
  //  var country = 'DE' // 选择一个国家代码  
    var newurl = `https://${host}/page1` // 将重定向URL更改为您的选择  
    if (host === "demo.proclouds.co.in" && uri === "/") {  
            var response = {  
                statusCode: 302,  
                statusDescription: 'Found',  
                headers:  
                    { "location": { "value": newurl } }  
                }  
  
            return response;  
    }  
    return request;  
}

以下是测试和发布重定向函数的步骤。
注意：我们使用了一个在Route 53中注册的域，并创建了一个CNAME记录指向CloudFront的分发。
在这里插入图片描述

请按如下方式将域添加到CloudFront分发中。
在这里插入图片描述

要测试重定向函数，请使用以下JSON代码。

{  
  "version": "1.0",  
  "context": {  
    "eventType": "viewer-request"  
  },  
  "viewer": {  
    "ip": "1.2.3.4"  
  },  
  "request": {  
    "method": "GET",  
    "uri": "/",  
    "headers": {  
      "host": {  
        "value": "demo.proclouds.co.in"  
      }  
    },  
    "cookies": {},  
    "querystring": {}  
  }  
}

一旦我们得到下面的输出，我们就可以将函数发布到默认行为。
在这里插入图片描述

现在我们可以按照以下步骤发布函数
在这里插入图片描述

在发布时，它会要求我们选择分发和行为。
在这里插入图片描述

我们可以按照类似的步骤分别关联其他函数。
page1代码

// page1-function代码  
  
  
function handler(event) {  
    var request = event.request;  
    var oldurl = '/page1'  
    var newurl = '/page1.html' // 将重定向URL更改为您的选择  
  
    if (request.uri === oldurl) {  
        request.uri = newurl;  
    }  
    return request;  
}

以下是测试和发布page1函数的步骤。

{  
  "version": "1.0",  
  "context": {  
    "eventType": "viewer-request"  
  },  
  "viewer": {  
    "ip": "1.2.3.4"  
  },  
  "request": {  
    "method": "GET",  
    "uri": "/page1.html",  
    "headers": {},  
    "cookies": {},  
    "querystring": {}  
  }  
}

按照类似的步骤将上述函数与page1行为一起发布。
page2代码

// page2-function代码  
  
  
function handler(event) {  
    var request = event.request;  
    var oldurl = '/page2'  
    var newurl = '/page2.html' // 将重定向URL更改为您的选择  
  
    if (request.uri === oldurl) {  
        request.uri = newurl;  
    }  
    return request;  
}

以下是测试和发布page2函数的步骤。

{  
  "version": "1.0",  
  "context": {  
    "eventType": "viewer-request"  
  },  
  "viewer": {  
    "ip": "1.2.3.4"  
  },  
  "request": {  
    "method": "GET",  
    "uri": "/page2.html",  
    "headers": {},  
    "cookies": {},  
    "querystring": {}  
  }  
}