如何实现网站文件动静分离

背景

传统动静不分离的产品架构,随着访问量在增长,性能会成为瓶颈。以一个常见的Web站点为例。www.acar.com是一个刚建立汽车资讯车友交流网站,主站用Php搭建,有10GB的图片素材,部分JS文件。目前购买一台ECS放置所有程序代码,并在ECS上安装MySQL数据库。随着用户访问量的不断增长,不少用户反映,访问网站的速度越来越慢,图片加载慢,网站响应慢,同时网站技术人员也发现用户上传的图片越来越多,快超过1TB了。在这种情况下,用户可以通过利用OSS和CDN对网站进行架构优化,做到网站文件的动静分离的,提升用户访问体验,实现成本可控。

网站动静分离架构

在该架构中,OSS作为海量文件存储源,静态图片、视频文件、下载包、App更新包等均放在OSS,同时OSS作为CDN的源站,通过CDN加速分发,用户通过CDN节点就近获得文件。

该架构优势十分明显:

  • 降低Web服务器负载,静态文件访问负载全部通过CDN;
  • 存储费用最低,OSS的存储费用仅为ECS磁盘费用的50%;
  • 海量存储空间,无需考虑存储架构升级;
  • 流量费用低,相比直接通过OSS访问,除极少额外增加的回源流量外,主要流量使用CDN流量,单价最低只需0.26GB,远远低于OSS直接访问的外网流量单价。

具体操作步骤

第一步对ECS上的网站程序进行整理,把动态程序部分和静态部分分不同的目录管理起来:

  • 建立Images目录,放置所有网站高清素材图片;
  • 建立Javascript目录,放置所有的JS脚本;
  • 建立Attachment目录,放置所有用户上传的图片和附件。

第二步进入到OSS控制台,点击“CDN加速OSS”。

  • 选择新建Bucket。根据你ECS所在的区域选择Bucket所在区域,权限选择“公共读”,Bucket名称与ECS上新建的目录的名称对应,比如”acar-image-bucket“,选择下一步;
  • 输入“image.acar.com”作为您网站高清素材图片的加速域名后,点击下一步;
  • 选择默认的自动添加阿里云解析,点击完成。

第三步点击“立即上传文件,体验加速效果”。

  • 把您在第一步中建立在ECS上的Images目录下的所有图片文件上传到这里(acar-image-bucket下),您可以使用OSS客户端工具更加方便灵活的完成图片的上传(OSS客户端工具Windwos版本);
  • 点击列表中已经上传文件的“获取地址”,您就能获取到该文件的CDN加速的访问地址,通常为“您输入的加速域名+'/'+'文件名'”的格式;
  • 逐一完成图片文件的上传。

第四步按照前三步的示意,把其他两个文件也通过“CDN加速OSS”的方式上传,分别建立“acar-js-bucket”和"acar-csimages-bucket"两个使用CDN加速的OSSbucket。

第五步在原本ECS系统中,找到原本访问静态文件的代码,把访问URL修改为加速访问的地址。

大功告成,以后用户访问您的网站的静态文件就全部通过OSS+CDN的方式访问,不再占用您ECS的资源。

需要注意的是,如果您想把用户上传的文件自动同步到“acar-csimages-bucket”中,您可以参考OSS相关SDK和API的PutObjcet部分,实现代码级别自动上传。

注意事项

  •  OSS是以Bucket为单位设置CDN加速,您最好为每个Bucket指定一个二级域名,方便管理;
  •  您可以通过OSS一键加速配置,静态文件的OSS和CDN的相关配置(CDN加速OSS点击这里);
  •  用户第一次访问静态资源,会先回源OSS获取资源再推送到CDN,需要大概5分钟左右的生效时间。您可以在更新资源后,通过刷新的方式,让CDN主动回源,让用户访问时不再等待。

相关资料

各区域的OSS访问地址

OSS客户端工具Windwos版本

客户端工具,支持文件夹上传,支持大文件自动分片多线程上传、支持批量删除、支持批量设置。

OSS客户端工具Mac版本

客户端工具,支持文件夹上传,支持大文件自动分片多线程上传、支持批量删除、支持批量设置。

CDN管理控制台

网页版本控制台,方便您进行管理设置和简单的文件管理。

 

时间: 2024-08-19 23:49:35

如何实现网站文件动静分离的相关文章

基于centos 6.5使用varnish实现网站动静分离_Linux

