Giter VIP home page Giter VIP logo

nohost's Introduction

Nohost

NPM version node version PRs Welcome License

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

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

效果图

目录

一. 准备

二. 安装

三. 设置

四. 访问

五. 账号

六. 配置

七. 规则

八. 开发

九. 加群

安装 Nohost 之前,建议先做好以下工作:

  1. 准备一台服务器,假设IP为:10.1.2.3(以你自己的服务器为准,建议4核8G以上的配置)
  2. 准备一个域名(以下假设为:nohost.imweb.io),并把 DNS 指向上述服务器(10.1.2.3)
  3. 收集涉及域名的证书对,只支持 xxx.keyxxx.crt(非必须,但建议用正式的证书,否则要么 Nohost 里面无法查看 HTTPS 的内容,要么每个访问 Nohost 的客户端都要安装一遍根证书)

申请域名的好处是可以直接用域名访问管理及账号页面,手机也可以通过域名设置代理访问 Nohost,方便记忆及输入

首先,需要安装Node(建议使用最新的LTS版本):Node

Node安装成功后,通过npm安装 nohost

npm i -g @nohost/server --registry=https://r.npm.taobao.org

安装完成后执行启动命令:

n2 start

也可以启动时直接设置当前 Nohost 服务到域名 n2 restart -o nohost.imweb.io Nohost 的默认端口为 8080,如果需要自定义端口,可以通过 n2 restart -p 80 设置。 如果命令行提示没有对应命令,检查下系统环境变量 PATH 配置,看看 Nohost 安装后生成的命令所在目录是否已添加到 PATH

重启 Nohost

n2 restart

停止 Nohost

n2 stop

重置管理员账号:

n2 restart --reset

安装启动成功后,打开管理员页面 http://10.1.2.3:8080/admin.html#system/administrator,输入默认用户名(admin)和密码(123456),打开系统配置后:

