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

已于 2022-06-20 08:40:07 修改
阅读量458 收藏
点赞数
分类专栏： Aliyun 文章标签： 阿里云 缓存 CDN
于 2022-04-09 22:24:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XieEDeHeiShou/article/details/123991056
版权

在这里插入图片描述

本博客站点已全量迁移至 DevDengChao 的博客 https://blog.dengchao.fun , 后续的新内容将优先在自建博客站进行发布, 欢迎大家访问.

文章目录

前言

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

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

那么以我部署在函数计算上的博客站 https://blog.dengchao.fun为例, 逐步地向大家介绍如何使用 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 响应头的文档， 以及阿里云 CDN 对于缓存过期时间配置的介绍后，确认了之前的 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 响应头 的功能， 其中包含了删除回源响应头的功能。 因此我们可以借助这个功能， 让 CDN 删除掉源站返回的 Cache-Control 响应头。

在 CDN 上删除源站 Cache-Control 响应头
配置好以后， 再次观察加速域名下网络请求的响应头， 发现确实没有 Cache-Control：public，max-age=0 的响应头了。

2.3 效果对比

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

首先是访问量对比, 从监控数据来看近两天没有显著的访问量差异:
访问次数对比
然后是回源流量对比, 发现删除 Cache-Control 响应头以后回源流量显著下降:
回源流量对比
同时字节命中率与请求命中率都有显著的提升:
字节命中率对比
看来我们配置的缓存确实生效了。

总结

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

另外， 多看看文档。

推荐大家搭配 refresh-cdn-cache 插件一起使用, 避免更新网站后还需要手动去刷新 CDN 缓存才能看到更新的问题.

相关内容

推广

欢迎大家领取 阿里云优惠券, 新购续费更优惠, 更有最高 10 % 返现，详询 钉钉:
限量阿里云优惠券

