如何使用阿里云 CDN 对部署在函数计算上的静态网站进行缓存

本文涉及的产品
Serverless 应用引擎 SAE,800核*时 1600GiB*时
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
性能测试 PTS,5000VUM额度
简介: 为了进一步提升网站的访问速度,我们会使用 CDN 对网站进行加速,但是最近在调试阿里云的函数计算和 CDN 的配合使用时发现了一个需要额外注意的地方。

作者:邓超 | Serverless Devs 开源贡献者


前言


为了进一步提升网站的访问速度,我们会使用 CDN 对网站进行加速,但是最近在调试阿里云的函数计算和 CDN 的配合使用时发现了一个需要额外注意的地方。


如何使用 CDN 对部署在函数计算上的静态网站进行缓存


那么以我部署在函数计算上的博客站[1]为例,逐步地向大家介绍如何使用 CDN 对函数计算托管的静态网站进行缓存。


为函数添加 CDN 功能


1)为函数分配域名并添加 CNAME 记录


由于我希望最终用户能通过 blog.dengchao.fun 来进行访问,因此需要给函数分配一个不同的域名 blog.xxx.dengchao.fun


1.png


2) 添加自定义域名并设置路由


将分配的域名设置到函数计算的自定义域名功能中:


2.png


因为 CDN 上也可以设置 HTTPs,而且函数计算之前不能设置 SSL 协议版本,因此这里没有开启 HTTPS 功能。


3) 添加源站类型为 "函数计算域名" 的 CDN


接下来到 CDN 控制台上新建一个加速域名:


3.png


用户最终将通过加速域名 blog.dengchao.fun 来访问我的博客站。业务类型选项不会影响最终的加速效果,可以任意选。


然后添加一个源站:


4.png


由于函数计算的自定义域名没有开启 HTTPS,所以源站的端口需要设置为 80 端口,同时也可以减少回源时的响应时间 (实际效果微不足道)。


4) 添加 CNAME 类型的 CDN 加速域名记录


设置完源站信息并保存后,阿里云会对源站内容进行审核,审核通过的话就会提供一个 CDN 服务供应商的域名给你:


5.png


接下来你需要将你的加速域名解析到 CDN 服务商提供的域名上:


6.png


添加好 CNAME 记录后,CDN 控制台上过一会儿就会显示为 "已配置" 状态,然后你就可以使用配置好的加速域名进行访问了。


设置 CDN 缓存


光配置好加速域名还不够,不然用户每次访问加速域名都需要从源站拉取数据,因此我们需要在 CDN 上设置一下缓存,减少回源次数。


1)添加缓存过期时间规则


假设我们希望 CDN 节点能够对网站根目录下的所有内容都缓存 1 天,那么我们需要在 CDN 加速域名的缓存管理页添加对应的配置:


7.png


本来操作到这里的时候我就以为缓存设置好了,但网站运行了一段时间后观察 CDN 的监控却发现缓存命中率一直很低。通过观察浏览器控制台里的网络请求日志,逐个请求头进行分析,最终发现了一点异常:源站将 Cache-Control 响应头设置为了 public,max-age=0


2) 修复 Cache-Control 响应头


仔细查看了 MDN 上对于 Cache-Control 响应头的文档[2],以及阿里云 CDN 对于缓存过期时间配置的介绍[3] 后,确认了之前的 CDN 缓存配置存在缺陷。(典型的不看文档吃大亏)


定位好问题以后,解决思路也很清晰了:想办法删掉源站的 Cache-Control 响应头就好了。


方案一:修改源站 HTTP 服务器返回的 Cache-Control 响应头


既然源站的 HTTP 服务器将 Cache-Control 响应头设置成了 max-age=0 ,那我们把源站的 HTTP 服务器改一下不就好了。


但考虑到我们部署在函数计算上的静态网站是由 website-fc 插件生成的 Express 服务器进行托管的,如果修改的话,需要从本地的 website-fc 插件源码入手进行调整,但 website-fc 插件可能不定期更新, 那我们就需要不定期的进行检查,视情况重新打补丁,执行起来很费力。因此我们不能选用这个方案。


方案二:配置 CDN,删除源站 HTTP 服务器返回的 Cache-Control 响应头


再次查看文档发现阿里云 CDN 提供了 配置回源 HTTP 响应头[4]的功能,其中包含了删除回源响应头的功能。因此我们可以借助这个功能,让 CDN 删除掉源站返回的 Cache-Control 响应头。


8.png


配置好以后, 再次观察加速域名下网络请求的响应头,发现确实没有 Cache-Control:public,max-age=0 的响应头了。


3)效果对比


由于博客站的访问量并不高,效果不明显 (简直看不出来😂)。因此截取了另一个访问量相对较大的网站的监控截图:


首先是访问量对比,从监控数据来看近两天没有显著的访问量差异:


9.png


然后是回源流量对比, 发现删除 Cache-Control 响应头以后回源流量显著下降:

image.gif

10.png


同时字节命中率与请求命中率都有显著的提升:


11.png


看来我们配置的缓存确实生效了。


总结


配置好 CDN 加速域名和缓存过期时间规则以后,记得检查源站的响应头。如果源站的响应中已有缓存控制相关的响应头,那么视情况在源站的 HTTP 服务器上或 CDN 上进行调整。


另外,多看看文档。


参考链接:


