成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Crazy_Coder / 2580人閱讀

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

一、ZanProxy 是什么

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

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

在前端開發(fā)中，我們常常會(huì)碰到以下幾個(gè)場(chǎng)景：

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

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

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

在 ZanProxy 之前，我們做過(guò)的努力

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

我們?cè)鴮⒆隽艘粋€(gè)項(xiàng)目級(jí)別的mock工具叫Doraemon。 這個(gè)工具通過(guò)修改發(fā)送ajax請(qǐng)求的包，會(huì)把我們的請(qǐng)求轉(zhuǎn)發(fā)到我們的一個(gè) mock 數(shù)據(jù)平臺(tái)，從而實(shí)現(xiàn)接口 mock 的功能。

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

但這些方案都存在明顯的問(wèn)題

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

zRed由于是一個(gè)chrome瀏覽器插件，不能在其他平臺(tái)上使用，比如說(shuō)在移動(dòng)端上使用，讓真機(jī)調(diào)試成為了一個(gè)問(wèn)題。

最后確定的方案

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

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

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

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

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

無(wú)痛 Host 切換

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

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

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

請(qǐng)求監(jiān)控

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

自定義插件

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

四、寫在最后

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

相關(guān)鏈接

主頁(yè)：https://youzan.github.io/zan-proxy/

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95659.html

相關(guān)文章

  • iframe onload事件被block的巨坑

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

    darryrzhong 評(píng)論0 收藏0

  • 前端開發(fā)如何做好本地接口模擬

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

    ACb0y 評(píng)論0 收藏0

  • 手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)

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

    xiaotianyi 評(píng)論0 收藏0

  • 前端如何高效的與后端協(xié)作開發(fā)

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

    rozbo 評(píng)論0 收藏0

  • 前端如何高效的與后端協(xié)作開發(fā)

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

    learning 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<