Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/liyangready/multiple-host

虚拟host解决方案，轻松实现两套host环境
https://github.com/liyangready/multiple-host

charles fiddle hosts proxy

Last synced: 21 days ago
JSON representation

虚拟host解决方案，轻松实现两套host环境

Awesome Lists containing this project

README 

        
新版本正在开发中，感谢大家支持！会提升稳定性和便捷性。



# Multiple-host

下载地址： [私人主机-win版](http://104.224.164.54/multiple-host/1.0.6/win/multiple-host.zip)

           [私人主机-mac版](http://104.224.164.54/multiple-host/1.0.6/mac/multiple-host.zip)

           [百度云](http://yun.baidu.com/s/1hrv34wc)



无论你是开发、QA还是产品，在目前的开发及测试中都离不开host。host为开发和测试带来了诸多便利，但也有很多烦恼：



+ 切换host总是不能立即生效，换一套host环境经常需要重启浏览器。

+ 经常在一套host环境下比如（betaA）想对比一下线上的情况，做不到。

+ 由于经常在多套host环境中切换，导致系统host环境乱七八糟，发现问题都不确定到底在哪套环境下。



multiple-host就是为了解决烦人的host问题而诞生的 , 它采用了 **沙箱机制**，在一个独立的浏览器进程中使用host。



+ [它可以做什么](#doWhat)    

+ [如何使用](#how)    

  - [开始使用](#startUse)    

  - [代理host设置](#proxySetting)    

  - [日志输出](#log)    

  - [设置](#settings) 

+ [常见问题](#questions)

  - [移动端测试](#mobile)

  - [和nginx共存](#nginx)

  - [和fiddler共存](#fiddler)

  - [和charles共存](#charles)

  - [自动更新](#update)

+ [changelog](#changelog)



## 它可以做什么



+ 打开一个使用虚拟host环境的浏览器，不受系统host影响。

+ 改了host刷新就生效，再也不用重启浏览器了。

+ 实时显示当前页面的host情况，在哪套环境下一清二楚。

+ 正常浏览器不受任何影响，从而轻松实现两个浏览器，一个看线上，一个看beta的功能。



效果图：



![](https://raw.githubusercontent.com/liyangready/static_source/master/multiple-host/images/1.png)



## 如何使用



multiple-host是一个应用程序，解压缩点击运行即可。



1 点击![](https://raw.githubusercontent.com/liyangready/static_source/master/multiple-host/images/3.png)，mac用户是app应用，windows是exe，得到如下运行界面：



![](https://raw.githubusercontent.com/liyangready/static_source/master/multiple-host/images/2.png)



程序左侧有四个功能：



分别是 [开始使用](#startUse)、[日志输出](#log) 、[代理host设置](#proxySetting)和[程序设置](#settings)



#### 开始使用



开始就是唤起浏览器的入口，如下展示，当前提供了唤起chrom、唤起firefox和其他浏览的功能。



*chrome*：



比如点击唤起chrome![](https://raw.githubusercontent.com/liyangready/static_source/master/multiple-host/images/5.png)，会打开一个chrome，在这个chrome中的所有访问都不受系统host影响，只受虚拟host影响，虚拟host的设置在 代理host一栏。同时，你通过正常手段打开的chrome不受这个影响，只受系统host影响，从而你可以给正常chrome配一套host环境，给从程序中打开的chrome配另一套虚拟的host环境。



*firefox*：



打开firefox和打开chrome同理，可以打开一个只受虚拟host影响的firefox。



*ie及其他*：



由于某些原因，不是所有的浏览器都可以实现打开两个互不影响的实例（如ie），而且其实我们也不需要所有的浏览器都要用两套环境去做对比，但是我们想要测试其他浏览器比如ie的时候，也想用虚拟host怎么办？



可以打开系统代理![](https://raw.githubusercontent.com/liyangready/static_source/master/multiple-host/images/4.png)，让所有的请求都受这个虚拟host的影响，windows用户我提供了一个快捷的方式，可以一键配置和关闭系统host，mac用户由于权限问题，暂时需要自己去 设置。设置了系统代理之后，所有的浏览器都可以享受到虚拟host的配置，而且是事实生效的。



#### 代理host设置



代理host设置我用react写了一个支持[多环境切换的host工具](https://github.com/liyangready/host-manager)，支持筛选、一键启用等功能，从而可以轻松管理虚拟host。



![](https://raw.githubusercontent.com/liyangready/static_source/master/multiple-host/images/7_1.png)  



![](https://raw.githubusercontent.com/liyangready/static_source/master/multiple-host/images/6_1.png)



#### 日志输出



日志输出用于实时打印当前的host情况，当请求被host处理过时，就会打印出一条日志显示当前请求被指向了哪个host，从而让你清晰的知道当前处于哪套环境。   



![](https://raw.githubusercontent.com/liyangready/static_source/master/multiple-host/images/8.png)



#### 设置



设置非常简单，如果你的chrome和firefox没有安装在C盘，需要你在设置中调整一下chrome和firefox的启动路径。



如果9393端口被你的其它程序占用，你也可以在设置中更改代理端口。



![](https://raw.githubusercontent.com/liyangready/static_source/master/multiple-host/images/9.png)



## 常见问题

### Q:移动端能否借用这个host工具？



A:和charles等工具使用方法一样，将手机的请求代理指向本机ip:9393 端口，即可使用。如果还需要配合charles，参加下述的和charles共存。



### Q:使用了multiple-host，还想用nginx怎么办？



A: multiple-host根据host转发请求的时候并没有修改http header中的 *Host name*，只是修改了请求的ip，nginx一般是通过host name设置规则，并不受影响。



### Q:使用了multiple-host，还想用fiddler怎么办？



A： multiple-host和fiddler原理一样，都是起了一个代理server转发请求，想要虚拟host生效的同时fiddler也生效，必须实现multiple-host是fiddler的上游，也就是实现 请求-> fiddler -> multiple-host -> server 的链。好在fiddler提供了这样的功能。



使用步骤： 



+ 打开multiple-host的系统代理。

+ 打开fiddler

+ 使用正常浏览器(不是通过multiple-host唤起的浏览器)访问



你会发现fiddler可以正常记录所有请求，同时虚拟host也会生效。



如果上述步骤没有成功，检查fiddler的 **Tools -> Fiddler Options -> GateWay** 中是否选上了默认的 **Use System Proxy**



### Q:使用了multiple-host，还想用charles怎么办？



A： 同fiddler类似，charles和multiple-host共存也需要实现 请求-> multiple-host -> charles -> server 的链。

具体配置在charles：

 + **Proxy - External Proxy Settings** 

 + **勾选 Use external  proxy server** 

 + **配置 http 和 https 请求的地址为 ：127.0.0.1:9393** (端口号默认为9393，修改过则不一样)



![](https://github.com/liyangready/static_source/blob/master/multiple-host/images/11.png?raw=true)



然后将你的**浏览器/手机代理指向charles**（默认为本机ip:8888），刷新发现请求会被charles采集到，同时，我们的host工具也可以生效。



### Q:有bug或者出了新功能怎么更新？



A: multiple-host实现了一套自动更新机制，当有更新时会自动推送，用户点击确定更新之后，multiple-host会自动下载和覆盖当前目录的程序。



PS: 由于私人主机位于海外，如果更新过慢或者失败，可手动下载最新版，由于multiple-host并不需要按照，删除或者覆盖原来的文件夹就行了



![](https://raw.githubusercontent.com/liyangready/static_source/master/multiple-host/images/10.png)



## changelog

#### 1.0.6 修复删除default host引起的问题

#### 1.0.5 设置默认的host

#### 1.0.1-1.0.4 琐碎bug修复

#### 1.0.0 UI风格大改版，利用react+redux构建可用性更强的UI