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

DevDengChao in Changsha

2022-04-09 Sat

(opens new window)

# 前言

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

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

那么以我部署在函数计算上的博客站 https://blog.dengchao.fun (opens new window)为例, 逐步地向大家介绍如何使用 CDN 对函数计算托管的静态网站进行缓存.

# 1. 为函数添加 CDN 功能

# 1.1 为函数分配域名并添加 CNAME 记录

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

# 1.2 添加自定义域名并设置路由

将分配的域名设置到函数计算的自定义域名功能中: 添加自定义域名并设置路由因为 CDN 上也可以设置 HTTPs, 而且函数计算之前不能设置 SSL 协议版本, 因此这里没有开启 HTTPS 功能.

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

接下来到 CDN 控制台上新建一个加速域名: 添加加速域名用户最终将通过加速域名 blog.dengchao.fun 来访问我的博客站. 业务类型选项不会影响最终的加速效果, 可以任意选.

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

# 1.4 添加 CNAME 类型的 CDN 加速域名记录

设置完源站信息并保存后, 阿里云会对源站内容进行审核, 审核通过的话就会提供一个 CDN 服务供应商的域名给你: 在这里插入图片描述接下来你需要将你的加速域名解析到 CDN 服务商提供的域名上: 将加速域名解析到 CDN 服务商提供的域名上添加好 CNAME 记录后, CDN 控制台上过一会儿就会显示为 "已配置" 状态，然后你就可以使用配置好的加速域名进行访问了.

# 2. 设置 CDN 缓存

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

# 2.1 添加缓存过期时间规则

假设我们希望 CDN 节点能够对网站根目录下的所有内容都缓存 1 天. 那么我们需要在 CDN 加速域名的缓存管理页添加对应的配置：设置根目录下的文件缓存 1 天本来操作到这里的时候我就以为缓存设置好了, 但网站运行了一段时间后观察 CDN 的监控却发现缓存命中率一直很低. 通过观察浏览器控制台里的网络请求日志，逐个请求头进行分析，最终发现了一点异常：源站将 Cache-Control 响应头设置为了 public, max-age=0 .

# 2.2 修复 Cache-Control 响应头

仔细查看了 MDN 上对于 Cache-Control 响应头的文档 (opens new window)，以及阿里云 CDN 对于缓存过期时间配置的介绍 (opens new window)后，确认了之前的 CDN 缓存配置存在缺陷. （典型的不看文档吃大亏）

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

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

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

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