HTML5技术

【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践 - 初码(4)

字号+ 作者:H5之家 来源:博客园 2016-07-03 16:00 我要评论( )

从技术本质来说,CDN是无法完全替代OSS服务的,对象存储服务虽然是单服务器,但是在例如企业网盘、下载站等场景中,依然有很大的应用空间,所以OSS的HTTPS支持也很有必要,在这里一方面希望阿里云能够早日加入配置

从技术本质来说,CDN是无法完全替代OSS服务的,对象存储服务虽然是单服务器,但是在例如企业网盘、下载站等场景中,依然有很大的应用空间,所以OSS的HTTPS支持也很有必要,在这里一方面希望阿里云能够早日加入配置式的OSS的HTTPS支持,另一方面,对于反向代理的实现,日后有空,也好好研究一下

4、相对路径绝对路径问题

在实践过程中,有遇到需要对购买的商业模板进行改造的需求,例如引用图片地址、字符串资源等,而改造过程中,势必遇到需要对JS或者CSS文件内的相关图片应用路径。这里需要特别留意的是,在JS和CSS中

在CSS中出现的相对路径,是以CSS文件所在路径为基准的,而JS中的路径则是以导入此JS的网页文件所在的位置为基准的

这一点大家需要特别留意

5、阿里云路径长度问题

在实践中,也遇到了有的商业模板,目录层次特别长,在上传OSS的时候,就无法上传,应该是阿里云对最大路径长度做了限制,在这里建议不要超过5级。

结束了吗,还有没,重构是好习惯,想好以后会有怎样的扩展也很重要

下面就谈一谈这样CDN功能,还有能哪些功能和应用上的扩展

五、延伸与扩展

以上所述解决方案,在开发规模20人月以内的软件外包项目以及互联网敏捷项目中,有过多次非常稳定的实践,但这不是终点,如果深入下去,还有更多可深入挖掘的地方

1、权限控制

既然是架设自有的CDN加速服务,那就要求相关资源不能够给其他系统或者不希望给到的用户访问,针对这个需求,阿里云提供了两种解决方案

image

①防盗链。防盗链的原理很简单,通过判断HTTP头中的Refer地址,从而给出对应的权限应答,对于在本文中对模板和插件资源文件进行CDN加速的场景,防盗链是最简单也最适合的权限控制授权,因为只要设置自己要用的网站的Web地址就可以达到权限控制的效果。

2、图片上传处理

通常所说的网站资源文件有CSS、JS、IMAGE和FONT,在这里要讨论的是CDN加速对于图片处理的应用,值得注意的是:

阿里云的OSS的图片处理CDN加速机制,对于Web开发中的图片上传存储这一传统问题的解决,真是非常傻瓜和美妙

我们先回顾一下传统开发中图片存储解决办法,无非以下几种

①在数据库以Blob字段存储图片完整的二进制数据

②将图片保存在服务器上本地目录下,将文件名存入数据库String字段中

③架设单独图片服务器,将图片的完整URL地址存入数据库String字段中

三种方式在不同规模不同领域的开发中,都有遇到过,也有稳定的解决方案,但这些都过时了!如果大家留意看的话,各大网站早就开始架设自己图片(头像、相册等)CDN加速服务器

而在这里,我们也要做同样的事情,让中小开发项目也能够实现图片上传的云存储并进行加速访问

由于这个话题也可以单独成文,在这里只做简要介绍,先看完整的图片上传->存储->展现功能结构

图片加速

针对这个结构,最终的图片呈现3种方式。

①阿里云OSS呈现。最基本的图片云存储,将图片存入阿里云对象存储服务中

②阿里云OSS的CDN加速呈现。对阿里云对象存储服务进行CDN加速,呈现图片仍然是原图

③阿里云OSS的内置图片服务CDN加速呈现。利用阿里云对象存储服务的图片服务,使得呈现的图片能够按照预设的尺寸改变样式和大小

对三种呈现方式我们分别使用域名

https://imagecdn.alphams.cn

https://imageservice.alphams.cn

下面是简要的操作步骤

先建一个图片OSSBucket,命名为amsimage

image

绑定域名image.alphams.cn

image

image

image

继续添加图片CDN

image

配置CNAME

image

添加HTTPS支持

image

image

对刚才添加的amsimage添加图片处理服务

image

image

使用域名imageservice.alphams.cn

image

添加阿里云OSS内置的图片CDN加速服务成功

image

进入CDN管理菜单继续给imageservice的CDN服务添加证书增加HTTPS支持

image

image

下面继续添加3个阿里云OSS图片服务内置的样式

image

然后我写了一个测试的系统,方便大家能看明白(这个后面会单独成文讲解)

https://aliyunimagecdn.alphams.cn/

image

可以看到,一个图片的上传,可以延伸出多种方式与格式的访问,用于不同的场景。

3、使用阿里云的API进行企业级OSS和CDN管理

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用 - zhangjk

    【Vue 入门】使用 Vue2 开发一个展示项目列表的应用 - zhangjk

    2017-04-30 16:00

  • 对于Bootstrap的介绍以及如何使用 - novai-L

    对于Bootstrap的介绍以及如何使用 - novai-L

    2017-04-29 09:00

  • 在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

    在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

    2017-04-28 15:00

  • 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用 - nzbin

    探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用 - nzb

    2017-04-25 09:02

网友点评
=