mirror of
https://github.com/ehang-io/nps.git
synced 2026-11-02 01:37:04 +08:00
dashboard 备注 客户端管理优化 多客户端支持 流量显示支持 热更新支持 404错误页支持
This commit is contained in:
刘河 committed
1 parent
c533436c78
commit
c34e5e1a7d
37 files changed
+5414
-731
No files matched your search
+88
-131
@@ -1,147 +1,104 @@
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="tile">
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=cnlh&repo=easyProxy&type=star&count=true&size=large"
|
||||
frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=cnlh&repo=easyProxy&type=watch&count=true&size=large&v=2"
|
||||
frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=cnlh&repo=easyProxy&type=fork&count=true&size=large"
|
||||
frameborder="0" scrolling="0" width="158px" height="30px"></iframe>
|
||||
<div class="col-md-3">
|
||||
<div class="widget-small warning coloured-icon"><i class="icon fa fa-html5 fa-3x"></i>
|
||||
<div class="info">
|
||||
<h4>HTTP端口</h4>
|
||||
<p><b>{{.p}}</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="tile">
|
||||
<h3 class="tile-title">域名代理模式</h3>
|
||||
<p>
|
||||
<b>适用范围：</b> 小程序开发、微信公众号开发、产品演示
|
||||
</p>
|
||||
<p>
|
||||
<b>假设场景：</b>
|
||||
<li>有一个域名proxy.com，有一台公网机器ip为{{.ip}}</li>
|
||||
<li>两个内网开发站点127.0.0.1:81，127.0.0.1:82</li>
|
||||
<li>想通过a.proxy.com访问127.0.0.1:81，通过b.proxy.com访问127.0.0.1:82</li>
|
||||
</p>
|
||||
<p><b>使用步骤：</b></p>
|
||||
<ul>
|
||||
<li>将a.proxy.com，b.proxy.com解析到公网服务器{{.ip}}</li>
|
||||
<li>使用nginx监听这两个个域名，并配置ssl等……</li>
|
||||
<li>在nginx配置中添加反向代理（或直接将http监听端口改为80）<br>
|
||||
<pre><code>
|
||||
server {
|
||||
listen 80;
|
||||
server_name a.proxy.com b.proxy.com;#也可以是泛解析*.proxy.com
|
||||
#ssl等配置
|
||||
<b>location / {
|
||||
proxy_pass http://127.0.0.1:{{.proxyPort}};
|
||||
}</b>
|
||||
}
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>在域名代理管理中添加一个客户端，选择压缩方式，保存。 <a href="/index/add?type=hostServer">立即添加</a></li>
|
||||
{{/*<li>在域名代理管理中找到新加的客户端(查看其vkey或者客户端命令)，任意内网机器执行客户端命令</li>*/}}
|
||||
<li>点击该客户端的域名管理，添加两条规则规则：1、域名：a.proxy.com，内网目标：127.0.0.1:81，2、域名：b.proxy.com，内网目标：127.0.0.1:82</li>
|
||||
<li>现在访问a.proxy.com，b.proxy.com即可成功</li>
|
||||
</ul>
|
||||
<p>注：上文中提到公网ip（{{.ip}}）为系统自动识别，如果是在测试环境中请自行对应，默认启动方式为单客户端模式，默认内网客户端已经启动</p>
|
||||
<div class="col-md-3">
|
||||
<div class="widget-small danger coloured-icon"><i class="icon fa fa-home fa-3x"></i>
|
||||
<div class="info">
|
||||
<h4>域名解析数</h4>
|
||||
<p><b>{{.data.hostCount}}</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="widget-small primary coloured-icon"><i class="icon fa fa-users fa-3x"></i>
|
||||
<div class="info">
|
||||
<h4>总客户端数</h4>
|
||||
<p><b>{{.data.clientCount}}</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="widget-small info coloured-icon"><i class="icon fa fa-user-secret fa-3x"></i>
|
||||
<div class="info">
|
||||
<h4>在线客户端数</h4>
|
||||
<p><b>{{.data.clientOnlineCount}}</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="tile">
|
||||
<h3 class="tile-title">tcp隧道模式</h3>
|
||||
<p>
|
||||
<b>适用范围：</b> ssh、远程桌面等tcp连接场景
|
||||
</p>
|
||||
<p>
|
||||
<b>假设场景：</b> 想通过访问公网服务器{{.ip}}的8001端口，连接内网机器10.1.50.101的22端口，实现ssh连接
|
||||
</p>
|
||||
<p><b>使用步骤：</b></p>
|
||||
<ul>
|
||||
<li>在tcp隧道管理中添加一条隧道，填写监听的端口（8001）、内网目标ip和目标端口（10.1.50.101:22），选择压缩方式，保存。 <a
|
||||
href="/index/add?type=tunnelServer">立即添加</a></li>
|
||||
{{/*<li>在tcp管理列表中找到新加的隧道(查看其vkey或者客户端命令)，任意内网机器执行客户端命令</li>*/}}
|
||||
<li>访问公网服务器ip（{{.ip}}）:填写的监听端口(8001)，相当于访问内网ip(10.1.50.101):目标端口(22)，例如：ssh -p 8001 root@{{.ip}}</li>
|
||||
</ul>
|
||||
<p>注：上文中提到公网ip（{{.ip}}）为系统自动识别，如果是在测试环境中请自行对应，默认启动方式为单客户端模式，默认内网客户端已经启动</p>
|
||||
<h3 class="tile-title">流量</h3>
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<canvas class="embed-responsive-item" id="flow"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="tile">
|
||||
<h3 class="tile-title">udp隧道模式</h3>
|
||||
<p>
|
||||
<b>适用范围：</b> 内网dns解析等udp连接场景
|
||||
</p>
|
||||
<p>
|
||||
<b>假设场景：</b> 内网有一台dns（10.1.50.102:53），在非内网环境下想使用该dns，公网服务器为{{.ip}}
|
||||
</p>
|
||||
<p><b>使用步骤：</b></p>
|
||||
<ul>
|
||||
<li>在udp隧道管理中添加一条隧道，填写监听的端口（8002）、内网目标ip和目标端口（10.1.50.102:53），选择压缩方式，保存。 <a
|
||||
href="/index/add?type=udpServer">立即添加</a></li>
|
||||
{{/*<li>在udp管理列表中找到新加的隧道(查看其vkey或者客户端命令)，任意内网机器执行客户端命令</li>*/}}
|
||||
<li>修改本机dns为{{.ip}}，则相当于使用10.1.50.202作为dns服务器</li>
|
||||
</ul>
|
||||
<p>注：上文中提到公网ip（{{.ip}}）为系统自动识别，如果是在测试环境中请自行对应，默认启动方式为单客户端模式，默认内网客户端已经启动</p>
|
||||
<h3 class="tile-title">代理类型</h3>
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<canvas class="embed-responsive-item" id="types"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="tile">
|
||||
<h3 class="tile-title">socks5代理模式</h3>
|
||||
<p>
|
||||
<b>适用范围：</b> 在外网环境下如同使用vpn一样访问内网设备或者资源
|
||||
</p>
|
||||
<p>
|
||||
<b>假设场景：</b> 想将公网服务器{{.ip}}的8003端口作为socks5代理，达到访问内网任意设备或者资源的效果
|
||||
</p>
|
||||
<p><b>使用步骤：</b></p>
|
||||
<ul>
|
||||
<li>在socks5隧道管理中添加一条隧道，填写监听的端口（8003），验证用户名和密码自行选择（建议先不填，部分客户端不支持，proxifer支持），选择压缩方式，保存。 <a
|
||||
href="/index/add?type=sock5Server">立即添加</a></li>
|
||||
{{/*<li>在socks5代理管理列表中找到新加的隧道(查看其vkey或者客户端命令)，任意内网机器执行客户端命令</li>*/}}
|
||||
<li>在外网环境的本机配置socks5代理，ip为公网服务器ip（{{.ip}}），端口为填写的监听端口(8003)，即可畅享内网了</li>
|
||||
</ul>
|
||||
<p>注：上文中提到公网ip（{{.ip}}）为系统自动识别，如果是在测试环境中请自行对应，默认启动方式为单客户端模式，默认内网客户端已经启动</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="tile">
|
||||
<h3 class="tile-title">http代理模式</h3>
|
||||
<p>
|
||||
<b>适用范围：</b> 在外网环境下访问内网站点
|
||||
</p>
|
||||
<p>
|
||||
<b>假设场景：</b> 想将公网服务器{{.ip}}的8004端口作为http代理，访问内网网站
|
||||
</p>
|
||||
<p><b>使用步骤：</b></p>
|
||||
<ul>
|
||||
<li>在http隧道管理中添加一条隧道，填写监听的端口（8004），选择压缩方式，保存。 <a
|
||||
href="/index/add?type=httpProxyServer">立即添加</a></li>
|
||||
<li>在http代理管理列表中找到新加的隧道(查看其vkey或者客户端命令)，任意内网机器执行客户端命令</li>
|
||||
<li>在外网环境的本机配置http代理，ip为公网服务器ip（{{.ip}}），端口为填写的监听端口(8004)，即可访问了</li>
|
||||
</ul>
|
||||
<p>注：上文中提到公网ip（{{.ip}}）为系统自动识别，如果是在测试环境中请自行对应，默认启动方式为单客户端模式，默认内网客户端已经启动</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="tile">
|
||||
<p>
|
||||
<b>多客户端模式：</b>
|
||||
<li>服务端启动：./proxy_server</li>
|
||||
<li>客户端启动：./proxy_client -server={{.ip}}:{{.p}} -vkey=xxx（见管理列表的客户端启动模式）</li>
|
||||
</p>
|
||||
<p><b>支持客户端同时建立多条隧道，例如单个通道时命令为./proxy_client -server={{.ip}}:{{.p}} -vkey=ccc，如果要支持另外一个隧道，则对应的执行命令为./proxy_client
|
||||
-server={{.ip}}:{{.p}} -vkey=ccc,ddd，即用逗号分隔开多个vkey，适用于所有模式！</b></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<script>
|
||||
var pdataFlow = [
|
||||
{
|
||||
value: {{.data.inletFlowCount}},
|
||||
color: "#46BFBD",
|
||||
highlight: "#5AD3D1",
|
||||
label: "入口流量"
|
||||
},
|
||||
{
|
||||
value: {{.data.exportFlowCount}},
|
||||
color: "#FDB45C",
|
||||
highlight: "#FFC870",
|
||||
label: "出口流量"
|
||||
}
|
||||
]
|
||||
var pdataTypes = [
|
||||
{
|
||||
value: {{.data.tunnelServerCount}},
|
||||
color: "#46BFBD",
|
||||
highlight: "#5AD3D1",
|
||||
label: "tcp隧道"
|
||||
},
|
||||
{
|
||||
value: {{.data.socks5ServerCount}},
|
||||
color: "#85FEAA",
|
||||
highlight: "#85FEAA",
|
||||
label: "socks5隧道"
|
||||
},
|
||||
{
|
||||
value: {{.data.httpProxyServerCount}},
|
||||
color: "#4B653C",
|
||||
highlight: "#4B653C",
|
||||
label: "http代理"
|
||||
},
|
||||
{
|
||||
value: {{.data.udpServerCount}},
|
||||
color: "#90653C",
|
||||
highlight: "#90653C",
|
||||
label: "udp代理"
|
||||
},
|
||||
{
|
||||
value: {{.data.hostCount}},
|
||||
color: "#FDB45C",
|
||||
highlight: "#FDB45C",
|
||||
label: "域名解析"
|
||||
}
|
||||
]
|
||||
var ctxp = $("#flow").get(0).getContext("2d");
|
||||
var pieChart = new Chart(ctxp).Pie(pdataFlow);
|
||||
var ctxd = $("#types").get(0).getContext("2d");
|
||||
var doughnutChart = new Chart(ctxd).Doughnut(pdataTypes);
|
||||
</script>
|
||||
Reference in new issue
Block a user