简介

Nohost 是基于 Whistle 实现的多用户多环境配置及抓包调试系统，不仅具备 Whistle 的所有功能，并在 Whistle 基础上扩展了一些功能，且支持多人多环境同时使用，主要用于部署在公共服务器上供整个部门（公司）的同事共同使用，具有以下功能：

1. 环境共享：前端无需配后台环境，后台无需配前端环境，其他人无需配任何环境
2. 抓包调试：远程实时抓包调试，支持各种 Whistle 规则，以及通过链接分享抓包数据
3. 历史记录：可以把环境配置及抓包数据沉淀下来，供后续随时切换查看
4. 插件扩展：可以通过插件扩展实现诸如 inspect，vase，autosave 等功能
5. 对外接口：提供对外接口，可供发布系统、CI等工具操作，实现自动化增删查改环境配置

优势

腾讯IMWeb前端团队出品，主要用于优化前后端测试联调体验

1. 抓包数据持久化分享，请求重放并支持各种 Whistle 规则：

现状：后端将接口部署到测试环境后，前端通过本地webpack代理到后台相应的测试环境服务器联调接口，接口出现问题后无法向后台提供相应的详细数据，只能通过本地浏览器控制台抓包截图，或者后台守着日志，让前端去点击，从而复现问题

2. 去域名化：

现状：每个项目至少有三个环境（线上、gray、qa）,都需要进行相应的配置，通过nohost可以实现环境切换，代理不同环境的机器而仅仅使用一个域名，并且不需要项目手动区分hostname

3. 不需要配置webpack代理实现跨域开发

4. 与后端约定协议，配合yapi等实现数据mock，前端开发更顺畅

5. 静态资源代理

6. ...

安装部署

nohost官网：Nohost

1. 准备一台服务器，建议4核8G以上内存
2. 在服务器上安装node环境，使用最新版node即可
3. 执行命令：npm i -g @nohost/server --registry=r.npm.taobao.org
4. 启动：n2 start -p 80，这台服务器最好只用来部署nohost应用，所以将域名的默认访问端口选择为80端口

调试

账号

nohost安装完成之后，访问对应的服务器地址，如：nohost.xxx.com （xxx为公司二级域名）， 刚进去会要求输入管理员账号密码，都是admin，然后会看到以下类似页面：

下面的列表是一个一个的账号，初始情况下是没有账号的，需要访问：nohost.xxx.com/admin.html， （把里面的域名换成你对应的服务ip地址），就可以看到以下页面：

点击添加账号，就可以添加新的账号，设置好用户名密码即可，这里建议由管理员来统一管理所有账号。

证书与配置

点击证书页面，在这里可以上传证书，因为nohost默认只能抓取http请求，对于配置了ssl加密的网站，我们是没法抓取里面的https请求的，所以为了可以抓取这部分网站的数据，我们需要上传该网站的证书，包含同名的.key和.crt，例如：

经过以上配置，nohost就可以抓取图中域名列表所配置的所有网站的所有请求了。

然后点击图中的配置tab，切换到配置页面，将上述的域名通配符写入并保存（这一步是为了在满足条件的html页面上注入一个小圆点，便于操作该小圆点来进行环境切换与数据抓包）：

进行了入口配置之后，所有命中了入口配置规则的页面都会在页面左下角注入一个小圆点：

代理

目前完成了对服务端nohost的配置，还无法抓取数据，需要下载一个浏览器代理插件，以chrome为例，建议下载switchyomega：

如果未配置翻墙可以使用 极简插件 安装：

安装完成之后，就可以将请求代理到nohost服务器，首先点击浏览器地址栏右侧插件列表里面的小圆圈，如果没有小圆圈的话需要将它固定到书签栏：

然后点击小圆圈里面的选项，进行配置：

推荐的 switchyomega 代理配置如下，点击新建情景模式，输入nohost：

因为我已经配置过这个情景模式（nohost）所对应的名称了，所以出现了重名，点击创建，然后就可以看到，你新建的情景模式，将配置改成如下，其中对应的ip地址与端口号为你对应的nohost服务所部署的服务器：

注意：不能将所有的请求都走nohost，所以推荐在新建一个auto switch环境，配置如下：

为了方便，我在下一章节中给大家准备了我的配置，只需要在switchyomega的配置页面上将以下文件导入即可：

