- 原文地址:www.waylon.online/blog?id=fec…
传统前端系统的部署
对于前端而言，最传统的系统部署方式便是将前端打包出来的编译文件上传至CVM服务器，再通过nginx配置让用户能够访问到网页，这种传统的部署方式非常简单，对于前端而言，只需要将编译文件上传至服务器即可，为了项目的迁移，我们还会加入Docker容器来进行部署，但无论是直接上传文件至服务器还是Docker容器化部署，它们都有一个很明显的缺陷，就是极度依赖单个CVM服务器，如果系统体积过大会比较考验服务器的性能。
因此，除此之外，我们下面要介绍1种方式新的部署方式：COS + CDN部署。
什么是COS?
COS，全称对象存储（Cloud Object Storage，COS），是一种存储海量文件的分布式存储服务，它能让用户可通过网络随时存储和查看数据。通常我们公司的图床、前端静态资源存储都会用到COS，它能够做到让我们的静态资源摆脱对单个服务器的依赖；
什么是CDN？
CDN，全称Content Delivery Network，即内容分发网络，它是在现有网络结构中增加一层遍布全球的高性能加速节点构成新的虚拟网络架构，使网站发布者可以按照缓存策略将网站发布者的业务内容存储至更靠近用户的边缘节点上，缩短用户与业务内容距离，以此降低访问延迟，提升可用性。用白话文来说，它就是把资源缓存到距离用户最近的一个网络节点中，使得用户能够更快的访问资源；
需要注意的是，COS与CDN并不是绑定的，如果只是用到了CVM部署，也能够使用CDN对网站进行加速，其原理如下图：
实操
以腾讯云为例，操作如下，仅提供文字描述，图略：
COS:
- 进入腾讯云COS，开通COS对象存储；
- 创建对应的COS桶；
- 配置权限为【公有读私有写】；
- 将静态资源上传至桶中；
- 开启静态网站，生成COS域名；
CDN：
- 进入腾讯云CDN，选择添加域名，输入刚刚生成的COS域名（选择COS源）；
- 根据自己的需要配置【缓存配置】、【HTTPS配置】、【回源配置】即可
配置成功后，访问COS域名，网站正常打开，并且响应头带有x-cache-lookup、x-nws-log-uuid则代表成功部署了一个COS + CDN的网站；
几个知识点
-
什么是回源？
当 cdn 缓存服务器中没有符合客户端要求的资源的时候，缓存服务器会请求上一级缓存服务器，以此类推，直到获取到。最后如果还是没有，就会回到我们自己的服务器去获取资源，这就是回源。
也因此，不能说CDN一定比没有使用CDN更快，因为在没有命中缓存的情况下，我们中间多了一层节点转发。
-
CDN响应头中x-cache-lookup字段的含义？
下面这段就代表未命中缓存，回源；
x-cache-lookup:Cache Miss
x-cache-lookup:Hit From Inner Cluster
而下面这一段代码则代表命中边缘节点缓存，CDN加速成功；
x-cache-lookup:Cache Hit
x-cache-lookup:Hit From Inner Cluster
本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。
在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。
本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。
除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。
在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!
什么是回源？
当 cdn 缓存服务器中没有符合客户端要求的资源的时候，缓存服务器会请求上一级缓存服务器，以此类推，直到获取到。最后如果还是没有，就会回到我们自己的服务器去获取资源，这就是回源。
也因此，不能说CDN一定比没有使用CDN更快，因为在没有命中缓存的情况下，我们中间多了一层节点转发。
CDN响应头中x-cache-lookup字段的含义？
下面这段就代表未命中缓存，回源；
x-cache-lookup:Cache Miss
x-cache-lookup:Hit From Inner Cluster
而下面这一段代码则代表命中边缘节点缓存，CDN加速成功；
x-cache-lookup:Cache Hit
x-cache-lookup:Hit From Inner Cluster