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

相关推荐
web守墓人1 小时前
【gpt生成-其一】以go语言为例,详细描述一下 :语法规范BNF/EBNF形式化描述
前端·gpt·golang
pink大呲花4 小时前
使用 Axios 进行 API 请求与接口封装:打造高效稳定的前端数据交互
前端·vue.js·交互
samuel9184 小时前
uniapp通过uni.addInterceptor实现路由拦截
前端·javascript·uni-app
泯泷4 小时前
JavaScript随机数生成技术实践 | 为什么Math.random不是安全的随机算法?
前端·javascript·安全
benben0444 小时前
Unity3D仿星露谷物语开发35之锄地动画
前端·游戏·游戏引擎
WebInfra4 小时前
🔥 Midscene 重磅更新:支持 AI 驱动的 Android 自动化
android·前端·测试
八了个戒4 小时前
「数据可视化 D3系列」入门第八章:动画效果详解(让图表动起来)
开发语言·前端·javascript·数据可视化
拉不动的猪6 小时前
无缝适配 PC 和移动端‌我们要注意哪些点呢
前端·javascript·面试
佳腾_6 小时前
【消息队列RocketMQ】一、RocketMQ入门核心概念与架构解析
中间件·架构·消息队列·云计算·rocketmq
lisw056 小时前
云计算(Cloud Computing)概述——从AWS开始
云计算·aws