其中 10.1.2.3 表示Nohost运行的服务器IP,具体根据实际 ServerIP 替换

  1. 修改管理员的默认账号名和密码(不建议使用默认账号及密码,如果忘记管理员账号名或密码,可以通过 n2 restart --reset 重置
  2. 设置Nohost的域名(将申请的域名填上,如果需要设置多个域名,可以通过逗号 , 分隔,也可以通过启动参数 -o www.xxx.com,www.yyy.com 设置)
  3. 上传涉及的 key 和证书(证书只支持 .crt 格式)

admin

Note: 设置的域名 DNS 一定要指向该IP,否则可能出现不可用状态,上述配置会自动重启服务,建议避免频繁操作

Nohost 本身就是一个代理,可以直接配置浏览器或系统代理访问,也可以通过 Nginx反向代理访问,为方便大家使用,针对不同的人群可以使用不同的方案(以下用 nohost.imweb.io 表示 Nohost 的域名,具体域名需要自己申请及设置)。

前端开发

前端开发建议使用最新版的 Whistle,可以通过以下两种方式访问 Nohost:

  1. 直接在 Whistle 上配置远程规则

    @http://nohost.imweb.io:8080/whistle.nohost/cgi-bin/plugin-rules

    上述配置表示 Whistle 从 http://nohost.imweb.io:8080/whistle.nohost/cgi-bin/plugin-rules 获取 Nohost 的生成的入口规则,并且如果 Nohost 规则有变会自动更新规则,这些规则是由 Nohost 上传证书的域名及界面 配置/入口配置 配置的规则自动生成(具体参见后面的配置),这些规则可以自动过滤掉无关请求,只会把相关的请求转到Nohost。

    当然这种直接手动配置在 Whistle 上还不是最好的方式,更建议的方式是把这些规则集成到插件里面,这样开发者只需安装插件即可。

  2. 【强烈推荐】 集成 Whistle 插件,具体参考:https://github.com/nohosts/whistle.nohost-imweb/blob/master/dev.md

后台开发

后台开发推荐使用 Chrome 的 SwitchyOmega 配置代理规则 (如上述代理配置 nohost.imweb.io + 8080),如果不想所有请求都转到 Nohost,可以配置 SwitchyOmega 的自动切换或者用PAC脚本代替,也可以参考 nohost-client 打包一个客户端:https://github.com/nohosts/client。手机端可以直接配代理,或者通过 VPN App 设置代理,如 iPhone 可以用 detour

其他人员

非开发人员尽量使用客户端、APP、或通过外网转发的方式,减少他们的接入成本,如何打包客户端参考:https://github.com/nohosts/client;手机等同后台开发的配置方式。

外网访问

一般 Nohost 是部署在公司内网,外网是不可以直接访问,需要通过接入层(如:Nginx)转发。

安装好插件或配置好代理后,打开相关页面(这些页面的域名必须在上面上传证书里面,如果没有需要额外配置,具体参考下方 配置 说明),即可看到页面左下脚出现一个小圆点,点击小圆点可以进行切换环境:

证书列表

Whistle插件列表

打开页面

点击按钮

如果页面左下脚没出现小圆点,可以看下面 配置 说明 第一次打开小圆点只有一个 正式环境,需要管理员添加账号: 添加账号

添加完账号后,打开独立的环境选择页面 http://nohost.imweb.io:8080

选择环境页面 个人账号页面 image

创建完环境后,可以在环境里面配置任何 Whistle 规则,跟普通到本地 Whistle 功能一模一样,甚至更多。每个实例可以建立上百个账号,每个账号可以建立上百个环境,具体取决于你到机器性能。

默认情况下,只有证书里面域名的请求才会被转发到各个账号,且 html 类型的内容会自动注入小圆点,但在实际应用中你可能会遇到以下问题:

域名证书问题

有些域名只涉及 http 请求,不涉及 https 的请求不需要证书,或者某些敏感及第三方域名无法获得证书,这类域名可以通过在 配置 -> 入口配置 里面设置: 入口配置

入口配置的规则有三种(#xxx表示注释):

pattern #转发到Nohost,如果是html页面则注入小圆点
-pattern #转发到Nohost,不注入小圆点
--pattern #不转发到Nohost,且不注入小圆点
x)-pattern #x为整数(正负数零都可以),表示手动设置优先级,默认为0

pattern 参见:https://wproxy.org/whistle/pattern.html,匹配顺序是从上到下,每个请求只会匹配其中一个,证书里面到域名优先级默认最低,可以通过 1) 设置优先级。

如:

ke.qq.com
-*.url.cn
--localhost.**
-1)**.qq.com

表示:

  1. 所有 ke.qq.com 的请求都转发到Nohost,且所有 html 都注入小圆点
  2. 所有 xxx.url.cn 的请求都转发到Nohost,但不注入小圆点
  3. 所有 localhost.xxx.yyy... 的请求都不转发到Nohost,且不注入小圆点
  4. 所有 qq.com 的子代域名请求都转发到Nohost,但不注入小圆点,并优先级设为 -1 ,确保证书里面的 qq.com 子域名可以正常注入小圆点

这个是 Nohost 主进程 Whistle,所有请求都会通过该 Whistle,并通过该进程的 whistle.nohost 插件进行账号管理及请求转发,主进程 Whistle 在生产环境下无法查看抓包数据,可用于设置规则及全局插件管理,如:屏蔽一些请求等等,更多内容参见后面的文档。

详细内容参见文档:https://nohost.pro/

开发环境搭建:

git clone [email protected]:Tencent/nohost.git
# 切换到dev开发分支
git checkout dev
# 安装依赖
npm install
# 启动页面构建
npm run dev
# 启动 Nohost
npm start

修改页面后需要手动刷新

欢迎大家加入Nohost交流群。考虑到群二维码有时效限制,请大家扫码加好友,验证回复 Nohost ,会统一将大家拉进群。 二维码

参与贡献

如果你有好的意见或建议,欢迎给我们提 Issues 或 Pull Requests,为提升抓包调试体验贡献力量。 腾讯开源激励计划 鼓励开发者的参与和贡献,期待你的加入。

License

MIT

nohost's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

nohost's Issues

文档里面说的前端开发和其他人员使用问题

问题1:按照说明改了ip和端口,但是怎么能跟服务器上搭建的 nohost关联上?
其他人员
非开发人员尽量使用客户端、APP、或通过外网转发的方式,减少他们的接入成本,如何打包客户端参考:https://github.com/nohosts/client;手机等同后台开发的配置方式。

