前端开发模式与Nginx之间的一段孽缘

q789321

　　本文适用于前后端分离的项目，当然有兴趣的同学也可以看一下，了解一下我口中的“孽缘”；

前言
　　在吃螃蟹前咱们先了解一下几种传统的前端开发模式（以java web为例）：

• 绘制好的前端页面以及一些资源文件交给后端，让后端去维护（后端可能通过jsp去渲染）
  
• 前端维护前端代码，但是前端需要在本地运行后端程序（本地启一个Tomcat之类的）
  

　　传统开发模式所面临的两个问题就是：开发效率、数据。我们在绘制页面的时候当然可以用假数据先绘制上去，也可以本地mock数据，但是有时候遇到一些复杂的业务场景的时候，这些并满足不了我们的需求，就算满足了也会很繁琐很繁琐。整个开发模式其实前后端有工作交叉的情况出现，后端写接口的时候其实都已经测试过接口了，各种数据接口都存在了，前端再去mock有时候就是一种资源浪费。当然我相信小伙伴们会在这里提出一个疑问：那如果后端没有写接口前我就要去写前端页面怎么办？没事，继续往下面看。
　　今天我想讲的是在一个前后端分离的项目开发过程中，我们怎么去做好这个前端开发模式，来保证前端在开发过程上不会因为太依赖与后端而降低开发效率。有很多项目都是采用了RESTfull 架构：后端提供API，前端调用后端接口，然后ajax一个又一个的接口。

开始吃螃蟹啦
　　在了解传统的创建开发模式后，这边给大家介绍一下我所认识的前端开发模式。在某些业务场景里，我们需要用到线上的数据，而非我们本地mock。又或者有时候我们线上代码是打包混淆过的，我们需要去跟踪一个问题，往往直接去线上调试也是一件比较麻烦的事情，当然还有很多没列举出来的情况。所以针对以上几种情景，我大致分为以下几种方案：

• 使用apache server的代理工具
  
• 使用Findler或者 Charles 等代理工具进行本地文件代理
  
• 使用RAP工具
  
• 使用 Nginx 的反向代理
  

　　以上几种均是我在开发中用到过的开发模式，下面我给大家稍微讲解一下怎么去实现各个开发模式，然后也会像大家简述一下优缺点。
　　
本次案例信息如下：

• 域名：www.damingge.com
  
• 域名指向IP：151.101.100.133
  
• 本地项目地址：/www/damingge
  
• 请求API地址格式：/api/xxxx/xxxx
  

使用 apache server 代理配置

准备

• apache server 监听80端口
  
• apache server 的DOCUMENT_ROOT地址配置为/www
  

原理
　　首先拿到线上登录的session，保证用户操作合法。然后将域名映射到本地，通过域名访问本地项目。将所有请求API前面都加上一个新的前缀，然后将apache server 对新前缀的所有API请求进行拦截请求并且代理转发。

实施方案

• 解析新域名api.damingge.com 到 151.101.100.133，保证该域名能够正常访问到后端的服务（这个时候两个域名访问到的后端服务是一毛一样的，没有任何差别，只不过是多个域名指向了同一个地址）。
  
• 找到apache 的安装目录，找到文件：extra/http-proxy.conf
  
• 添加一条ProxyPass记录：ProxyPass /mock_ajax/ http://api.damingge.com/。（重启后生效）该步操作就是为了让监听80端口的apache拦截所有/mock_ajax/的请求，请注意是监听本地服务的80端口。
  
• 登录线上地址拿到session后，将www.damingge.com的ip地址映射到127.0.0.1，这边就能保证访问该域名的时候是apache内的项目，而且可以让apache的代理配置拦截。
  
• 我们以index.html为例，我们新的访问路径为www.damingge.com/damingge/index.html。接下来就是在我们的项目内动手脚，我们在所有原有的API基础上添加一个/mock_ajax/前缀，新API的格式为：/mock_ajax/api/xxxx/xxxx。（此处建议将要代理的文件拷贝一份出来，重命名为index_dev.html，对所有的请求做统一的处理，而不是在线上文件进行修改，新的访问地址是www.damingge.com/damingge/index_dev.html）
  

