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

本文涉及的产品
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
函数计算FC,每月15万CU 3个月
简介: 如何使用 CDN 对部署在函数计算上的静态网站进行缓存?



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


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


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


为函数添加 CDN 功能


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


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



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


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




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

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


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



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

然后添加一个源站:

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

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

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


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


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


设置 CDN 缓存


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


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



本来操作到这里的时候我就以为缓存设置好了,但网站运行了一段时间后观察 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 响应头。配置好以后, 再次观察加速域名下网络请求的响应头,发现确实没有 Cache-Control:public,max-age=0 的响应头了。


3)效果对比由于博客站的访问量并不高,效果不明显 。因此截取了另一个访问量相对较大的网站的监控截图:首先是访问量对比,从监控数据来看近两天没有显著的访问量差异:



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




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



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

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

p.s 加速原理[7]假设您的加速域名为 www.aliyundoc.com,接入 CDN 开始加速服务后,当终端用户在北京发起 HTTP 请求时,处理流程如下图所示:




参考链接:


博客站:https://blog.dengchao.fun/

MDN 上对于 Cache-Control 响应头的文档:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control

阿里云 CDN 对于缓存过期时间配置的介绍:https://help.aliyun.com/document_detail/27136.html#title-p27-252-g92

配置回源 HTTP 响应头:https://help.aliyun.com/document_detail/155769.html

阿里云函数计算文档:https://help.aliyun.com/product/50980.html

阿里云 CDN:https://help.aliyun.com/document_detail/27101.html

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

配置回源 HTTP 响应头:https://help.aliyun.com/document_detail/155769.html

什么是缓存:https://help.aliyun.com/document_detail/122553.html

配置缓存过期时间:https://help.aliyun.com/document_detail/27136.html

缓存规则与优先级:https://help.aliyun.com/document_detail/27136.html#title-p27-252-g92

什么是 Cache Control 响应头:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control


相关文章
|
3月前
|
缓存 安全 UED
网站图片缓存设置不当可能会导致哪些问题?
【10月更文挑战第18天】网站图片缓存的合理设置至关重要,需要综合考虑图片的性质、更新频率、用户体验、服务器性能等多方面因素,以避免出现上述各种问题,确保网站的正常运行和用户信息的安全。
|
1月前
|
安全 网络协议 网络安全
如何免费使用锐安盾实现网站CDN加速与安全防护(2025版)
锐安盾是专为中小型网站设计的高性价比高防CDN,提供CDN加速、DDoS/CC防护及常见WEB攻击防护,适合个人站长、中小企业、国企和政府官网。基础版可免费使用一年,配置简单快捷,支持一键开启。基于天翼云平台,拥有2000+节点,确保稳定加速。国内运营需ICP备案,超流量可升级套餐,无额外费用。
如何免费使用锐安盾实现网站CDN加速与安全防护(2025版)
|
6月前
|
缓存 应用服务中间件 nginx
Web服务器的缓存机制与内容分发网络(CDN)
【8月更文第28天】随着互联网应用的发展,用户对网站响应速度的要求越来越高。为了提升用户体验,Web服务器通常会采用多种技术手段来优化页面加载速度,其中最重要的两种技术就是缓存机制和内容分发网络(CDN)。本文将深入探讨这两种技术的工作原理及其实现方法,并通过具体的代码示例加以说明。
635 1
|
3月前
|
存储 缓存 监控
网站的图片资源是否需要设置缓存?
【10月更文挑战第18天】网站的图片资源一般是需要设置缓存的,但要根据图片的具体特点和网站的需求,合理设置缓存时间和缓存策略,在提高网站性能和用户体验的同时,确保用户能够获取到准确、及时的图片信息。
|
3月前
|
缓存 监控 测试技术
如何利用浏览器的缓存来优化网站性能?
【10月更文挑战第23天】通过以上多种方法合理利用浏览器缓存,可以显著提高网站的性能,减少网络请求,加快资源加载速度,提升用户的访问体验。同时,要根据网站的具体情况和资源的特点,不断优化和调整缓存策略,以适应不断变化的业务需求和用户访问模式。
155 7
|
4月前
|
缓存 前端开发 JavaScript
阿里云CDN:怎么让网站变快
阿里云CDN:怎么让网站变快
|
4月前
|
缓存 弹性计算 应用服务中间件
如何使用 Wordpress?托管, 网站, 插件, 缓存
如何使用 Wordpress?托管, 网站, 插件, 缓存
|
5月前
|
缓存 监控 负载均衡
在使用CDN时,如何配置缓存规则以优化性能
在使用CDN时,如何配置缓存规则以优化性能
|
4月前
|
网络协议 CDN
阿里云国际版CDN加速,如何判断网站IP已加速?
阿里云国际版CDN加速,如何判断网站IP已加速?
|
4月前
|
存储 网络协议 安全
阿里云国际CDN加速图文和视频类网站操作教程
阿里云国际CDN加速图文和视频类网站操作教程

相关产品

  • 函数计算