阿里云CDN+OSS完成图片加速 - 好文

我们使用React Native开发APP，在列表中显示图片时，列表框经常出现长时间的空白。经过稍微研究和参考其他人的经验，我们知道React
Native的ListView以及后来改进版的FlatList在安卓系统上都有内存使用方面的问题，很多团队在开发时都需要自己去优化这个控件，大体优化思路无非也就是将滚出显示区域外的图片占用的内存释放掉，具体实现起来会复杂一些。

以上主要是背景介绍，不过有点跑题。那我们在优化之后，仍然还是有些问题，这和网络状况也有关系，网速慢的时候图片加载的时间比较长，会出现卡顿和渲染完成前的空白现象。我们图片全部存储在阿里云OSS服务中，数据库中只保存图片链接，那图片的加载速度问题，可以使用阿里云CDN来协助解决。

CDN+OSS能解决图片加速的问题，那具体是怎样配置的呢？这里我们先把两个名词了解清楚，有些名词因为向来没有被很好地解释，导致使用者对概念理解不正确，从而对加速的流程理解有错误，即使按照文档提示可以配置了，也无法正确理解为什么要那样去配置。

加速域名

比如我的网站域名是www.mydomain.com，CDN是用来加速这个网站的图片，那么有人就以为加速域名是：www.mydomain.com，即把加速域名理解为被加速的网站的域名。而实际上，我们应该添加一个二级域名来作为加速域名，加速域名的意思是，你访问这个域名的时候，所访问的资源是通过CDN来加速了的，需要注意的是，在这里，加速域名不是：www.mydomain.com。

源站域名

对于我们这个场景来说，源站域名就是OSS的域名。如果我们通过OSS域名来访问图片资源，那么就直接从OSS服务器获取图片，而如果从加速域名访问图片，则先试图从CDN服务器获取图片资源，如果CDN服务器没有缓存图片资源，则CDN服务器会自动去源站OSS服务器获取图片资源并缓存在CDN服务器上。

配置及原理

具体来说，比如我要在网站某个页面上显示一张图片，这张图片是放OSS中的，地址为：https://mydomain.com-oss.aliyun.com/test.jpg。现在我想使用CDN来加速这张图片，那么我需要在网站页面代码里面修改图片的地址为加速域名的地址。我先在阿里云的域名管理中选择域名：mydomain.com，然后给它添加一个二级域名，暂且就叫cdn.mydomain.com吧，之后在阿里云CDN控制台的域名管理界面上，添加一个加速域名，就是这个：cdn.mydomain.com，源站域名就设置为：https://mydomain.com-oss.aliyun.com。阿里云CDN会给这个加速域名分配一个CNAME，比如：cdn.mydomain.com.kunlunar.com，然后你在mydomain.com的域名解析那里，给二级域名：cdn.mydomain.com添加一个CNAME类型的解析，值为：cdn.mydomain.com.kunlunar.com。

现在就可以改下你网站界面里面的代码了，比如原来有代码如下：

<img src=”https://mydomain.com-oss.aliyun.com/test.jpg” />

就需要改成：

<img src=”https://cdn.mydomain.com/test.jpg” />

这样，当用户浏览你的网站：www.mydomain.com，访问到我们原来要加速的那张图片时，就访问了：https://cdn.mydomain.com
/test.jpg，因为我们已经给二级域名cdn.mydomain.com
添加了一个CNAME解析，这时候DNS会把这个二级域名解析到CNAME的值，也就是前面提到的阿里云给我们的CNAME值：cdn.mydomain.com.kunlunar.com，这个值再经过解析得到的是阿里云智能DNS服务的IP，于是域名解析流程转到了阿里云的智能DNS。这个智能DNS根据用户访问的源IP地址，可以知道用户离哪个CDN机房比较近，然后将那个CDN机房服务器的IP返回给用户，假设为：111.222.33.44。

用户得到这个IP：111.222.33.44后，就近地去获取图片了。当用户第一次访问CDN机房服务器时，找不到要访问的图片，这时候CDN服务器就会去访问源站，也就是从OSS中获取要访问的图片https://mydomain.com-oss.aliyun.com/test.jpg，并缓存到CDN服务器上，再将图片内容返回给用户。下一次如果有和该用户位于同一区域的用户访问该图片，则会走一样的流程，只是这时候，CDN服务器上已经缓存好图片，不需要再次去OSS中获取原始图片了。而CDN服务器相比于OSS存储服务器，一般来说离用户更近一些，这样就达到了加速访问的效果。阿里云CDN+OSS组合使用时，还提供了自动刷新功能，开启这个功能后，当OSS中的原始图片信息改变时，会通知CDN服务器重新拉取并缓存，这样就降低了访问CDN服务器获取资源时缓存未命中的机率。

原文发表于：阿里云CDN+OSS完成图片加速 <https://www.nndev.cn/archives/1940>

欢迎关注微信公众号：

热门工具换一换