一.Varnish简介 Varnish是一款高性能.开源的反向代理服务器和缓存服务器,其开发者Poul-Henning Kamp是FreeBSD核心的开发人员之一. Varnish主要运行两个进程:Management进程和Child进程(也叫Cache进程). Management进程主要实现应用新的配置.编译VCL.监控varnish.初始化varnish以及提供一个命令行接口等.Management进程会每隔几秒钟探测一下Child进程以判断其是否正常运行,如果在指定的时长内未得到Chil

Nginx + Tomcat 动静分离实现负载均衡(转)

0.前期准备 使用Debian环境.安装Nginx(默认安装),一个web项目,安装tomcat(默认安装)等. 1.一份Nginx.conf配置文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

Apache+tomcat迁移到apache+Weblogic整合之动静分离问题?困惑两天了~

问题描述 先看看我的WEB应用是用Spring MVC 3.0.4做的,在Apache(mod_jk)+tomcat的时候完全没有问题. 1. web.xml配置,注意url-pattern,是处理所有的请求,这是一个网站的根应用项目.<servlet-name>cts-web</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class

Nginx配合Apache或Tomcat的动静分离基本配置实例_nginx

其实本人比较喜欢nginx跑静态和做负载反向代理,动态php还是交给apache处理比较稳定,jsp就交给tomcat.resin或jboss.nginx跑静态的能力是无与伦比的,是目前web服务器里最强的.nginx和apache.tomcat.resin的动静分离配置其实很简单,就几句配置,稳定性也非常好. 1.nginx和apache的动静分离配置: 把下面配置放到nginx配置文件相应的server { }里面,如果使用其他端口号,改一下就行: #所有php的动态页面均交由apache处

Nginx 和 IIS 实现动静分离

前段时间,搞Nginx+IIS的负载均衡,想了解的朋友,可以看这篇文章:<nginx 和 IIS 实现负载均衡>,然后也就顺便研究了Nginx + IIS 实现动静分离.所以,一起总结出来,与大家共同探讨.   动静分离,说白了,就是将网站静态资源(HTML,JavaScript,CSS,img等文件)与后台应用分开部署,提高用户访问静态代码的速度,降低对后台应用服务器的请求.后台应用服务器只负责动态数据请求. 优势:分担负载,减轻web服务器的压力,适用于大负载. 静态资源放置cdn,同时还

ASP.NET的路由系统:URL与物理文件的分离

表现为请求地址与目标Controller和Action的动态映射的URL路由系统并不是专属于ASP.NET MVC,而是直接建立在ASP.NET 中.ASP.NET通过URL路由系统实现了请求地址与物理文件的分离. 一.URL与物理文件的分离 对于一个 ASP.NET Web Form应用来说,任何一个请求都对应着某个具体的物理文件.部署在Web服务器上的物理文件可以是静态的(比如图片和静态HTML文件等),也可以是动态的(比如.asxp文件).对于静态文件的请求,ASP.NET直接返回文件的整

nginx+tomcat实现动静分离(转)

本文设计的动静分离结构   在本文中,我们将静态资源放在 A 主机的一个目录上,将动态程序放在 B 主机上,同时在 A 上安装 Nginx 并且在 B 上安装 Tomcat.配置 Nginx,当请求的是 html.jpg 等静态资源时,就访问 A 主机上的静态资源目录:当用户提出动态资源的请求时,则将请求转发到后端的 B 服务器上,交由 Tomcat 处理,再由 Nginx 将结果返回给请求端.   提到这,可能有您会有疑问,动态请求要先访问 A,A 转发访问 B,再由 B 返回结果给 A,A

简单实现nginx+tomcat的反向代理与动静分离_Tomcat

windows下测试 nginx+tomcat实现java web项目的动静分离 1. 安装nginx,访问静态资源 安装成功后,启动nginx,浏览器输入http://localhost/出现欢迎页面. 在nginx下依次建立目录 static\test1\js\common,并将jquery.XX.js 放进去. PS: static 代表静态文件主目录,test1 代表tomcat下的项目名称,本机使用jquery-1.12.1.min.js 修改配置文件nginx.conf,添加如下配置

详解Ngigx+Tomcat配置动静分离,负载均衡_nginx

由于公司使用过Ngnix,对于刚接触Nginx来说,感觉有些好奇,于是研究了下. 本人在windows下使用的版本是nginx-1.8.1: 1. 启动Ngnix 双击nginx-1.8.1文件夹中nginx.exe,当任务管理器中存在两个nginx进程时,则说明启动成功! 2. Ngnix常用命令 nginx -s stop 强制关闭 nginx -s quit 安全关闭 nginx -s reload 改变配置文件的时候,重启nginx工作进程,来时配置文件生效   nginx -s reo