在线网页署理 欣赏 器在线（网站署理 欣赏 器）

　　1媒介

　　作为前端开辟 工程师 ，我们会常常 碰到 一些环境 题目 。比如 本地 调试线上页面、跨域 、DNS缓存、网络哀求 抓包、HTTPS哀求 开辟 调试以及证书等等 。为了办理 这些题目 ，我们必要 利用 hosts 、Nginx、Fiddler/Charles以及各种各样的hosts切换管理工具等。在利用 这写工具的同时，还存在一些题目 必要 办理 。

　　我们每天 都要耗费 很多 时间在环境 的设置 、切换题目 上 ，因此必要 一个更好的方案来同一 办理 这些题目 。

　　hiproxy就是为了办理 这些题目 而生。这篇文章的内容重要 分为三个方面：hiproxy诞生的配景 （现有开辟 模式反思） 、hiproxy先容 以及现壮和将来 规划。

　　2现有开辟 模式反思

　　我们每天 都谋面 临多套环境 ，比如 线上环境 、Beta环境 、Dev环境 以及本地 开辟 环境 等，这里同一 分为两类：线上环境 和测试环境 。

　　体系 hosts

　　正常环境 下 ，我们哀求 资源的时间 ，走的是线上环境 。而我们在开辟 调试的时间 ，是不盼望 如许 的，我们必要 在不修改哀求 地点 的环境 下 ，将哀求 定向到测试环境 。那么，我们应该怎么做呢？

　　各人 都应该能想到利用 hosts就能办理 这个题目 。hosts利用 简单 ，而且不必要 安装任何第三的工具 。

　　Nginx

　　随着时间的推移 ，公司的项目越来越多，我们必要 维护的项目也越来越多。假设我们为特定域名设置 hosts，指向本地 开辟 环境 ，这个域名下全部 哀求 都到了本地 。要使页面各种资源能访问，我们就必要 在本地 搭建一套完备 的运行环境 。

　　但是，差别 的项目大概 必要 利用 差别 的端标语 ，加上复杂的后端工程以及数据库，我们不盼望 也不太大概 在本地 搭建起一套完备 的环境 来运行各种依靠 的项目。我们只盼望 把我们关心的这些项目（大部分 都是前端项目）在本地 运行起来以便开辟 调试，其他的项目（大部分 是后端项目）则利用 线上环境 。

　　这时间 ，我们又该怎么做呢？

　　聪明 的前端开辟 工程师又想到了利用 Nginx来办理 这个题目 。Nginx是一个良好 、高效的HTTP和反向署理 服务器，可以更正确 地对哀求 做署理 。

　　可以说Nginx比力 美满 的办理 了我们碰到 的题目 。

　　但是，我们在利用 Nginx的过程中，也存在一些不美满 的地方 ，重要 分为两个方面：必要 hosts共同 、每个人都必要 各安闲 本地 维护一套Nginx设置 ，相互 拷贝设置 文件 。

　　必要 hosts共同

　　前面提到过，正常环境 下 ，哀求 资源的时间 ，走的是线上环境 。固然 在本地 安装了Nginx，也设置 了各种个样的哀求 署理 。默认环境 下 ，欣赏 器是不会哀求 到本地 Nginx服务的，要哀求 到本地 Nginx，必要 修改体系 hosts 。

　　由此可见 ，hosts黑白 常非常的紧张 ，也正是由于 hosts的紧张 性，产生了各种各样的hosts切换、管理工具。

　　相互 拷贝设置 文件

　　别的 ，各人 如今 的风俗 是，各安闲 本地 维护一套Nginx设置 。最初，由一个工程师在本地 设置 好Nginx，然后其他工程师从他这里复制一份设置 ，稍作修改在本地 运行。假如 有新成员参加 对应的项目，也是从其他人那边 复制一份 。

　　如许 的弊端 在于，每个人复制设置 文件、服从 比力 低。而且一旦环境 变革 ，此中 一个人修改之后，其他人的设置 并不会随之被修改，更新不及时 。

　　其他题目

　　在利用 hosts／Nginx以及hosts切换管理工具的同时 ，还会存在其他题目 ，比如 DNS缓存 、HTTPS哀求 调试以及证书天生 和信托 题目 等 。

　　既然我们利用 了这么多工具尚有 这么多题目 ，我们在想：到底有没有一种更好的方法来办理 这些题目 ？

　　要是有一个工具 ，能一次性办理 这些题目 ，那该多好啊！

　　于是，hiproxy就如许 诞生了。

　　3hiproxy先容

　　hiproxy是一个基于Node.js开辟 的轻量、可扩展的署理 工具。接下来重要 从四个方面去先容 它 。

　　特点

　　hiproxy的特点 ，重要 总结为四点：

　　轻量可扩展：hiproxy依靠 的第三方库比力 少，安装快速；支持扩展下令 ／指令／页面。详情可以查察 插件开辟 指南。

　　复用现有开辟 设置 风俗 ：hiproxy采取 了各人 从前 认识 的hosts和Nginx风格的设置 ，最洪流 平 地复用了各人 之前的开辟 、设置 风俗 。学习本钱 低，利用 起来更加轻松！