邓超-码农加点中
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
阿里云CDN缓存预热与刷新以及常见的故障汇总
江晓龙的博客
08-28 4万+
在CDN缓存中的文件我们设置的过期时间为30天，30天内如果同名的文件发生了修改，是不会回源请求的，用户依旧访问的是旧文件，基于这种情况就需要使用到CDN的缓存刷新功能了。缓存刷新指的是后期上传了同名的文件，之前的缓存已经在各地的CDN边缘加速器中存在了，通过刷新的方式，可以将新的文件文件与旧文件覆盖。点击刷新预热—>刷新缓存—>操作类型为刷新—>刷新类型为URL也可以是目录—>填写新文件的URL路径—>点击提交即可。首先为CDN缓存文件添加一个缓存过期时间，即使以后不进行刷新，缓存过期后也会重新回源。
fc-alibaba-component:阿里云 函数计算 组件
05-01
前言 通过本组件，您可以简单快速的将阿里云函数计算项目部署到线上。 使用 最简使用方法 模版拉取： s init python3-http -p alibaba 其中Yaml的默认配置为： MyFunctionDemo: Component: fc Provider: alibaba Properties: Region: cn-hangzhou Service: Name: ServerlessToolProject Description: 欢迎使用ServerlessTool Function: Name: serverless_demo_python3_http Description: 这是一个Python3-HTTP的测试案例 CodeUri: ./ Handler: i
aliyun-java-sdk-cdn-2.6.3.jar
01-11
aliyun-java-sdk-cdn-2.6.3.jar
letsencrypt-aliyun-cdn:letsencrypt Docker镜像可自动为阿里云CDN上托管的域应用或续订证书
05-24
letsencrypt-aliyun-cdn 自动为阿里云CDN上托管的域申请和更新证书。 它基于和 ，感谢他们的出色工作！ 特征 仅Letsencrypt证书。 这是免费的！ 自动申请证书。 过期前10天自动续订证书。 支持许多DNS提供商，例如dnspod，Route 53，vultr，digitalocean。 用法 $ docker pull daxingplay/letsencrypt-aliyun-cdn $ docker run -e ACCESS_KEY_ID= ' ACCESS KEY for your aliyun account ' \ -e ACCESS_SECRET= ' ACCESS SECRET for your aliyun account ' \ -e DOMAINS= ' example.com,cdn1.example.com,cdn2.e
aliyun-cdn-refresh-cli：阿里云CDN刷新API
02-10
阿里云CDN刷新CLI 用法 从命令行 npm install aliyun-cdn-refresh-cli -g aliyun-cdn-refresh --ObjectPath * --ObjectType * --AccessKeyId * --AccessKeySecret * 从代码 // npm install aliyun-cdn-refresh-cli const operate = require ( 'aliyun-cdn-refresh-cli' ) ; operate ( { ObjectPath : * , ObjectType : * , AccessKeyId : * , AccessKeySecret : * , } ) ;
OneIndexServerless:OneIndex的无服务器版本，可以在aliyun.com上部署
05-11
OneIndex-Serverless 说明 本项目是的阿里云版本,您无需拥有一台服务器，即可拥有属于自己的OneDrive云盘 为什么本项目选择Serverless? 成本极其低廉，穷人也能用得起。完全实现按使用量(访问量)付费，费率极低，并且无固定费用支出 不需要自行管理服务器，运行极其稳定。而且服务的质量不受配置(带宽、内存、硬盘......)的影响 极为方便地搭配其他云计算产品进行优化。比如使用CDN对静态页面加速，同时降低流量成本 基本部署流程 后端部分 注册您的阿里云账号，获取accessKey和accessKeySecret 开通对象存储与函数计算服务 创建一个存储桶和一个云函数，上传Flask程序，并填写必要的配置 前端部分 将函数计算的http触发器url填写到config.json中 使用任意一种部署静态资源的方法将index.html和config.json部署到网络
cdn缓存策略
2301_76403123的博客
04-02 363
如果页面内容没有变化，返回lastmodified不变，这样原站会直接返回304给cdn，cdn也会返回304给用户。通过动态域名解析，网友的请求被分配到离自己最快的服务器。3600s后cdn失效，用户访问时会重新请求原站，如果没有变化，缓存失效周期自动延长10%。缓存原站返回HTTP状态为20*或304，不缓存其他状态(例如404，500，503)优点：相关页面内容更新后，不需要主动通知100个原站都来抓取，有效降低原站的压力。a）用户首次请求，CDN从原站抓取后缓存，直到文件过期后有用户请求再次更新。
什么？CDN缓存加速只适用于加速静态内容?
m0_69860225的博客
06-28 1544
想要购买阿里云CDN的伙伴们注意了CDN的缓存加速只适用于加速静态内容。首先，我们先来区分两个概念—静态内容与动态内容。静态内容（静态资源）静态内容是指在不同请求中访问到的数据都相同的静态文件。例如：图片、视频、网站中的文件（html、css、js）、软件安装包、apk文件、压缩包文件等。动态内容（动态资源）动态内容是指在不同请求中访问到的数据不相同的动态内容。例如：网站中的文件（asp、jsp、php、perl、cgi）、API接口、数据库交互请求等。为什么CDN只适用于加速静态内容？搞清楚问题之前，我们
CDN缓存
LIULIUAINI66的博客
04-19 3317
1.CDN缓存简介 CDN：Content Delivery Network，即内容分发网络，它是构建在现有网络基础上的虚拟智能网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、调度及内容分发等功能模块，使用户在请求所需访问的内容时能够就近获取，以此来降低网络拥塞，提高资源对用户的响应速度。 本地存储和浏览器缓存带来的性能提升主要针对的是浏览器端已经缓存了所需的资源，当发生二次请求相同资源时便能够进行快速响应，避免重新发起请求或重新下载全部响应资源。 这些方法对于首次资源请求的性能提升是无能为力的，
技术干货：使用静态缓存提升网站性能的五种方法！
weixin_33756418的博客
05-23 440
本文作者： 乔锐杰 现担任上海驻云信息科技有限公司运维总监/架构师。曾任职过黑客讲师、java软件工程师/网站架构师、高级运维、阿里云架构师等职位。维护过上千台服务器，主导过众安保险、新华社等千万级上云架构。在云端运维、分布式集群架构等方面有着丰富的经验。 以下正文 上次写了一篇数据库缓存，由于快餐式的风格，遭到了广大读友的吐槽。上篇风格有点 “ 虚...
【阿里云原生应用】使用阿里云FC函数计算完成阿里云CDN目录刷新
SuperWei的博客
08-14 2197
在日常的研发\运维中，一定会有一些场景触发的任务，调用频率低，为其单独部署一套服务成本不划算。但是如果每次都手动操作却很反人类。那有没有什么办法可以在完成自动化操作的同时，将成本降到最低呢？最近我在工作中使用OSS部署HTTP静态页，但是碰到了更新页面版本后，需要手动调用CDN刷新功能才能让网页及时发布到C端的问题。我们尝试通过阿里云的FC函数计算功能发布一个即使调用的Web服务，完成这项功能
一首歌的时间，手把手搭建基于FC的网站
阿里云技术
07-28 188
在接触serverless架构之前，我们如果想实现上线一个Web网站，就要在开发前期经过操作很多冗杂但又必须的步骤，不少小白可谓是快速的从入门到退坑。
7.关于cdn、页面静态化
耗子窝
04-08 2496
我们之前一直都在介绍动态请求的加速，接下来讲一下静态请求，也就是cdn。 当请求来到服务器上时，如果是访问静态资源，那么就将请求解析到cdn加速域名中，再由cdn（海量的就近加速节点）就近看有没有存静态资源，有的话直接返回，没有的话去指定的http地址中抓取数据返回并缓存起来，下次就可以直接返回了。 接下来配置一下，这里用的是阿里云的： 在cdn上添加配置，ip就是nginx的ip： ...
web缓存（强制缓存、协商缓存、CDN缓存）
MARTIAN的博客
02-23 2939
文章目录一、HTTP缓存1.1 强缓存1. 强制缓存的header属性（Pragma/Cache-Control/Expires）cache-control 的常用选项1.2 协商缓存（对比缓存）（一）Last-Modified（二）ETag（三）对比 Last-Modified 和 ETag1.3 HTTP缓存的整个流程二、CDN（内容分发网络）2.1 分发的内容是什么2.2 CDN 分发的流程静态内容动态内容2.3 CDN 工作原理1. 传统的未加缓存服务的访问过程2. 使用CDN缓存后的网站的访问过程
CDN的缓存策略
Fairy的博客
03-06 1970
https://www.cnblogs.com/tinywan/p/6067126.html 这位博主写得非常的详细清楚，一看就懂！！！
网站静态资源使用CDN加速
热门推荐
lwq的博客
03-02 1万+
使用七牛云平台的融合CDN功能对网页静态资源优化加速分发，例如：css、js、img 等； 实现原理： 如上图所示流程： 1. 用户请求到 CDN 节点； 2. CDN 节点未命中向源站获取文件； 3. 源站根据请求响应内容给 CDN ，同时 CDN 缓存内容； 4. CDN 节点将内容响应给最终用户； 5. 当同一cdn节点内的用户再次访问时，cdn便会直接将缓存内容返回给...
变态的静态资源缓存与更新
weixin_33694172的博客
04-22 668
为什么80%的码农都做不了架构师？>>> ...
在linux上使用docker部署nacos
最新发布
06-02
好的，下面是在Linux上使用docker部署nacos的步骤： 1. 安装docker 如果您的Linux机器上还没有安装docker，您需要先安装docker。可以执行以下命令来安装： ``` curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun ``` 2. 下载nacos的docker镜像文件 运行以下命令： ``` docker pull nacos/nacos-server ``` 3. 启动nacos容器 运行以下命令： ``` docker run --name nacos -e MODE=standalone -p 8848:8848 -d nacos/nacos-server ``` 其中，`--name`指定容器名称，`-e MODE=standalone`指定nacos为单机模式，`-p 8848:8848`指定映射到主机的端口号为8848。 4. 访问nacos 在浏览器中输入以下网址进行访问：http://<Linux机器IP>:8848/nacos/ 现在，您已经成功部署了nacos！ 如果您无法访问nacos界面，请检查以下几点： 1. 确认nacos容器是否已经启动 您可以运行以下命令查看容器状态： ``` docker ps -a ``` 如果nacos容器的状态为`Exited`，则说明容器启动失败。您可以运行以下命令查看容器日志，以便更好地排查问题： ``` docker logs nacos ``` 2. 确认端口是否正确映射 您可以运行以下命令查看容器端口映射情况： ``` docker port nacos ``` 如果您发现端口没有正确映射到主机上，您可以停止并删除容器，然后重新启动容器并指定正确的端口映射参数。 3. 确认防火墙是否允许访问端口 如果您的Linux机器上启用了防火墙，可能会阻止对nacos端口的访问。您可以尝试关闭防火墙或者配置防火墙规则以允许对端口的访问。 希望这些建议能够帮助您解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值