ZanProxy —— 本地代码调试线上页面，环境不再是问题

1、ZanProxy 是什么

一言以蔽之，ZanProxy 是一个基于 Node.js 的代理服务器。它专一于帮助前端开发提升开发效率。

2、咱们为何须要一个代理工具

在前端开发中，咱们经常会碰到如下几个场景：

1. 对于前端开发者来讲，咱们须要一个工具能让咱们直接用本地的前端代码调试QA环境、预发环境、甚至线上的页面。

2. 咱们须要在开发的时候须要快速切换环境，修改系统的 host 会有浏览器的 DNS 缓存，经常须要手动清除。因此咱们须要一个工具让咱们秒切host，不用等待 。

3. 先后端并行开发的时候，开发中接口的数据一般须要 mock。经过nginx反向代理到mock平台步骤繁琐，配置麻烦，对新手及其不友好。 因此咱们须要一个工具能轻松 mock 接口的数据。

在 ZanProxy 以前，咱们作过的努力

为解决上面这些问题，咱们进行了一些摸索而且作出了一些工具，可是这些工具都这样或那样不尽人意的地方。

咱们曾将作了一个项目级别的mock工具叫Doraemon。 这个工具经过修改发送ajax请求的包，会把咱们的请求转发到咱们的一个 mock 数据平台，从而实现接口 mock 的功能。

后来咱们又作了一个工具叫zRed。zRed是一个 Chrome 浏览器的插件，会自动监控 chrome 浏览器内的全部请求，根据预先设置的匹配规则，将线上前端 css,js 代码请求转发成相对应的本地请求。

但这些方案都存在明显的问题

首先，Doraemon会入侵咱们的项目代码，强依赖于发送ajax请求的包，不利于工具的扩展和升级。并且这个工具只有 mock 功能，上面不少问题都不能得以解决。

zRed因为是一个chrome浏览器插件，不能在其余平台上使用，好比说在移动端上使用，让真机调试成为了一个问题。

最后肯定的方案

最终决定的方案是使用一个代理服务器，也就是 ZanProxy， 来帮助咱们解决环境问题。和之前的方案相比，ZanProxy 拥有更丰富的功能，能够同时在pc端和移动端使用，为开发者解决环境问题提供更了更多的助力。

3、ZanProxy 能作什么

请求代理与转发

ZanProxy 支持代理 http 和 https 的请求，并会根据用户配置的规则进行请求的转发。用户能够在界面上配置本身的请求转发规则，将符合某种特征的请求转发到须要的地址，能够是本地的一个文件路径或者是一个 URL 。咱们常见的用法是将浏览器请求的静态资源如 js，css 等文件转发到本地，实现用本地代码对线上页面的调试。

团队规则同步

ZanProxy 支持远程规则，目的是让团队成员间共用同一份转发规则，下降沟通成本。ZanProxy 会在启动的时候同步最新的远程规则，全部的变动都能在使用者之间共享。

无痛 Host 切换

ZanProxy 支持用户自定义 Host 解析，方便用户进行环境的切换，这是经过在转发时，把域名直接替换成指定 ip 实现的，Hosts 的修改没有缓存。ZanProxy 不会修改系统的 Hosts 文件，因此用户在关闭 ZanProxy 后会恢复正常的 DNS 解析，不须要担忧会有什么反作用。

自定义响应数据

ZanProxy 支持用户自定义请求的响应数据，意味着用户能够利用 ZanProxy mock 接口数据，不用再等待接口开发完成。

请求监控

ZanProxy 可让用户监控全部被代理的请求，能看到每个请求的请求数据和响应数据。用户能够将手机的代理设置成 ZanProxy ，经过 ZanProxy 监控手机的请求，为移动端真机调试带来便利。

自定义插件

随着业务复杂度的增长，单纯的请求转发已经不能知足业务方的需求，面对不断增加的需求咱们发现ZanProxy须要有一个机制，让用户扩展 ZanProxy 的代理行为，因而咱们为 ZanProxy 增长了支持自定义插件的功能，这样 ZanProxy 就有了很强的扩展性。ZanProxy 支持用户开发自定义插件进行功能的扩展，知足用户在各类场景下的需求，好比给全部的响应增长 Access-Control-Allow-Origin 的头，轻松解决跨域问题。自定义插件编写指南：点击此处。

4、写在最后

虽然 ZanProxy 在有赞内部已经大规模使用了，但确定存在许多的不足和能够改进的地方，但愿你们能多提宝贵的意见。

相关连接

主页：youzan.github.io/zan-proxy/

Github: github.com/youzan/zan-…

使用文档：youzan.github.io/zan-proxy/b…

本文首发于tech.youzan.com/zan-proxy/