[1] 博客站

https://blog.dengchao.fun/


[2] MDN 上对于 Cache-Control 响应头的文档

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control


[3] 阿里云 CDN 对于缓存过期时间配置的介绍

https://help.aliyun.com/document_detail/27136.html#title-p27-252-g92


[4] 配置回源 HTTP 响应头

https://help.aliyun.com/document_detail/155769.html


[5] 阿里云 函数计算

https://help.aliyun.com/product/50980.html


[6] 阿里云 CDN

https://help.aliyun.com/document_detail/27101.html


[7] 加速原理

https://help.aliyun.com/document_detail/27101.html#title-sbn-geq-2ez


[8] 配置回源 HTTP 响应头

https://help.aliyun.com/document_detail/155769.html


[9] 什么是缓存

https://help.aliyun.com/document_detail/122553.html


[10] 配置缓存过期时间

https://help.aliyun.com/document_detail/27136.html


[11] 缓存规则与优先级

https://help.aliyun.com/document_detail/27136.html#title-p27-252-g92


[12] 什么是 Cache Control 响应头

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control



1分钟Serverless 部署个人网盘


打开卡片复制地址

1 分钟自建一个真网盘

1 步拿到百变指尖陀螺!


12.jpeg


本场景基于 Serverless 应用中心 + 阿里云函数计算 + 开源企业级在线文件管理系统 KodBox 打造,让你仅用 “几次” 点击,拥有一个可随意保存资源、不限速下载、多端使用、与朋友共享资源……的专属个人网盘。


时间:5 月 9 日 - 5 月 20 日(工作日期间)

奖品:每日 200 个百变指尖陀螺

建议:PC 端体验


点击「此处」,一键部署个人网盘!

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
19天前
|
人工智能 自然语言处理 Serverless
阿里云函数计算 x NVIDIA 加速企业 AI 应用落地
阿里云函数计算与 NVIDIA TensorRT/TensorRT-LLM 展开合作,通过结合阿里云的无缝计算体验和 NVIDIA 的高性能推理库,开发者能够以更低的成本、更高的效率完成复杂的 AI 任务,加速技术落地和应用创新。
|
1月前
|
存储 人工智能 运维
正式收官!阿里云函数计算携手优酷,用 AI 重塑影视 IP 创新边界
近日,阿里云联合优酷发起的 Create@影视 IP x AI 应用创新大赛,将网剧《少年白马醉春风》这一热门影视 IP 与阿里云 AI 技术相结合,由阿里云函数计算提供 AIGC 技术支持参赛者基于网剧《少年白马醉春风》IP 或“少年江湖”精神内核,用 AI 生成角色场景设计、手办设计、破次元合照、数字人等多样化的作品。
|
2月前
|
缓存 应用服务中间件 nginx
Web服务器的缓存机制与内容分发网络(CDN)
【8月更文第28天】随着互联网应用的发展,用户对网站响应速度的要求越来越高。为了提升用户体验,Web服务器通常会采用多种技术手段来优化页面加载速度,其中最重要的两种技术就是缓存机制和内容分发网络(CDN)。本文将深入探讨这两种技术的工作原理及其实现方法,并通过具体的代码示例加以说明。
87 1
|
9天前
|
SQL 分布式计算 Serverless
阿里云 EMR Serverless Spark 版正式开启商业化
阿里云 EMR Serverless Spark 版正式开启商业化,内置 Fusion Engine,100% 兼容开源 Spark 编程接口,相比于开源 Spark 性能提升300%;提供 Notebook 及 SQL 开发、调试、发布、调度、监控诊断等一站式数据开发体验!
49 3
阿里云 EMR Serverless Spark 版正式开启商业化
|
13天前
|
安全 CDN
阿里云CDN产品解读及全站加速在游戏行业的最佳实践!
阿里云CDN(内容分发网络)为全球用户提供快速、稳定、安全的内容分发加速服务,显著提升访问响应速度和成功率
|
6天前
|
人工智能 运维 大数据
阿里云“触手可及,函数计算玩转 AI 大模型”解决方案评测报告
阿里云“触手可及,函数计算玩转 AI 大模型”解决方案评测报告
18 1
|
9天前
|
缓存 监控 负载均衡
在使用CDN时,如何配置缓存规则以优化性能
在使用CDN时,如何配置缓存规则以优化性能
|
1月前
|
Cloud Native 关系型数据库 Serverless
基于阿里云函数计算(FC)x 云原生 API 网关构建生产级别 LLM Chat 应用方案最佳实践
本文带大家了解一下如何使用阿里云Serverless计算产品函数计算构建生产级别的LLM Chat应用。该最佳实践会指导大家基于开源WebChat组件LobeChat和阿里云函数计算(FC)构建企业生产级别LLM Chat应用。实现同一个WebChat中既可以支持自定义的Agent,也支持基于Ollama部署的开源模型场景。
175 13
|
2月前
|
前端开发 小程序 Serverless
异步任务处理系统问题之阿里云函数计算FC的应用场景有哪些
异步任务处理系统问题之阿里云函数计算FC的应用场景有哪些
|
2月前
|
存储 运维 安全
函数计算产品使用问题之如何获取到访问其他阿里云服务所需的AccessKey、SecretKey或STS Token
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。

相关产品

  • 函数计算
  • 下一篇
    无影云桌面