其中nohost Tab需要配置nohost代理服务器的ip地址：（转发请求到nohost服务器）

完成以上配置后，点击左下角的 应用选项 即可保存配置

配置文件下载

switchyomega配置文件，提取码: hmve

抓包

前期工作准备完毕，现在我们来详细介绍一下这个工具的使用方法。

我们现在去访问nohost上配置了对应域名的网站（证书与配置中的入口配置），同时打开： nohost.xxx.com/data.html （访问地址换成你自己的nohost服务地址），这里必须事先创建一个账号环境， 见上文账号一节，并将下图中对应的下拉框选为该账号里面的任意环境：

将网页代理切换到nohost，点击书签栏的小圆圈，将网页切换到auto switch环境：

此时，刷新页面，即可在nohost.xxx.com/data.html 上看到相应的请求：

同时，在页面左下角会出现一个小圆点，鼠标Hover后会显示相应的菜单功能，点击查看抓包也会跳转到相应环境的抓包页面：

随便选取一条以api开头的后端接口，即可查看请求详细数据：

同时右键点击相应的请求，可以将请求分享给别人进行查看与重放：

根据情况选择是否设置密码，一般选择不设置：

把该请求链接分享给别人就可以将请求分享了，同时别人点击该链接后，可以对请求进重放：

点击Replay是请求重放，点击compose类似于postman，可以手动构造请求，请求的相应参数都会默认携带：

点击纸飞机即可发送请求

应用场景

线上域名代理本地开发环境

想象以下场景：

我需要将线上的所有静态资源请求走到本地，但是相应的接口走线上环境，即将本地调试的项目的localhost改为线上域名

配置抓包规则

打开对应页面，小圆点选择查看抓包：

选择页面左边菜单栏的rules，点击create，新建一个 example-dev 环境，并在里面配置如下两行代理：

example-dev.xxx.com http://`${clientIp}:7701` # 本机服务的网络地址
example-dev.xxx.com/api ignore://* # 忽略以api开头的请求

command + s 即可保存配置

启动本地项目并暴露host：

• 通过 vite 启动的项目，项目启动时追加参数 --host
• 通过 webpack-dev-server 启动的项目，启动时追加参数 --host 0.0.0.0（允许局域网内所有ip访问我这台机器，）
• 通过 vue-cli-service 启动的项目，启动时追加参数 --expose

如：

然后在页面上点击小圆点选择环境，选择为你刚刚创建的 example-dev 环境，即可将请求代理到本地开发环境：

这样通过域名访问（example-dev.xxx.com/） 环境的时候，类似于本地开发环境使用localhost调试项目，然后请求接口都走的线上环境，并且热更新是生效的。

注意：通过 webpack-dev-server 启动的项目需要在项目的 webpack.config中的devServer中加入一行配置：disableHostCheck: true，否则webpack会检查host，导致出现以下情况：

静态资源代理

想象以下场景：

线上环境依赖某一个js文件，这个js文件我在本地开发测试，我不想通过发包来线上测试，我想在本地测试该文件

例如下图中的一个js文件，我要把他打到本地并且执行后alert('hello world')：

首先要访问本机文件，需要起一个本机文件访问服务端，所以先安装http-server:

npm install http-server -g

同时我们需要知道上述js文件的请求路径信息：

然后我们可以在桌面上创建一个文件夹（注意文件夹里面不要包含index.html文件）：

文件中的文件与上述请求的js文件路径一致：

在根目录启动http-server：

相应的nohost代理配置规则如下（配置方法如上一节所示）：

example-dev.xxx.com/home/static/js/vendors.14c5054f.js 172.16.24.142:8082

刷新首页，并切换代理到我们配置的 example-dev 环境：

其他场景：

• 代码需要区分hostname（nohost代理生产环境域名即可）
• 数据抓包分享
• 数据mock（只需要后台提供mock接口，进行代理即可）
• ...

其他

Nohost是基于Whitle的一个代理应用，我们通过配置一些请求转发规则，可以实现对所有请求的代理，同时集成了抓包、分享、重放请求、多账号、多环境测试等特点

除了我以上所描述的场景，其实还有许多别的场景，需要具体问题具体分析，相应的代理配置可以去访问whitle的帮助文档：whistle