【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函数的动态路由。

相关推荐
超人不会飛25 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦28 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想30 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
今晚打老虎z39 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982444 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴1 小时前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干1 小时前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗1 小时前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder1 小时前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder1 小时前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github