优点

• 能够做到直接访问线上的数据
  
• 能够拿本地的代码调试线上，调试起来较为方便。
  

缺点

• 操作比较繁琐。
  
• apache，如果不使用反向代理的话只能配置80端口。
  
• 需要配置一个域名来专门提供后端服务。
  
• 需要多拷贝一份文件专门来处理本地开发模式下的API前缀。
  
• 每次需要在登录后重新修改host。
  

使用 Findler 或者 Charles 等代理工具

准备

• 下载好软件即可
  

原理
　　代理软件比较简单粗暴，原理就是拦截所有请求，匹配到是你想拦截的文件就去代理到本地文件。

实施方案
　　登录后打开代理工具，刷新一下页面，然后把你想要调试的文件map local，这样就可以直接进行线上调试了

优点

• 简单、方便、粗暴。不需要改host，也不需要配置二级域名。
  
• 可以随时代理任何想代理的文件。
  

缺点

• 可能会对所有的请求进行拦截
  
• 有时候请求会阻塞。
  

使用 RAP 工具

原理
　　RAP工具模拟数据接口，前端页面引入指定js脚本，会拦截请求，达到数据模拟的效果。

优点

• 与普通的mock数据相比，该方法更灵活，而且后期不需要去维护请求地址，只需要去除引入的js脚本即可
  
• 提高前后端联调的效率，也增加前端开发效率，不必要去为了数据担心，rap工具会自动按照生成规则生成模拟数据。
  

缺点

• 需要搭建一套rap服务器
  
• 在原有的开发基础上，还需要去维护rap接口，前期开发较繁琐，但是后期调试方便。
  

使用 Nginx 反向代理

准备

• 安装好nginx
  

原理
　　nginx监听指定端口的服务，并对请求进行代理转发。

实施方案

• 配置一个域名local.damingge.com，映射地址为127.0.0.1
  
• 在nginx的配置中添加配置，监听指定域名，并转发
  

nginx配置文件如下
worker_processes  1;　　

　　
events {
　　worker_connections  1024;
　　
}
　　

　　
http {
　　include       mime.types;
　　default_type  application/octet-stream;
　　sendfile        on;
　　keepalive_timeout  65;
　　

　　server {
　　listen       80;
　　server_name  localhost;
　　location / {
　　root   html;
　　index  index.html index.htm;
　　}
　　

　　error_page   500 502 503 504  /50x.html;
　　location = /50x.html {
　　root   html;
　　}
　　}
　　

　　#监听代理指定文件或目录
　　server {
　　listen          80;
　　server_name     local.damingge.com;
　　charset         utf-8;
　　index           /index.xhtml;
　　location /static {
　　#proxy_pass $scheme://$host$request_uri;
　　#proxy_set_header Host $http_host;
　　root /www/damingge;
　　}
　　location / {
　　proxy_pass http://151.101.100.133/;
　　proxy_set_header Host www.damingge.com;
　　}
　　}
　　include servers/*;
　　
}
　　我们将所有/static/xxxx/xxx下的请求都进行了拦截，也就是说我们请求到的资源文件都是本地工程项目里的。然后将其他请求代理到远程服务器上去，并且设置请求host为www.damingge.com，这样子处理的话可以防止跨域问题。

优点

• 我们可以配置指定的代理拦截规则，可以做到数据与代码分离，代码拿本地，数据拿线上。
  
• 可以解决线上线下切换的问题，只需要配置一次host即可，每次通过local.damingge.com访问即是做过拦截的本地开发模式，直接用过www.damingge.com访问即是不做任何拦截的线上环境。
  

缺点

• 暂无缺点
  

总结

• 在数据模拟上，我更建议大家用rap，而非本地mock一份json文件。
  
• 在线上调试以及前后端开发联调上，我更倾向于Nginx，而已做到灵活配置。