静态资源部署CDN(详细步骤+测试对比)

564 阅读2分钟

日盼夜盼,我的域名终于备案好了哈哈😁😁

相信很多小伙伴在面试中问到性能优化的问题,都会答到

  • 打包时将引⽤的静态资源路径修改为CDN上对应的路径
  • 上线时将静态资源部署CDN

前面那部分大家应该都经常使用,后面的部分涉及到项目的上线,需要拥有域名,就可能没接触过。

这次就记录一下从0到1实现静态资源部署CDN

CDN介绍

CDN的全称是Content Delivery Network,翻译成中文就是内容分发网络。CDN依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取内容,降低网络延迟,提高访问速度。简单来讲,CDN是用来进行加速的,它可以让用户更快获得所需的数据。

流程图解

这里直接引用阿里云的图,描述得很详细

CDN.png

配置内容

通过域名访问网站,一般有两种方式,我们所用到就是第二种

  • 域名绑定IP地址
  • 将域名配置CNAME重定向到别的域名(这一步不知道有没有说准😅)

我们需要配置的内容

  1. 设置一个加速域名(你购买域名的二级域名)
  2. 将源站设置成你的IP地址
  3. 将加速域名配置CNAME

实践操作

添加域名管理

阿里云CND服务 --> 域名管理 --> 添加域名

yum.png

生成CNAME

配置好后,在域名管理中会生成CNAME的地址

cname.png

加速域名配置CNAME

域名解析 --> 添加记录

CANAME.png

到这一步就完结撒花啦🎉🎉🎉

测试

源站访问(IP地址)

ip.png

加速域名访问

abc.png

最大1.5M文件的加载

  • 通过源站点访问需要1.63s
  • 通过加速域名访问只需要171ms

END

将静态资源部署CDN其实也很简单,希望这篇文章可以帮助有需要的小伙伴,文中有错误的地方欢迎大家提出和讨论🤞🤞