【利用无服务器云函数(SCF)】自动刷新COS中变更文件的CDN!

简单几步,利用Serverless,让COS中文件变更自动刷新CDN!

背景

这几天遇到这样的一个场景,相信也是大多数的站长会遇到的一个问题:

自己的一个个人站点使用了COS作为前端静态资源的存储(JS、CSS、图片等等),同时开启了CDN作为资源的加速分发,为了最大的达到加速效果,把这些资源的缓存时间设置30天及以上。某一天,自己的站点需要变更一下css样式,修改完之后扔到COS中,发现站点中的样式仍没有生效。最后想起是命中了CDN的缓存,因此需要到 CDN控制台 进行URL刷新。

现状

目前COS(对象存储)控制台是没有提供这样一个功能:当启用了CDN,COS中文件变更时(上传、删除)自动去刷新CDN的选项。

分析

马云说:世界是由懒人创造的。

上面提到的刷新的工作,一次还好,但每次更新站点的静态文件都需要去执行这样的操作,这样重复性的功能是一定要得到解决的,谁让我懒…

想了下,COS文件变更的场景分为 2 种:

  • API上传
  • GUI上传(控制台、COS Browser…)

要实现自动刷新CDN,则需要用到CDN的 刷新URL的API

API上传

如果你是在代码里去上传静态资源的,那么你是能够知道文件上传的时刻的,在文件传完后去调用CDN的API则完成工作。

但是,如果你也同时通过COS控制台来上传文件,那这样的场景则覆盖不了,因此这种做法并不全面。在此也不做多的描述了。

GUI上传

首先,会遇到一个难题,COS本身没有提供设置文件更变之后的回调的功能,如果能拿到这个的回调,则不管是通过什么方式的上传,均能被覆盖到。

既然写了这篇东西,也不卖关子了,直接介绍下我们的主角:SCF(无服务器云函数),简单说,SCF能实现事件式的触发,让你的一段代码跑在云上,无需自己去搭建服务器。而这里我们要利用他很重要的一个能力:COS文件上传/删除的触发器。

下面我们就一步步来实现我们要的功能:

注意: 地域需要选择与COS中存放静态资源的Bucket同个地域的,这里以我广州的 Bucket 为例,创建广州的函数

起个名字叫 cdn_refresh, 环境的话,我选择 Nodejs(这里推荐大家选 Nodejs 就行,因为我的这段demo是用的node,你需要使用的话,不懂node也没关系,改一下配置就行)

  • 2、修改 demo 配置

下载我这个 demo的代码,解压后修改里面的几个配置信息,包括secretId、secretKey、以及你的cdn域名

把写好的代码压缩成 zip 包,通过本地上传 zip 包选项传上去,执行方法不用修改

  • 3、添加触发方式,完成创建

选择 COS 触发,Bucket选择静态资源存储的bucket,事件类型我们选择文件上传,点击保存,完成函数创建

  • 4、再次添加文件删除的触发方式,完成配置

上面我们支持了文件上传的触发方式,这里再添加上文件删除的触发,这样才是完整的文件变更

测试效果

以上,我们就完成了 SCF 侧函数的配置,那下面我们直接看效果就行

我在控制台上传了文件 nba.jpg

我们在 SCF 控制台能看到调用相关的日志

最后,因为 CDN刷新是异步刷新,我们可以去 CDN控制台 查看刷新记录

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏美丽应用

给安卓Chrome加入主页按钮

6482
来自专栏雨尘分享

SDWebImage 引发的 cell不断下拉引起的闪退 卡顿

1842
来自专栏Google Dart

AngularDart 4.0 高级-安全

本页面介绍了Angular内置的针对常见的Web应用程序漏洞和跨站脚本攻击等攻击的内置保护。 它不包括应用程序级别的安全性,如身份验证(此用户是谁?)和授权(此...

822
来自专栏电光石火

推荐几款比较好看HTML admin后台模板

H+是一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了...

3.4K1
来自专栏大魏分享(微信公众号:david-share)

VMware软件定义数据中心分析工具介绍----第二篇

在本文连载的第一篇中,我向大家介绍了vROps的架构、vROps的指标含义,以及如何自定义一个告警。该文章得到了VMware中国的转发,也使更多的朋友能够阅读到...

3628
来自专栏LIN_ZONE

谷歌断点调试(转载)

简单地说,断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,...

1104
来自专栏极客编程

Vue.js如何写一个简单的原生js模块,浏览器中的表现如何?

浏览器正在逐步的支持原生JavaScript模块。Safari和Chrome的最新版本已经支持它们了,Firefox和Edge也将很快推出。

1542
来自专栏向治洪

React Native项目组织结构介绍

代码组织: 目录结构: . ├── components //组成应用的各个组件 │   ├── Routers.android.js //每个组...

2177
来自专栏韩东吉的Unity杂货铺

零基础入门 7: 创建自己的菜单

在上一篇菜单介绍分享之后,有一些小伙伴在后台留言说能不能分享下如何创建自定义的菜单栏?怎么创建?

954
来自专栏smy

微信小程序避坑指南

 详见官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/client-lib/cl...

2433

扫码关注云+社区