七牛云图片CDN,被你忽略的神级好功能


编者按:[大房说]是七牛云众多用户中的一员,在回顾自己多年项目经历的过程中,他发现越来越多的人已经很依赖云服务所带来的便捷及高效。于是有了“云思路系列”,旨在总结[大房说]在使用云服务过程中得一些经验和教训。


本文转载自[大房说]“云思路系列”第三篇,微信号fangtalk!



我们不受雇于任何一家云厂商,仅仅出于对身边项目、产品的一些场景和案例,分享我们的一些经验和观点。我司所有产品,包括我司服务的客户,我们都在推荐用七牛云。当然除了CDN常规功能以外,我们还看中七牛提供的一些对开发非常友好的附加功能:云端的数据处理。例如,我们最常用的图片处理服务。所有用户上传的高清图片,直接上传到七牛云,然后在我们产品的图片元数据库里面仅仅保存一个原图的图片地址。在产品功能的不同模块,直接引用图片地址,外加一些控制图片尺寸、质量以及裁剪模式的数据处理参数:



  • 在列表等页面,针对图片地址,加上?imageView2/3/w/200/h/100/q/90,这样,在列表页,会对用户上传的图片,在列表页上按照 宽200px、高100px、质量为原图的90%进行展示;

  • 在产品的详情页,针对图片地址,加上?imageView2/2/w/600/q/95,这样,在详情页面,会对用户上传的图片,按照宽最多为600px、高自适应、质量95%进行展示;



采用这种方式,相比几年前我们在做视频UGC网站和第一财经网站时,自己做图片的方案设计,哪怕抛开分布式的图片上传和传统CDN的分发,应用程序层面的集成也简单了很多,至少不需要保存对同一图片的多种格式的引用:



  • 列表页做好缩略图截图,保存一份地址;

  • 详情页,做好尺寸压缩,再保存一份地址;

  • 如果以后其他页面或者模块,也需要其他格式和尺寸的图片,我们需要针对所有上传的原图,再需要统统重新生成一份新的尺寸图片。量大的时候要处理非常长的时间才能上线;

  • 如果随着产品版本的升级,适配多种屏幕,包括高清、Mobile等等,每次尺寸的变动,都需要开发的支持,对不何要求的图片统统进行一次性的处理;



图片这种实时的图片处理服务,是我们抛开传统的CDN而选择“新一代CDN”的一个主要原因。


前几天和一个朋友公司的架构师聊天,聊到了拥抱云所带给我们的一些变化,也顺便聊到了七牛的图片处理。在我聊完我们集成七牛云的方案后,对方的架构师问我,实时的处理,我们发现访问量大的时候,图片加载的有点慢(朋友公司也算是七牛的重度用户,每个月给七牛交很多很多银子),你们没遇到过吗?


我的第一反应是,惊讶。不是说对方质疑云图片慢而惊讶(世上本没有银弹),而是,一年上百万给七牛交银子的团队,竟然在这些基础的数据处理服务之外,没用过七牛的“神级优化”。


给他上一课的同时,我也意识到,看来,很多团队并不认真的看服务商的文档啊。开发人员,往往找到满足自己需求的技术说明,就停止了,集成进来,大功告成。这本身不是我的习惯,在真正开始动手写代码或者做方案之前,我都会通读所有的文档,有一个整体的认识,再说怎么用。这个习惯,也是我可以发现很多好用的用法的终极法宝。


这也是我写文介绍七牛这个服务的原因,一是如果你们没用过这些功能,大家应该去用,如果你不是用的七牛云,你的服务商或许也有类似的功能,天下服务一大抄吗;二呢,鼓励大家多看文档,外加浏览完没有文档的管理页面,看全、思考,再动手,或许这个习惯可以带给你神级开发效率呢。


我们回到前面的问题。实时处理,会慢吗?当然会,虽然七牛进行了缓存,但是,第一次的动态处理,不管是I/O还是CPU,都会有不小的消耗,相比静态文件,自然会慢一点。所以,你可能自然而然的一个想法便是:实时处理完后永久的持久化?但是,这种图片地址[http://7xp4qu.com2.z0.glb.qiniucdn.com/STglr2%2Favatar%2F0.jpg?imageView2/3/w/200/h/100/q/90]怎么做持久化呢?


大家可能觉得,URL里面有了问号,很多浏览器都会当成动态请求,浏览器 或者 客户端缓存的效果没那么好,外加,如果带问号的文件名,显的也很龌龊。那,基于我们多年动态请求伪静态化的经验,可以适用到七牛的动态图片处理方案上来吗?


有了思路,再仔细研究七牛的技术文档,以及七牛的portal,很快就会有方案。


第一步,通过七牛的管理平台,开启数据处理功能:




66

怎么个意思呢?就是说,通过一种变通的方案,可以把图片的URL [http://7xp4qu.com2.z0.glb.qiniucdn.com/STglr2/avatar/0.jpg?imageView2/3/w/200/h/100/q/90]变换成:[http://7xp4qu.com2.z0.glb.qiniucdn.com/STglr2/avatar/0.jpg-thumbnail],去掉问号,真正伪静态化:


67

有了这个基础,一方面,我们可以不修改我们的程序,就可以对用户访问的图片进行业务调整,例如,今天90%的图片质量,明天我可以调整成99%,而不用修改程序;另一方面,这也是我们可以充分利用七牛云的数据处理,实现真正的静态化的基础。


第二步,修改图片上传的逻辑,增加一个 “上传策略”,告诉七牛云,图片上传完后,帮我做数据处理,然后静态持久化:


68

简单来说就是,你上传一个图片,之前图片的文件名为 0.jpg,现在呢,上传文件的时候,文件名还是 0.jpg,但是,加一个 persistentOps 参数,告诉七牛云,上传成功后,帮我做一下数据处理:persistentOps=imageView2/2/w/200/h100/q/90|saveas/cWJ1Y2tldDpxa2V5,其中 | 为管道操作,把上传的图片按照“imageView2/2/w/200/h100/q/90”的方式进行处理,然后,保存到空间,并且以“0.jpg-thumbnail”做为文件名,cWJ1Y2tldDpxa2V5 为空间名和文件名拼接在一起base64以后的编码。这样处理以后,任何上传到七牛云的图片,原图保留在你的七牛云图片空间里;在七牛没有完成数据处理之前,用户的对图片的访问 0.jpg-thumbnail 由于在portal上配置了 数据处理 功能,即是没有这个静态图片,七牛会进行动态处理并临时缓存,当七牛的数据处理完成后,数据处理程序会把静态文件0.jpg-thumbnail 保存到七牛图片空间,后续的访问,就是真实的静态文件访问了:


69

开发效率和访问体验的神级提速!