问题2:如何在 Whistle 上配置远程规则? 找了好久,找不到在哪里配置。
直接在 Whistle 上配置远程规则
@http://nohost.imweb.io:8080/whistle.nohost/cgi-bin/plugin-rules

问题3:本地Whistle插件装上之后,连不上nohost,而且无法抓包,关了插件才能抓包?
【强烈推荐】 集成 Whistle 插件,具体参考:https://github.com/nohosts/whistle.nohost-imweb/blob/master/dev.md

多用户是什么意思?

现在我们搭建了一个nohost,并在后台创建了多个用户,但是 手机测试绑定了服务器代理之后,一台设备切了用户,或环境,其他设备也跟着切换了,这是多用户吗?

【体验】Rules支持快速回到目标rule

在顶部栏搜索【目标rule】名称后,Rules列表会选中并打开【目标rule】
image

如果这时查看了其他rule项,则无法快速返回到【目标rule】。
如果Rules列表有很多项的话,则需要在众多的列表项中找回【目标rule】,过程非常痛苦。

期望优化一下这个交互,提供一键切回目标rule的能力

设置域名无法访问 nohost

nohost version: [email protected]
我在服务器上跑一个 nohost,使用 IP 能成功访问 nohost。当我配置域名,使用域名访问却开始报错,信息如下:

  • 能访问 nohost index.html 的页面,即能连接到 nohost
  • index.html 开始请求接口,域名/cgi-bin/list
  • 上述接口请求,响应状态302,返回 location 127.0.0.1/cgi-bin/list,即不断重定向到本地的域名

端口暴露失败

大家好,我在阿里云ecs启动了nohost服务,监听8181端口,并且像往常一样开放了此端口,但是奇怪的是,在公网telnet这个端口并不通,想问下大家是怎么操作的?(已尝试过变更端口及重启防火墙)
备注:
1、nohost服务是正常启动的
image
2、端口已暴露
image

Rules 能支持目录吗?

现在只有一层,如果给测试用,测试人员会建好多测试用例,Rules 会膨胀的非常快

是不是不能指定非8080端口啊

whistle for Dockerfile

FROM alpine:latest

RUN set -ex &&
apk update &&
apk upgrade &&
apk add --no-cache bash &&
apk add --no-cache nodejs-npm &&
npm i -g @nohost/server --registry=https://r.npm.taobao.org

ENTRYPOINT ["n2", "run"]

这个的docker容器指定别的端口都无法启动

数据能存到数据库里面吗?

我看现在的数据是存到系统目录里面了,有数据库版的计划吗?这样容器化部署,迁移等会比较方便

const getSessionsPath = () => {
  nohostPath = nohostPath || process.env.NOHOST_PATH || path.join(os.homedir(), '.NohostAppData');
  return nohostPath;
};


const storage = new Storage(path.join(process.env.WHISTLE_PATH, '.nohost'));

是否有更明显的环境标识

目前标识当前环境,除了刚刚访问那一会上方会有环境名的toast外,就只能在小圆点处点击产看了。但是此处账号名+环境名较长就会显示不完全,没有办法非常明显的知道这个是哪个服务的哪个环境。
能提供下更明显的环境标识吗?
image

【应用示例】基于 Nohost 的开发方式

安装Node

  1. 下载及安装Node:Node官网

