网站的动静分离实践(动静分离)

1. 动静分离的实现思路

动静分离是将网站静态资源（HTML，JavaScript，CSS，img等文件）与后台应用分开部署，提升用户访问静态代码的速度，下降对后台应用访问。

动静分离的一种作法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据必定规则静态资源的请求所有请求nginx服务器，达到动静分离的目标。

1.1 静态资源部署至CDN上

咱们的方案是直接将静态资源所有存放在CDN服务器上。由于以前项目中的JavaScript,CSS以及img文件都是存放在CDN服务器上，将HTML文件一块儿存放到CDN上以后，能够将静态资源统一放置在一种服务器上，便于前端进行维护；并且用户在访问静态资源时，能够很好利用CDN的优势——CDN系统可以实时地根据网络流量和各节点的链接、负载情况以及到用户的距离和响应时间等综合信息将用户的请求从新导向离用户最近的服务节点上。

1.2 后端API提供数据

后端应用提供API，根据前端的请求进行处理，并将处理结果经过JSON格式返回至前端。目前应用主要采用Java平台开发，所以应用服务器主要是Tomcat服务器，如今也开始有部分应用采用 node进行开发，应用服务器也开始使用node服务器。

1.3 先后端域名

动静分离由于静态资源和应用服务分别部署在不一样的服务器上，所以会面临域名策略的选择。

• 相同域名
  采用相同域名下，用户请求api时能够避免跨域所带来的问题，相对开发更为快速，工做量也相对小一些。

• 不一样域名
  先后端采用不一样域名时，须要先后端开发时兼容跨域请求的状况，开发量相对上一种会稍多一些。解决跨域方式最经常使用的方式就是采用JSONP，还有一种解决方式使用CORS（HTTP访问控制）容许某些域名下的跨域请求。
  目前在咱们的项目中JSONP方式更多，CORS由于须要浏览器支持，所以只会在APP内嵌HTML5，且须要POST方式时中使用。

采用不一样域名的方式优势也是很是明显的，不一样域名采用两个域名服务器，不一样的域名服务器根据请求的不一样采用不一样的负载均衡策略；并且不一样域名也能够邮箱方式前端携带过多的Cookie。

2. 动静分离的实现优缺点

2.1 优势

• api接口服务化：动静分离以后，后端应用更为服务化，只须要经过提供api接口便可，能够为多个功能模块甚至是多个平台的功能使用，能够有效的节省后端人力，更便于功能维护。
• 先后端开发并行：先后端只须要关心接口协议便可，各自的开发相互不干扰，并行开发，并行自测，能够有效的提升开发时间，也能够有些的减小联调时间
• 减轻后端服务器压力，提升静态资源访问速度：后端不用再将模板渲染为html返回给用户端，且静态服务器能够采用更为专业的技术提升静态资源的访问速度。

2.2 缺点

• 不利于网站SEO（搜索引擎优化）:搜索引擎的网络爬虫通常是根据url访问页面，获取页面的内容后去掉没用的信息例如：CSS，JavaScript，而后分析剩下的文本内容；动静分离架构模式前端数据即在是由JavaScript来完成，这就会致使网络爬虫获得的信息部分丢失。在开发中能够采用前端缓存不常常变化数据的方式来解决，只有哪些常常发生变化的数据才每次向后端请求。

• 开发量变大，先后端交流成本升高：后端api返回的数据，每每是有自身逻辑在内的，好比返回数据中的包含status（1-处理中，2-处理成功，3-处理失败），前端须要理解status的不一样含义，对应的前端操做须要理解（如，status =1 or status = 2，不可提交）。

• 在业务高速发展时须要慎重考虑：由于开发量变大，若是在业务开始阶段，缺少前端又要求开发速度很快，就须要慎重考虑这种方式的实现成本对业务发展的影响。

3. 实现案例

这个是在公司作的内嵌到app里的HTML5页面