一次性搞懂 CDN、对象存储、反向代理、函数计算和边缘计算

前端开发者应该都对 CDN 这个名词有所耳闻，

它不仅是一种用于提升网站访问速度的常见方式，

也是求职面试时常会遇到考题。

大家看标题应该也发现了，我们今天的主题不仅仅是介绍 CDN 本身，

还包含对象存储、反向代理、函数计算以及边缘计算。

今天我们就从前端开发者的视角，把 CDN 当做切入点，看看它们相互之间是如何配合的，帮大家一次性搞明白。

CDN 的全称是内容分发网络，

它是一种大范围部署的分布式网络。

这意味着在地理位上越靠近某个 CDN 节点的用户，可以享受更快地访问速度。这也是为什么 CDN 能加速网站的核心原因。

按照大多数前端开发者的理解，我们只要将前端构建出来的静态资源，上传到 CDN 服务器，然后再绑定一个域名，用户就可以通过这个域名从 CDN 快速加载网页了，对吗？

对，也不对。

在真实世界中，CDN 可能包含数千个节点，假设我们直接将构建产物上传到 CDN，每次发布就要同时上传数千份，无论是时效性，网络开销，节点的存储容量，都是无法接受的。

因此，我们并不是将构建产物直接上传到 CDN，而通常是上传到对象存储，将它作为源站，CDN 主动或被动地从中获取（回源）数据并缓存。

让我们来分析一下整个过程：

当用户第一次访问时，CDN 发现没有缓存，于是回源到对象存储获取并缓存数据，返回给用户。

当用户重复访问时，CDN 已经有缓存，于是直接将缓存返回给用户。

如此一来，凡是具有缓存的节点都能够快速就近响应用户请求。

当然这里面还有很多细节没有讨论，比如动态内容缓存怎么做，如何控制缓存的有效期，如何预热缓存等等，源站一定是对象存储吗？

那么这些内容就交给大家来探索了。

聪明的你可能会发现 CDN 不就是个具备缓存功能的反向代理服务器吗，没错，看来你已经 get 到了精髓。

这里补充一下正向代理和反向代理的主要区别：

正向代理是代表客户端向服务器发送请求，隐藏客户端身份。

反向代理是代表服务端接收客户端请求，隐藏服务端身份。

可以说反向代理服务器是现在互联网基础设施中，不可或缺的重要角色，很多基础功能都依靠代理完成。

如果用一个函数来描述代理的过程，可以写成这样：

这里 request 就是用户发送的原始请求，经过函数加工后返回一个新响应。

我们举一个例子来模拟 CDN 的缓存功能，这里用到的所有 API 都是标准 Web API。

在这个例子中，我们接收前端用户的图片请求，检查缓存的存在性，不存在则回源到对象存储，随后更新缓存。

这样用户在下一次访问时便可直接读取缓存，而不用访问源服务器。

如果你能理解，那么恭喜，你已经进入函数计算的大门了。

在函数计算中，函数是最小执行单元，用于完成相对特定的功能。比如图片格式转换；日志接收和转存；处理 AI 推理任务等等。

虽然名字叫函数计算，实现的功能看上去也很单一。

但实际上许多云厂商都支持 Web 函数，它可以接收用户请求，完成页面渲染后返回 HTML 文档。

就和 AI 推理函数一样，本质上也是一个输入对应一个输出。

这样一来，我们就可以利用 Web 函数计算搭建全栈应用，来实现更复杂的功能了。

你可能会有疑问，Web 函数一次处理一个请求效率岂不是很低。

我们知道即便访问一个简单的网站，通常都会并发产生多个请求。

实际上得益于 Serverless 架构，函数计算单元在并发时，可以自动复制多个实例同时处理用户请求，来者不拒的同时也能高效调度计算资源。

虽然函数计算是基于 Serverless 架构，但 Serverless 不一定是分布式的，也可能是单机部署的。

如果将函数计算改成分布式部署，那么边缘计算就出现了。这里的 “边缘” 其实就隐含了分布式的概念。

现代 CDN 节点通常就包含边缘计算功能，它允许开发者通过代码大幅度扩展节点的处理能力。

比如可以自适应图片格式转换；防盗链检查；针对请求区域的重定向等等。

现在让我们写一个简单的图片防盗链函数，

在这个函数中，入参 request 表示从浏览器发起的请求。

随后我们从 url 上取出 pathname，并判断前缀是否为 images，因为在这个函数中我们只对图片请求进行处理。

接着我们获取 referer 请求头并判断它是否在白名单中，如果不满足条件则返回 403 响应，表示拒绝返回图片。

之所以可以这样判断，是因为浏览器发起图片请求时，会自动在 Referer 头中带上该图片所在的页面地址。

在盗链网站中，Referer 头指向异常地址，如此便无法通过函数判断，达到了防止第三方网站引用源站图片的目的。

当然边缘计算能做的不仅如此，还记得我们之前提到的 Web 函数吗，

如果可以把它部署到边缘计算节点，我们的网站就可以在最靠近用户的位置，为用户提供极速服务了。

那么下一期视频我们就来实操，在边缘节点部署一个 AI 生成代码的应用。

本期视频我们从 CDN 出发，聊到对象存储，反向代理，函数计算和边缘计算的基本概念。

如果对你有用，请投币、收藏和转发，你的支持是我持续更新的最大动力。

我是小麦，一位热爱分享的前端工程师，期待和你分享更多硬核的内容。