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 在有贊內部已經大規模使用了，但確定存在許多的不足和能夠改進的地方，但願你們能多提寶貴的意見。

相關連接

主頁：https://youzan.github.io/zan-proxy/

Github: https://github.com/youzan/zan-proxy

使用文檔：https://youzan.github.io/zan-proxy/book/