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

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

推荐超级课程:

目录

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

架构图:

配置S3存储桶

创建一个包含静态Web应用程序文件的存储桶,如下所示。

创建CloudFront分发

以下是使用S3作为目标的步骤,创建CloudFront分发。

选择S3存储桶作为源,并为存储桶创建OAC。

现在我们有OAC,我们可以继续进行SSL证书设置。

在上面的图片中,我们可以看到CloudFront分发的所有设置。

创建CloudFront分发后,我们必须通过向存储桶添加策略来授予Cloudfront对存储桶的访问权限。策略将如下所示。

让我们将策略添加到存储桶中,以下是相同的步骤。

转到S3存储桶 -> 权限 -> 存储桶策略并添加策略。

使用行为进行路由逻辑

以下是用于演示的路由逻辑。

路由逻辑

正如我们上面看到的,我们需要将默认域和路径:page1 重定向到page1.html

我们需要将具有路径:page2 的域路由到page2.html

我们需要为上述用例创建3个函数

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

CloudFront函数

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

js 复制代码
// 重定向函数文件。  
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代码。

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代码

js 复制代码
// 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函数的步骤。

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

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

js 复制代码
// 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函数的步骤。

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

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

输出

以下是具有路径和重定向的域的输出。

以下是demo.proclouds.co.indemo.proclouds.co.in/page1 的输出

以下是demo.proclouds.co.in/page2 的输出

结论

CloudFront函数彻底改变了内容分发网络中的动态路由。它们提供了基于各种因素的灵活、低延迟的路由自定义,增强了用户体验。它们既经济又可扩展,使开发人员能够优化内容分发以实现最佳性能和个性化。在这篇博客中,我们探讨了使用CloudFront函数的动态路由。

相关推荐
Json_25 分钟前
Vue computed Option 计算选项
前端·vue.js·深度学习
西陵37 分钟前
一文带你吃透前端网站嵌入设计
前端·javascript·架构
给钱,谢谢!39 分钟前
记录vite引入sass预编译报错error during build: [vite:css] [sass] Undefined variable.问题
前端·css·sass·vite
sealaugh321 小时前
aws(学习笔记第三十六课) apigw-http-api-lambda-dynamodb
笔记·学习·aws
拉不动的猪1 小时前
react常规面试题
前端·javascript·面试
NaZiMeKiY1 小时前
HTML5前端第六章节
前端·html·html5·1024程序员节
李小白661 小时前
Vue背景介绍+声明式渲染+数据响应式
前端·javascript·vue.js
烛阴2 小时前
JavaScript yield与异步编程
前端·javascript
知识分享小能手2 小时前
CSS3学习教程,从入门到精通,CSS3 媒体查询实现响应式布局语法指南(21)
前端·css·学习·css3·html5·媒体
斯~内克2 小时前
深入探索Node.js Koa框架:构建现代化Web应用的2000字实践指南
前端·node.js