先后端分离实践（一）

前言

最近这一段时间因为Nodejs的逐渐成熟和日趋稳定，愈来愈多的公司中的前端团队开始尝试使用Nodejs来练一下手，尝一尝鲜。

通常的作法都是将本来属于后端的一部分相对于业务不是很重要的功能迁移到Nodejs上面来，也有一些公司将NodeJS做为先后端分离的一个解决方案去施行。而像淘宝网这类的大型网站也很早的完成了先后端的分离，给咱们这样的后来者提供了宝贵的经验。

一样，咱们的大网盘团队也早在去年早早就开始了紧锣密布的准备工做，这目前工做也作的差很少了，如今我就来总结一下在过程当中遇到的坑点以及注意事项。

认识先后端分离

在传统的web应用开发中，大多数的程序员会将浏览器做为先后端的分界线。将浏览器中为用户进行页面展现的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的全部代码统称为后端。

因为先后端分离这个概念相对来讲刚出现不久，不少人都是只闻其声，不见其形，因此可能会对它产生一些误解，误觉得先后端分离只是一种web应用开发模式，只要在web应用的开发期进行了先后端开发工做的分工就是先后端分离。

其实先后端分离并不仅是开发模式，而是web应用的一种架构模式。在开发阶段，先后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段先后端分离模式须要对web应用进行分离部署，先后端以前使用HTTP或者其余协议进行交互请求。然而做为一种架构模式，咱们在实施的过程当中主要对如下四个方面来进行比较和从新认识。

先后端分离大概能够从四个方面来理解：

1. 交互形式

2. 代码组织方式

3. 开发模式

4. 数据接口规范流程

1、交互形式

在先后端分离架构中，后端只须要负责按照约定的数据格式向前端提供可调用的API服务便可。先后端之间经过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。

2、代码组织方式

在传统架构模式中，先后端代码存放于同一个代码库中，甚至是同一工程目录下。页面中还夹杂着后端代码。先后端工程师进行开发时，都必须把整个项目导入到开发工具中。

而先后端分离模式在代码组织形式上有如下两种:

• 半分离
  先后端共用一个代码库，可是代码分别存放在两个工程中。后端不关心或不多 关心前端元素的输出状况，前端不能独立进行开发和测试，项目中缺少先后端 交互的测试用例。

• 分离
  先后端代码库分离，前端代码中有能够进行Mock测试(经过构造虚拟测试对 象以简化测试环境的方法)的伪后端，能支持前端的独立开发和测试。然后端 代码中除了功能实现外，还有着详细的测试用例，以保证API的可用性，下降 集成风险。

3、开发模式

咱们以前的架构属于传统的MVC架构，总体没有进行先后端分离，在项目的开发阶段，前端工程师负责编写HTML，完成前端的页面设计并套页面，而后再使用模板技术将写好的前端代码转换为Smarty脚本，同时内嵌一些后端提供的模板变量和一些逻辑操做。应用运行期，将所有代码进行打包，和后端代码部署到同一服务器上，同时会进行简单的动静态分离部署。

此时，应用的开发流程以下图所示。

而在实现先后端分离架构以后，前端工程师只须要编写HTML、js、CSS等前端资源，而后通 过HTTP请求调用后端提供的服务便可。除了开发期的分离，在运行期先后端资源也 会进行分离部署。

先后端分离以后，开发流程将以下图所示。

经过上面的两幅流程图，不难发现，在开发模式上，先后段分离不只仅只是工程师的分工开发，更重要的意义在于实现了先后端的并行开发，简化了开发流程。

4、数据接口规范流程

在开发期间先后端共同商定好数据接口的交互形式和数据格式。而后实现先后端的并行开发，其中前端工程师再开发完成以后能够独自进行mock测试，然后端也可使用接口测试平台进行接口自测，而后先后端一块儿进行功能联调并校验格式，最终进行自动化测试。

分离的四个好处

先后端分离模式和传统的web应用架构相比有很大的不一样，到底分仍是不分，这还真是个问题。

从目前应用软件开发的发展趋势来看，主要有两方面须要注意：

1. 愈来愈注重用户体验，随着互联网的发展，开始多终端化。

2. 大型应用架构模式正在向云化、微服务化发展。

咱们主要经过先后端分离架构，为咱们带来如下四个方面的提高：

• 为优质产品打造精益团队
  经过将开发团队先后端分离化，让先后端工程师只须要专一于前端或后端的开发工做，是的先后端工程师实现自治，培养其独特的技术特性，而后构建出一个全栈式的精益开发团队。

