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

本文适用于先后端分离的项目，固然有兴趣的同窗也能够看一下，了解一下我口中的“孽缘”；

前言

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

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

传统开发模式所面临的两个问题就是：开发效率、数据。咱们在绘制页面的时候固然能够用假数据先绘制上去，也能够本地mock数据，可是有时候遇到一些复杂的业务场景的时候，这些并知足不了咱们的需求，就算知足了也会很繁琐很繁琐。整个开发模式其实先后端有工做交叉的状况出现，后端写接口的时候其实都已经测试过接口了，各类数据接口都存在了，前端再去mock有时候就是一种资源浪费。固然我相信小伙伴们会在这里提出一个疑问：那若是后端没有写接口前我就要去写前端页面怎么办？没事，继续往下面看。

今天我想讲的是在一个先后端分离的项目开发过程当中，咱们怎么去作好这个前端开发模式，来保证前端在开发过程上不会由于太依赖与后端而下降开发效率。有不少项目都是采用了RESTfull 架构：后端提供API，前端调用后端接口，而后ajax一个又一个的接口。

开始吃螃蟹啦

在了解传统的建立开发模式后，这边给你们介绍一下我所认识的前端开发模式。在某些业务场景里，咱们须要用到线上的数据，而非咱们本地mock。又或者有时候咱们线上代码是打包混淆过的，咱们须要去跟踪一个问题，每每直接去线上调试也是一件比较麻烦的事情，固然还有不少没列举出来的状况。因此针对以上几种情景，我大体分为如下几种方案：

1. 使用apache server的代理工具
2. 使用Findler或者 Charles 等代理工具进行本地文件代理
3. 使用RAP工具
4. 使用 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请求进行拦截请求而且代理转发。

实施方案

1. 解析新域名api.damingge.com 到 151.101.100.133，保证该域名可以正常访问到后端的服务（这个时候两个域名访问到的后端服务是一毛同样的，没有任何差异，只不过是多个域名指向了同一个地址）。
2. 找到apache 的安装目录，找到文件：extra/http-proxy.conf
3. 添加一条ProxyPass记录：ProxyPass /mock_ajax/ http://api.damingge.com/。（重启后生效）该步操做就是为了让监听80端口的apache拦截全部/mock_ajax/的请求，请注意是监听本地服务的80端口。
4. 登陆线上地址拿到session后，将www.damingge.com的ip地址映射到127.0.0.1，这边就能保证访问该域名的时候是apache内的项目，并且可让apache的代理配置拦截。
5. 咱们以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监听指定端口的服务，并对请求进行代理转发。

实施方案

1. 配置一个域名local.damingge.com，映射地址为127.0.0.1
2. 在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，而已作到灵活配置。