What is ZanProxy

In short, ZanProxy is a Node.js-based proxy server. It focuses on helping front-end development improve development efficiency.

Why do we need a proxy tool

In front-end development, we often encounter the following scenarios:

  1. For front-end developers, we need a tool that allows us to debug QA environments, pre-release environments, and even online pages directly with native front-end code.

  2. We need to quickly switch the environment during development, modify the system host will have the browser DNS cache, often need to manually clear. So we need a tool that lets us cut host in seconds without waiting.

  3. When the front and back ends are developed in parallel, mocks are often required for the data of the interface under development. Using nginx reverse proxies to mock platforms is cumbersome, cumbersome to configure, and extremely unfriendly to novices. So we need a tool that can easily mock the data of the interface.

What we did before ZanProxy

To solve these problems, we fumbled and made some tools, but they were all unsatisfactory in one way or another.

We made a project-level mock tool called Doraemon. The tool implements interface mock functionality by modifying the package that sends ajax requests and forwarding our requests to one of our mock data platforms.

Then we made a tool called zRed. ZRed is a Chrome plugin that automatically monitors all requests in Chrome and forwards online front-end CSS and JS code requests to local requests according to preset matching rules.

But there are obvious problems with all these schemes

First, Doraemon would hack into our project code and rely heavily on packages that send Ajax requests, making it difficult for tools to expand and upgrade. Moreover, this tool only has mock function, so many of the above problems can not be solved.

Because zRed is a Chrome plugin, it can’t be used on other platforms, such as mobile, making real debugging an issue.

The final plan

The final solution was to use a proxy server, ZanProxy, to help us solve the environmental problems. Compared to previous solutions, ZanProxy has more functionality and can be used on both PC and mobile, providing developers with more assistance in solving environmental problems.

What can ZanProxy do

Request proxy and forward

ZanProxy supports HTTP and HTTPS requests and forwards the requests according to user-defined rules. You can configure request forwarding rules on the interface to forward the requests that meet certain characteristics to the required address, which can be a local file path or URL. Our common usage is to forward the static resources such as JS, CSS and other files requested by the browser to the local, and realize the debugging of the online page with local code.

Team rule synchronization

ZanProxy supports remote rules to reduce communication costs by allowing team members to share the same forwarding rules. ZanProxy synchronizes the latest remote rules at startup and all changes are shared between users.

Painless Host switching

ZanProxy supports user – defined Host resolution, which is convenient for users to switch the environment by directly replacing the domain name with the specified IP address during forwarding. The modification of Hosts is not cached. ZanProxy does not modify the Hosts file of the system. Therefore, after ZanProxy is disabled, DNS resolution is restored without any side effects.

Customize response data

ZanProxy supports user-defined request response data, which means that users can leverage ZanProxy Mock interface data without waiting for the interface to be developed.

Request to monitor

ZanProxy allows users to monitor all proxied requests and see the request data and response data for each request. Users can set the proxy of the mobile phone as ZanProxy to monitor the requests of the mobile phone through ZanProxy, which facilitates the debugging of the real phone on the mobile terminal.

Custom plug-in

With the increase of business complexity, simple request forwarding can no longer meet the needs of the business side. Faced with the increasing demand, we found that ZanProxy needs a mechanism to allow users to expand ZanProxy proxy behavior, so we added the function of supporting custom plug-ins for ZanProxy. This makes ZanProxy very scalable. ZanProxy allows users to develop custom plug-ins to extend functions to meet the needs of users in various scenarios, such as adding access-Control-Allow-Origin headers to all responses to easily solve cross-domain problems. Custom plug-in writing guide: Click here.

Write at the end

Although ZanProxy has been used on a large scale in Youzan, there are certainly many deficiencies and improvements. I hope you can give more valuable suggestions.

A link to the

Homepage: youzan. Making. IO/zan – proxy /

Making: github.com/youzan/zan-…

Youzan.github. IO /zan-proxy/b…

This article was originally published at tech.youzan.com/zan-proxy/