　　HTTPS证书主动 天生 与管理：hiproxy可以扮演 CA脚色 ，天生 根证书。而且 能主动 根据每次哀求 的域名信息，天生 相对应的域名证书。

　　跟欣赏 器高度融合：hiproxy在启动服务的时间 ，可以知心 地打开一个新的欣赏 器窗口并主动 设置 好署理 ，省去了用户本身 设置署理 的步调 。

　　根本 利用

　　这里简单 先容 一下hiproxy的利用 步调 ，假如 必要 查察 具体 的利用 文档，请访问hiproxy的文档网站：https://hiproxy.org/

　　第一步：启动hiproxy服务：hiproxy是一个下令 行工具 ，我们可以进入到工作空间（workspace），然后启动一个署理 服务。

　　第二步：查找设置 文件：启动之后，hiproxy会主动 查找工作空间中全部 项目下的设置 文件 ，做语法分析 并转换成hiproxy内部可利用 的署理 规则树。

　　第三步：打开欣赏 器窗口：然后hiproxy会打开一个欣赏 器窗口，并主动 为我们设置 好署理 。在Chrome中，可以访问 来查察 已见效 的署理 。这个窗口是 独立于其他欣赏 器窗口的 ，这设置 的署理 不影响其他欣赏 器窗口。

　　第四步：开辟 调试：接下来，我们就可以利用 这个欣赏 器窗口了。这个欣赏 器窗口中的全部 哀求 只要设置 了对应的署理 规则，hiproxy都会亲身 行止 理 惩罚 。

　　设置 文件

　　hiproxy保举 把设置 文件存放到项目中并提交到Git，与团队中其他的成员共享设置 。假如 是简单 的设置 ，可以采取 hosts，而比力 复杂的设置 ，可以利用 rewrite。

　　简单 设置 -hosts

　　hosts可以看作一个加强 版的体系 hosts ，除了体系 hosts语法之外，hiproxy也扩展了hosts语法，支持端标语 。

　　示例：

　　复杂设置 -rewrite

　　对于复杂需求的设置 ，hiproxy采取 rewrite设置 文件，参考了Nginx设置 语法，大部分 语法跟Nginx一样。重要 特点：

语法跟Nginx设置 语法雷同 ；

支持正则表达式／分组；

支持哀求 、相应 内容修改；

支持内置变量；

　　示例：

　　跟之前的对比

　　DNS缓存题目 ：之前修改体系 hosts后 ，由于DNS缓存的存在，必要 等待 缓存逾期 大概 重启欣赏 器。利用 了hiporxy，更改设置 文件之后 ，hiproxy会主动 更新，不必要 重启，革新 欣赏 器即可见效 ！

　　设置 文件团队共享：之前每个人本地 维护本身 的hosts／Nginx设置 文件，维护本钱 高 ，更新不及时 。而hiporxy保举 把设置 文件放到项目中并提交git，团队共享。缩减维护本钱 ，进步 生产力。

　　https证书题目 ：之前用复杂的OpenSSL下令 天生 自署名 证书或找他人新增域名 ，证书不被信托 。而hiporxy能主动 天生 证书，不消 本身 新增域名。唯一要做的就是导入一次根证书。具体 的设置 请查察 SSL/TLS证书设置 。

　　同一 办理 痛点：之前每个人都要维护hosts、利用 Nginx和一些其他的辅助工具 。利用 了hiproxy，可以不再用利用 各种工具维护体系 hosts ，不再必要 用nginx。

　　4hiproxy近况 和将来 规划

　　近况

　　开源：hiproxy如今 已经开源，全部 代码和文档都在github：https://github.com/hiproxy/hiproxy。欢迎 各人 star、为hiproxy贡献代码大概 给出发起 。

　　测试：从代码层面来讲，覆盖率已经到达 了90%以上 ，根本 利用 的case已经全部覆盖。

　　文档：如今 我们为hiproxy编写了重要 的文档：https://hiproxy.org/，但是如今 文档中大概 存在一些细节方面的缺失，我们会不绝 美满 。

　　维护：如今 重要 是我(@zdying) 、狼叔(@i5ting)、zhouhailong、huaziHear和其他几个贡献者在维护 ，我们会长期 维护，欢迎 各人 利用 hiproxy 。

　　插件：如今 我们为hiproxy开辟 了一个Dashboard插件，可在线管理hiproxy的设置 文件，详情可以查察 hiproxy-plugin-dashboard;

　　将来 规划

　　测试／文档：hiproxy会不绝 美满 测试 ，争代替 码覆盖率到达 100%，添加更多的Case。编写更加美满 过细 的文档，方便各人 查阅。

　　更多实用插件：hiproxy将来 会有更多实用的插件 、指令和CLI下令 ，办理 更多实际 的题目 。比如 可编程mock、网络哀求 抓包等。

　　性能：hiproxy会不绝 改进代码、优化数据布局 和算法，进一步提拔 性能。

　　5末了

　　hiproxy正处于发展 时期，欢迎 各人 关注并利用 hiproxy并提着名 贵 的发起 ，让hiproxy更得当 各人 、更加强 大 。同时也盼望 各人 能为hiproxy贡献一些源代码大概 文档的编写 、翻译。

　　hiproxy地点 ：https://github.com/hiproxy

　　hiproxy文档：https://hiproxy.org/