• 提高开发效率
  先后端分离之后，能够实现先后端代码的解耦，只要先后端沟通约定好应用所需接口以及接口参数，即可以开始并行开发，无需等待对方的开发工做结束。与此同时，即便需求发生变动，只要接口与数据格式不变，后端开发人员就不须要修改代码，只要前端进行变更便可。如此一来整个应用的开发效率必然会有质的提高。

• 完美应对复杂多变的前端需求
  若是开发团队能完成先后端分离的转型，打造优秀的先后端团队，开发独立化，让开发人员作到专一专精，开发能力必然会有所提高，可以完美应对各类复杂多变的前端需求。

• 加强代码可维护性
  先后端分离后，应用的代码再也不是先后端混合，只有在运行期才会有调用依赖关系。

应用代码将会变得整洁清晰，不管是代码阅读仍是代码维护都会比之前轻松。

须要进行先后端分离的场景

任何一项技术以及架构都不是适用于任何场景，先后端分离一样也是如此。虽然先后端分离架构能带来许多的好处，但前提是创建在开发团队合适的基础上的。

而咱们百度网盘就属于那种：

1. 页面布局复杂，使用了主题和样式。

2. 须要有较高的页面渲染效果

3. 前端页面中包含复杂业务逻辑

4. 页面须要渲染的数据量较大

像这种重前端的应用咱们综合考虑了各类状况，最终决定采用先后端分离架构。

部署方案

先后端分离以后，应用在部署时也须要进行先后端分离。在进行先后端分离方案选择时，须要结合项目的实际状况和用户来考虑。

分离以前的架构

先后端分离以前，网盘的后端架构是Nginx服务和后端的PHP服务以及前端的静态资源都是部署在同一台服务器上。当浏览器发起访问请求时，如何请求的是静态资源，Nginx直接把静态资源返回给服务器；若是请求的是页面或后端服务，则经Nginx将请求转发到后端的PHP服务器，完成响应后经Nginx返回到浏览器。

注：此图中的Nginx属于后端机，主要针对前端机Nginx转发过来的请求进行识别弄转发给本机的PHP服务；前端机和后端机各有一个Nginx服务。

这个方案比较简单，易于实现，并且能到达先后端解耦的目的。并且不少公司目前都是基于这种架构或者必定的变形来实现的web应用。

可是对于页面量比较大，须要有良好SEO的应用来讲，此方案缺点也较为明显。由于 Nginx只是向浏览器返回页面静态资源，而国内的搜索引擎爬虫只会抓取静态数据， 不会解析页面中的js，这使得应用得不到良好的搜索引擎支持。同时由于Nginx不会进行页面的组装渲染，须要把静态页面返回到浏览器，而后完成渲染工做，这加剧了浏览器的渲染负担。

另外，因为这种架构使得前端工程师的工做范围只局限在了浏览器一侧，致使在进行一些特殊的性能优化时，前端工程师没法独立完成，还须要后端开发人员的配合，这也必定程度上影响了双方的进度。

分离以后的架构

先后端分离以后，咱们在原先的架构只上再单独增长了一个Node Server做为中间层，将前端资源部署到Node Server中。Node Server还实现了一层数据代理服务，负责与提供数据的后端服务进行通讯。

而且还在这个基础上增长并使用了前端机（前端机是对全部的请求进行预处理和负载均衡，而后再转发给后端机。）的Nginx服务，浏览器发起的请求通过前端机的Nginx进行分发，URL请求统一分发到Node Server，在Node Server中根据请求类型从后端服务器上经过RPC服务请求页面的模板数据，而后进行页面的组装和渲染；API请求则直接转发到后端服务器，完成响应。

注：此图中的Nginx属于前端机。

先后端分离方案对比

实现和部署

下一篇将为你们分享百度网盘先后端分离中的Node Server基础架构、前端路由管理、模板数据交互以及运维和环境部署相关内容。

结语

先后端分离并不是仅仅只是先后端开发的分工，而是在开发期进行代码存放分离、先后 端开发职责分离，先后端可以独立进行开发测试;在运行期进行应用部署分离，先后 端之间经过HTTP请求进行通信。先后端分离的开发模式与传统模式相比，能为咱们 提高开发效率、加强代码可维护性，让咱们有规划地打造一个先后端并重的精益开发 团队，更好地应对愈来愈复杂多变的Web应用开发需求。