本文适用于前后端分离的项目，当然有兴趣的同学也可以看一下，了解一下我口中的“孽缘”；
前言
在吃螃蟹前咱们先了解一下几种传统的前端开发模式（以java web为例）：
- 绘制好的前端页面以及一些资源文件交给后端，让后端去维护（后端可能通过jsp去渲染）
- 前端维护前端代码，但是前端需要在本地运行后端程序（本地启一个Tomcat之类的）
传统开发模式所面临的两个问题就是：开发效率、数据。我们在绘制页面的时候当然可以用假数据先绘制上去，也可以本地mock数据，但是有时候遇到一些复杂的业务场景的时候，这些并满足不了我们的需求，就算满足了也会很繁琐很繁琐。整个开发模式其实前后端有工作交叉的情况出现，后端写接口的时候其实都已经测试过接口了，各种数据接口都存在了，前端再去mock有时候就是一种资源浪费。当然我相信小伙伴们会在这里提出一个疑问：那如果后端没有写接口前我就要去写前端页面怎么办？没事，继续往下面看。
今天我想讲的是在一个前后端分离的项目开发过程中，我们怎么去做好这个前端开发模式，来保证前端在开发过程上不会因为太依赖与后端而降低开发效率。有很多项目都是采用了RESTfull 架构：后端提供API，前端调用后端接口，然后ajax一个又一个的接口。
开始吃螃蟹啦
在了解传统的创建开发模式后，这边给大家介绍一下我所认识的前端开发模式。在某些业务场景里，我们需要用到线上的数据，而非我们本地mock。又或者有时候我们线上代码是打包混淆过的，我们需要去跟踪一个问题，往往直接去线上调试也是一件比较麻烦的事情，当然还有很多没列举出来的情况。所以针对以上几种情景，我大致分为以下几种方案：
以上几种均是我在开发中用到过的开发模式，下面我给大家稍微讲解一下怎么去实现各个开发模式，然后也会像大家简述一下优缺点。
本次案例信息如下：
- 域名：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，而已做到灵活配置。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：前端开发模式与Nginx之间的一段孽缘 - Python技术站
微信扫一扫 
支付宝扫一扫 
