网页界面设计中首页包括什么如何进行网站性能优化?

使用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个函数

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函数代码。
重定向函数代码

// 重定向函数文件。  
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": {}  }  
}

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

输出

以下是具有路径和重定向的域的输出。
以下是demo.proclouds.co.in和demo.proclouds.co.in/page1的输出

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

结论

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