ZanProxy —— 本地代碼調(diào)試線上頁面，環(huán)境再也不是問題

Crazy_Coder 發(fā)布于2019-08-22 18:15 / 2578人閱讀

摘要：最后確定的方案最終決定的方案是使用一個代理服務(wù)器，也就是，來幫助我們解決環(huán)境問題。團(tuán)隊(duì)規(guī)則同步支持遠(yuǎn)程規(guī)則，目的是讓團(tuán)隊(duì)成員間共用同一份轉(zhuǎn)發(fā)規(guī)則，降低溝通成本。

一、ZanProxy 是什么

一言以蔽之，ZanProxy 是一個基于 Node.js 的代理服務(wù)器。它專注于幫助前端開發(fā)提高開發(fā)效率。

二、我們?yōu)槭裁葱枰粋€代理工具

在前端開發(fā)中，我們常常會碰到以下幾個場景：

對于前端開發(fā)者來說，我們需要一個工具能讓我們直接用本地的前端代碼調(diào)試QA環(huán)境、預(yù)發(fā)環(huán)境、甚至線上的頁面。

我們需要在開發(fā)的時候需要快速切換環(huán)境，修改系統(tǒng)的 host 會有瀏覽器的 DNS 緩存，常常需要手動清除。所以我們需要一個工具讓我們秒切host，不用等待。

前后端并行開發(fā)的時候，開發(fā)中接口的數(shù)據(jù)通常需要 mock。通過nginx反向代理到mock平臺步驟繁瑣，配置麻煩，對新手及其不友好。所以我們需要一個工具能輕松 mock 接口的數(shù)據(jù)。

在 ZanProxy 之前，我們做過的努力

為解決上面這些問題，我們進(jìn)行了一些摸索并且做出了一些工具，但是這些工具都這樣或那樣不盡人意的地方。

我們曾將做了一個項(xiàng)目級別的mock工具叫Doraemon。這個工具通過修改發(fā)送ajax請求的包，會把我們的請求轉(zhuǎn)發(fā)到我們的一個 mock 數(shù)據(jù)平臺，從而實(shí)現(xiàn)接口 mock 的功能。

后來我們又做了一個工具叫zRed。zRed是一個 Chrome 瀏覽器的插件，會自動監(jiān)控 chrome 瀏覽器內(nèi)的所有請求，根據(jù)預(yù)先設(shè)置的匹配規(guī)則，將線上前端 css,js 代碼請求轉(zhuǎn)發(fā)成相對應(yīng)的本地請求。

但這些方案都存在明顯的問題

首先，Doraemon會入侵我們的項(xiàng)目代碼，強(qiáng)依賴于發(fā)送ajax請求的包，不利于工具的擴(kuò)展和升級。而且這個工具只有 mock 功能，上面很多問題都不能得以解決。

zRed由于是一個chrome瀏覽器插件，不能在其他平臺上使用，比如說在移動端上使用，讓真機(jī)調(diào)試成為了一個問題。

最后確定的方案

最終決定的方案是使用一個代理服務(wù)器，也就是 ZanProxy，來幫助我們解決環(huán)境問題。和以前的方案相比，ZanProxy 擁有更豐富的功能，可以同時在pc端和移動端使用，為開發(fā)者解決環(huán)境問題提供更了更多的助力。

三、ZanProxy 能做什么 請求代理與轉(zhuǎn)發(fā)

ZanProxy 支持代理 http 和 https 的請求，并會根據(jù)用戶配置的規(guī)則進(jìn)行請求的轉(zhuǎn)發(fā)。用戶可以在界面上配置自己的請求轉(zhuǎn)發(fā)規(guī)則，將符合某種特征的請求轉(zhuǎn)發(fā)到需要的地址，可以是本地的一個文件路徑或者是一個 URL 。我們常見的用法是將瀏覽器請求的靜態(tài)資源如 js，css 等文件轉(zhuǎn)發(fā)到本地，實(shí)現(xiàn)用本地代碼對線上頁面的調(diào)試。

團(tuán)隊(duì)規(guī)則同步

ZanProxy 支持遠(yuǎn)程規(guī)則，目的是讓團(tuán)隊(duì)成員間共用同一份轉(zhuǎn)發(fā)規(guī)則，降低溝通成本。ZanProxy 會在啟動的時候同步最新的遠(yuǎn)程規(guī)則，所有的變更都能在使用者之間共享。

無痛 Host 切換

ZanProxy 支持用戶自定義 Host 解析，方便用戶進(jìn)行環(huán)境的切換，這是通過在轉(zhuǎn)發(fā)時，把域名直接替換成指定 ip 實(shí)現(xiàn)的，Hosts 的修改沒有緩存。ZanProxy 不會修改系統(tǒng)的 Hosts 文件，所以用戶在關(guān)閉 ZanProxy 后會恢復(fù)正常的 DNS 解析，不需要擔(dān)心會有什么副作用。

自定義響應(yīng)數(shù)據(jù)

ZanProxy 支持用戶自定義請求的響應(yīng)數(shù)據(jù)，意味著用戶可以利用 ZanProxy mock 接口數(shù)據(jù)，不用再等待接口開發(fā)完成。

請求監(jiān)控

ZanProxy 可以讓用戶監(jiān)控所有被代理的請求，能看到每一個請求的請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)。用戶可以將手機(jī)的代理設(shè)置成 ZanProxy ，通過 ZanProxy 監(jiān)控手機(jī)的請求，為移動端真機(jī)調(diào)試帶來便利。

自定義插件

隨著業(yè)務(wù)復(fù)雜度的增加，單純的請求轉(zhuǎn)發(fā)已經(jīng)不能滿足業(yè)務(wù)方的需求，面對不斷增長的需求我們發(fā)現(xiàn)ZanProxy需要有一個機(jī)制，讓用戶擴(kuò)展 ZanProxy 的代理行為，于是我們?yōu)?ZanProxy 增加了支持自定義插件的功能，這樣 ZanProxy 就有了很強(qiáng)的擴(kuò)展性。ZanProxy 支持用戶開發(fā)自定義插件進(jìn)行功能的擴(kuò)展，滿足用戶在各種場景下的需求，比如給所有的響應(yīng)增加 Access-Control-Allow-Origin 的頭，輕松解決跨域問題。自定義插件編寫指南：點(diǎn)擊此處。

四、寫在最后

雖然 ZanProxy 在有贊內(nèi)部已經(jīng)大規(guī)模使用了，但肯定存在許多的不足和可以改進(jìn)的地方，希望大家能多提寶貴的意見。

相關(guān)鏈接

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

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

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