frp内网穿透

前端这点事 240 1

起因:本文主要说明frp在前端开发工作中的具体用处,其他的用处暂时不多做解释,以往的开发过程中遇到过一次,研究微信支付的功能,

心想着,对的api撸就可以了,但是事情,远没有自己想象的那么简单,因为微信支付是需要授权域名和支付目录的,那在本地开发的时候,就会很麻烦,

因为我们本地启的server都是localhost、127.0.0.1,再或者直接switchhost加个解析指向内网的服务器,即使发到测试、预发环境也都是内网的域名,

一般是运维同志搞个dns解析完成的,那么就意味着要想调研微信支付功能,你就必须得在线上,那这个就很坑,不可能本地写个console.log就发到线上,

再说,如果是个新项目,还没上线,你发了就发了,但是如果是个已有的项目,你忽然发个bug上去,我想,领导会弄死你的~~

此刻,frp内网穿透隆重上场!

1、你需要一台公网服务器,此处说的linux操作 windows一样的。自行研究即可

先附上官网地址:官网传送门

wget https://github.com/fatedier/frp/releases/download/v0.37.1/frp_0.37.1_linux_amd64.tar.gz

2、解压文件

tar -zxvf frp_0.37.1_linux_amd64.tar.gz

3、进入解压目录

cd frp_0.37.1_linux_amd64.tar.gz

4、配置服务端

vim ./frps.ini
[common]
bind_port = 8888        #与客户端(也就服务器端口号)绑定的进行通信的端口
vhost_http_port = 80    #访问外网服务的端口号
vhost_https_port = 443

按”i”键进行编辑,按“esc”退出编辑状态,输入“:wq”退出

5、启动server端

临时启动

./frps -c ./frps.ini

后台保持启动

nohup ./frps -c ./frps.ini &


6、配置客户端

vi ./frpc.ini
[common]  
server_addr = xxx.xxx.xxx.xxx     #公网服务器ip  
server_port = 8888              #与服务端端口保持一致,这样数据才能通信  
   
  
#公网访问内部web服务器以http方式  
[web]  
type = http                     #访问协议
local_ip = 127.0.0.1            #内网服务器ip 
local_port = 80                 #内网web服务的端口号  
custom_domains = 1xx.xxx.xxx.xxx,2xxx.xxx.xxx.xxx
#所绑定的公网服务器域名,一级、二级域名都可以,绑定多个域名时用英文“,”分开,没有域名的直接公网ip也可以

7、启动客户端

临时启动

./frpc -c ./frpc.ini

后台保持启动

nohup ./frpc -c ./frpc.ini &

即可。


实战一下,首先,在先在本地开启个server,我直接在虚拟机操作了,

直接安装node,然后npm i http-server -g,随便新建一个目录,新建index.html,简单写个hello world 并且开启server,如图:

目录下新建index.html文件,并且写上hello world~~,如图:

然后按照上面说的操作配置客户端,wget下载文件并且解压,配置frpc.ini文件,配置如下:

注意,我们的本地虚拟机其实就是我们需要映射出去的内网机器,外网机器我用的是腾讯的服务器。

此时开启客户端(这里应该先开启服务端,再开启客户端,不然通讯不上,客户端命令会报错,顺序自己安排下吧,我不报错,因为已经开启server端了)如图:

这里看到,success,代表本地和远程服务端链接成功了,因为我已经开启了server端,好了,接下来,我们组操作服务端。

xshell连接到服务器,开始操作:

这个配置就代表着。服务端与内网机器链接端口为:8888,用户访问的是9999端口号,访问有问题的可以看下服务器防火墙配置对不对,

释放对应端口号。

最后开启server:

访问页面就可以看到了,内网和外网访问内容是一致的。~~


是不是很简单,so easy~~




标签: 内网穿透

发表评论 (已有1条评论)

评论列表

2021-11-17 16:01:42

11