前端开发模式与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.com151.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,而已做到灵活配置。
posted @ 2017-03-05 14:40  DaMingGe  阅读(3333)  评论(0编辑  收藏  举报