安装工具

  1. 安装whistle及所需插件:

    npm i -g whistle whistle.nohost-xxx

    Mac 或 Linux 可能需要加 sudo

    sudo npm i -g whistle whistle.nohost-xxx

    其中,whistle.nohost-xxx 用于切换nohost环境的whistle插件(实现参考:https://github.com/nohosts/whistle.nohost-imweb),主要用于选择后台测试环境,前端无需本地配置后台环境,具体操作看后面介绍。

  2. 启动whistle:

    w2 start

    Mac是如果用brew安装Node可能会出现命令找不到问题,手动配下path,或者网上找下解决方案

  3. 配置代理:

    • 安装Chrome插件:SwitchyOmega
    • 配置代理参数(whistle默认端口为 8899):
      配置whistle代理
      选中whistle代理
  4. 打开whistle界面:http://local.whistlejs.com

  5. 安装whislte根证书:https://wproxy.org/whistle/webui/https.html

上述操作只在第一次开发项目需要安装,后面最多只需在重启电脑时启动下whistle即可:w2 start

开始工作

  1. 检出项目代码(以 agency-react 为例):
    git clone http://git.test.com/xxx/agency-react.git
  2. 检出代码后,进入项目根目录安装依赖:
    tnpm i
  3. 一键配置本地映射规则:
    w2 add
  4. 启动本地构建:
    npm run dev
  5. 打开 whistle界面 > Plugins > nohostenv插件界面 选择对应后台测试环境:
    配置本地环境

所有项目的本地映射规则都放在项目的 .whistle.js 文件中,并通过 w2 add 命令自动设置到whistle,无需手动配置项目的本地环境;所有公共环境都在nohost上配好,前端无需配置后台环境,后台也无需配置前端环境,产品测试无需配置任何环境。

页面调试

  1. 注入 vConsoleeruda 可以用插件:https://github.com/whistle-plugins/whistle.inspect
  2. 查看指定页面错误及页面console输出的信息:http://wproxy.org/whistle/webui/log.html
  3. 通过weinre查看修改指定页面的DOM节点:http://wproxy.org/whistle/webui/weinre.html

更多功能参考:https://github.com/avwo/whistle

nohost小圆点环境切换问题

比如现在有两个用户 ,a和b,点击小圆点会出现三个选项,正式环境,a,b。
当用户a选择a环境进行开发时,用户b首次打开的默认就是a环境,然后选择了b环境。
这时候用户a,刷新页面,发现环境变成了b环境,貌似只要有一个用户选择了一个其他用户的都会发生变化。

这个是我配置有问题还是?

能不能做到就是初次打开默认正式环境,然后第一次切换环境存储在本地,这样刷新的时候,直接去取存在本地的环境,就不会被别的用户影响了

nohost账号数量限制

目前nohost账号数量限制为120,可以开放更多的账号吗?如果修改MAX_ACCOUNT_COUNT,会有什么影响吗?

命令出错

n2 restart --reset
error: unknown option `--reset'

部署nohost无法进入管理员页面

nohost版本: 0.6.4
node版本::v12.18.2
whistle版本:2.6.6

触发步骤:

  1. 按上手流程安装nohost程序,执行n2 start
  2. 访问http://127.0.0.1:8080/admin.html#system/administrator
  3. 无法显示相关页面
    image

相关页面请求头信息

General
Request URL: http://127.0.0.1:8080/admin.html
Referrer Policy: strict-origin-when-cross-origin

Response Headers
Connection: keep-alive
Content-Length: 87
Content-Type: text/html; charset=utf8
Date: Mon, 08 Feb 2021 07:00:44 GMT
WWW-Authenticate: Basic realm=User Login

Request Headers:
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
Cache-Control: max-age=0
Connection: keep-alive
Cookie: _ga=GA1.1.1914157490.1597197896; Hm_lvt_d214947968792b839fd669a4decaaffc=1605233845
Host: 127.0.0.1:8080
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.146 Safari/537.36

初步排查结果:

  1. /admin.html的路由需要做登陆校验,这个的登陆校验过不了
    image
    image

成功结果:

  1. 把登陆校验去掉之后就能成功显示页面
    image

docker镜像

有没有考虑提供一个镜像一键部署

nohost抓包https请求

客户端安装证书对非技术人员来讲体验不太好,但正式证书拿不到,有其他办法吗?自签名的可以实现吗?

通过SwitchyOmega直接代理到Nginx转发的nohost服务器访问不通

公司服务器只暴露80端口,我在服务器启动nohost服务端口是9999
比如服务器域名是 abc.com,当我访问 abc.com时,Nginx转发到 proxy_pass http://127.0.0.1:9999;
当我直接访问abc.com是可以显示环境列表选择页面,abc.com/admin.html 也能访问。

然后通过SwitchyOmega配置代理如下,使用该情景模式时,任意网站都无法访问,要怎么配置...
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.