GMTC北京站9折购票倒计时,部分日程已上线,戳此查看 了解详情
写点什么

ZanProxy —— 本地代码调试线上页面,环境再也不是问题

  • 2020 年 3 月 08 日
  • 本文字数:1657 字

    阅读完需:约 5 分钟

ZanProxy —— 本地代码调试线上页面,环境再也不是问题

一、ZanProxy 是什么

一言以蔽之,ZanProxy 是一个基于 Node.js 的代理服务器。它 专注于帮助前端开发提高开发效率



二、我们为什么需要一个代理工具

在前端开发中,我们常常会碰到以下几个场景:


  1. 对于前端开发者来说,我们需要一个工具能让我们直接用本地的前端代码调试 QA 环境、预发环境、甚至线上的页面。

  2. 我们需要在开发的时候需要快速切换环境,修改系统的 host 会有浏览器的 DNS 缓存,常常需要手动清除。所以我们需要一个工具让我们秒切 host,不用等待 。

  3. 前后端并行开发的时候,开发中接口的数据通常需要 mock。通过 nginx 反向代理到 mock 平台步骤繁琐,配置麻烦,对新手及其不友好。 所以我们需要一个工具能轻松 mock 接口的数据。


在 ZanProxy 之前,我们做过的努力

为解决上面这些问题,我们进行了一些摸索并且做出了一些工具,但是这些工具都这样或那样不尽人意的地方。


我们曾将做了一个项目级别的 mock 工具叫 Doraemon。 这个工具通过修改发送 ajax 请求的包,会把我们的请求转发到我们的一个 mock 数据平台,从而实现接口 mock 的功能。


后来我们又做了一个工具叫 zRedzRed是一个 Chrome 浏览器的插件,会自动监控 chrome 浏览器内的所有请求,根据预先设置的匹配规则,将线上前端 css,js 代码请求转发成相对应的本地请求。


但这些方案都存在明显的问题

首先, Doraemon会入侵我们的项目代码,强依赖于发送 ajax 请求的包,不利于工具的扩展和升级。而且这个工具只有 mock 功能,上面很多问题都不能得以解决。


zRed由于是一个 chrome浏览器插件,不能在其他平台上使用,比如说在移动端上使用,让真机调试成为了一个问题。


最后确定的方案

最终决定的方案是使用一个代理服务器,也就是 ZanProxy, 来帮助我们解决环境问题。和以前的方案相比,ZanProxy 拥有更丰富的功能,可以同时在 pc 端和移动端使用,为开发者解决环境问题提供更了更多的助力。



三、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 的头,轻松解决跨域问题。自定义插件编写指南:https://youzan.github.io/zan-proxy/book/plugin/code.html



四、写在最后

虽然 ZanProxy 在有赞内部已经大规模使用了,但肯定存在许多的不足和可以改进的地方,希望大家能多提宝贵的意见。


相关链接

主页:https://youzan.github.io/zan-proxy/


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


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


2020 年 3 月 08 日 19:24564

评论

发布
暂无评论
发现更多内容

SpringBoot整合Shiro(完整版),java学习网站

Java 程序员 后端

SpringCloudRPC调用核心原理:RxJava响应式编程框架,聚合操作符

Java 程序员 后端

springcloud(三)网关zuul,2021Java进阶学习资料

Java 程序员 后端

springboot多数据源配合docker部署mysql主从实现读写分离

Java 程序员 后端

springboot整合thymeleaf及常用标签的使用方法,美的java面试流程

Java 程序员 后端

SpringBoot:Shiro-整合-Redis,也不用担心用户投诉啦,java技术经理面试题

Java 程序员 后端

springcloud 高可用的服务注册中心及更高可用,java面试设计题

Java 程序员 后端

springboot入门教程和mysql数据库,java框架面试基础

Java 程序员 后端

最佳实践|放弃 Ceph,Salesforce 使用 Apache BookKeeper 在云中实现最强存储

Apache Pulsar

开源 云原生 存储系统 Apache Pulsar 消息系统 Apache BookKeeper

SpringCloudRPC远程调用核心原理:Feign远程调用的执行流程

Java 程序员 后端

使用Java+SAP云平台+SAP Cloud Connector调用ABAP On-Premise系统里的函数

Jerry Wang

云平台 SAP abap 11月日更

SpringDataJPA的Audit功能,审计数据库的变更,springmvc源码分析pdf百度云

Java 程序员 后端

SpringBoot实战教程(3,mysql集群和主从原理

Java 程序员 后端

六问六答理解ForkJoin原理

华为云开发者社区

Java 线程 线程池 forkjoin 归并计算

Springboot整合ActiveMQ(Queue和Topic两种模式),Java开发者跳槽指

Java 程序员 后端

Springboot整合Mybatis增删查改、连接MYSQL数据库及配置druid连接池

Java 程序员 后端

SpringBoot整合Shiro实现权限管理,rabbitmq原理图

Java 程序员 后端

SpringBoot整合Shiro(完整版)(1),java企业级应用教程视频

Java 程序员 后端

springBoot集成Mybatis,Java资料下载

Java 程序员 后端

SpringBoot系列:Spring Boot集成redis,mongodb原理书籍推荐

Java 程序员 后端

Vue进阶(幺柒叁):表单元素日期校验

No Silver Bullet

Vue 表单校验 11月日更

CSS页面设计稿构思与实现(二)

Augus

CSS 11月日更

谈谈对Dapr的一些感想

LLLLimbo

架构 分布式 微服务 云原生 dapr

Springboot快速整合JPA实现增删查改(1),java教程视频下载

Java 程序员 后端

SpringBoot整合MybatisPlus实战动态SQL,java编程入门经典

Java 程序员 后端

【文末送票福利】龙智携手Atlassian,与您相约GOPS全球运维大会

龙智—DevSecOps解决方案

DevOps 运维

腾讯云原生开源生态专场在武汉召开,洞察开源云原生技术发展趋势和商业化路径

科技热闻

Springboot快速整合JPA实现增删查改,linux系统架构和应用技巧

Java 程序员 后端

OpenHarmony LiteOS C-SKY指令集移植指南

华为云开发者社区

LiteOS 指令集 OpenHarmony C-SKY 移植

SpringBoot整合Thymeleaf模板,java技术核心卷二

Java 程序员 后端

SpringDataJPA之快速入门,arm架构v8和V9区别

Java 程序员 后端

ZanProxy —— 本地代码调试线上页面,环境再也不是问题_文化 & 方法_maiweiqi_InfoQ精选文章