内网穿透工具

在微信公众号开发的过程中，由于微信公众号的限制(域名白名单)，无法在本地进行测试支付功能，本包提供一个开源的内网穿透工具，用于把支持支付功能的域名代理到(或者说是内网穿透到)本地服务

也可用于把本地的项目远程展示给他人看（类似于花生壳，或者内网穿透的功能）

安装

# 如果你使用npm
npm install -g http-proxy-bridge

# 如果你使用yarn
yarn global add http-proxy-bridge

# 如果你使用pnpm
pnpm add -g http-proxy-bridge

安装包后， 会自动添加一个名为pd的命令

使用方法

帮助命令

[root@cn root]# pb
Usage: pb command

Options:
  -h, --help                              display help for command

Commands:
  server <http-port> <ws-port>            启动服务端，http-port为http服务端口，ws-port为ws服务端口
  proxy <domain> <ws-host> <target-host>  启动客户端, domain是浏览器访问的host， server-host应指向使用server命令启动的ws-server地址，target-host应指向要代理的目标服务地址
  help [command]                          display help for command

pd server 参数

• http-port 指定 Http 服务的监听端口
• ws-port 指定 Ws 服务的监听端口

pd proxy 参数

• domain 指定要访问的 host，本包支持同时设置多个代理目标，为了能知道去哪里索取资源，必须设置该参数， 如果访问的项目 host 中包含端口号，这里也必须写成xxx.com:7890的模式
• ws-host 指定 ws 服务的服务端地址
• target-host 指定被真实访问的目标服务地址

使用案例

• 在服务器 A 上执行pd server 8888 8889启动 Http Server 与 Socket Server
• 服务 A 上的 nginx 把debug.liyun.com指向到A:8888端口
• 在开发项目机器 B 上运行前端项目，假设项目访问地址为http://localhost:5174
• 在开发项目机器 B 上执行pd proxy debug.liyun.com http:A:8889 http://localhost:5174 启动与B:8889的Socket连接
• 在任意浏览器上访问debug.liyun.com

浏览器访问 debug.liyun.com
被nginx转发到A:8888服务
A:8888服务收到请求后，向A:8889索取资源
A:8889把请求转给 B 的Socket
B的socket收到请求后，向被代理的服务http://localhost:5174索取资源

重点：nginx 的反向代理配置

以上述案例为例，由于 pb server 是根据访问 host 区分流量的， 千万别忘记转发 host 头

server {
  location / {
    proxy_pass http://127.0.0.1:8888;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}