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

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

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

一、ZanProxy 是什么

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

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

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

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

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

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

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

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

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

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

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

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

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

最后確定的方案

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

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

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

團隊規(guī)則同步

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

無痛 Host 切換

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

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

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

請求監(jiān)控

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

自定義插件

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

四、寫在最后

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

相關鏈接

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

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

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

GPU云服務器云服務器 jsp頁面代碼調(diào)試消息隊列線上問題 linux線上環(huán)境頁面調(diào)試

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/95659.html

iframe onload事件被block的巨坑

摘要：于是關鍵詞求助百度，給出的答案要不說是的問題，要不是說客戶端的問題，都嘗試了一下，發(fā)現(xiàn)一點用處都沒有。但是仍然有點奇怪，也是使用，后來回憶，在換百度這個鏈接之前殺了一次進程，應該是這個因素導致的。寫在前面最近接手了一個古舊的項目，跟客戶端、服務器端一起調(diào)一個支付相關的app內(nèi)嵌H5頁面，這個頁面有兩部分組成，主頁面A加上一個最終支付頁面B，B頁面是通過iframe嵌入到A頁面中的，...

darryrzhong 2019-08-26 10:56 評論0 收藏0
前端開發(fā)如何做好本地接口模擬

摘要：前端開發(fā)如何做好本地接口模擬之前有寫過一篇本地化接口模擬前后端并行開發(fā)，講到過本地接口模擬，但不太細致。有哪些途徑本地接口模擬一般分為工具層面和代碼層面。因為本地接口模擬功能主要是針對的返回值為格式的異步請求，所以這種方式主要用文件。前端開發(fā)如何做好本地接口模擬之前有寫過一篇本地化接口模擬、前后端并行開發(fā)，講到過本地接口模擬，但不太細致。這次細細的說說本地接口模擬。 1. 有什么...

ACb0y 2019-08-23 14:31 評論0 收藏0
手摸手，帶你用vue擼后臺系列一(基礎篇)

摘要：詳細具體的使用可以見文章手摸手，帶你優(yōu)雅的使用。為了加速線上鏡像構(gòu)建的速度，我們利用源進行加速并且將一些常見的依賴打入了基礎鏡像，避免每次都需要重新下載。完整項目地址：vue-element-admin系類文章二：手摸手，帶你用vue擼后臺系列二（登錄權限篇）系類文章三：手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺系列四(vueAdmin 一...

xiaotianyi 2019-08-22 11:03 評論0 收藏0
前端如何高效的與后端協(xié)作開發(fā)

摘要：移動端應用一般都運行在微信瀏覽器中中手機瀏覽器中。因為微信瀏覽器是定制的瀏覽器，一般的遠程調(diào)試方式都不可用，需要配合特定的工具，如微信開發(fā)者工具。前端如何高效的與后端協(xié)作開發(fā) 1. 前后端分離前端與后端的分離，能使前端的開發(fā)脫離后端的開發(fā)模式，擁有更大的自由度，以此便可做前端工程化、組件化、單頁面應用等。可以參考：前后端分離、web與static服務器分離 2. 盡量避免后端模板...

rozbo 2019-08-29 17:08 評論0 收藏0
前端如何高效的與后端協(xié)作開發(fā)

摘要：移動端應用一般都運行在微信瀏覽器中中手機瀏覽器中。因為微信瀏覽器是定制的瀏覽器，一般的遠程調(diào)試方式都不可用，需要配合特定的工具，如微信開發(fā)者工具。前端如何高效的與后端協(xié)作開發(fā) 1. 前后端分離前端與后端的分離，能使前端的開發(fā)脫離后端的開發(fā)模式，擁有更大的自由度，以此便可做前端工程化、組件化、單頁面應用等。可以參考：前后端分離、web與static服務器分離 2. 盡量避免后端模板...

learning 2019-08-23 12:37 評論0 收藏0