应用场景: 在公网上 进行公众号网页测试

解决: 每次调试都需要打包和提交服务器 (测试人员在异地)

效果: npm run dev调试模式下, 直接修改源代码, 就可以在任意设备(公网)上, 不需刷新立刻看到效果 (真是秒秒钟的事)

一.准备工具

    具备知识:  Linux(基础) + JavaScript +  Vue.js (热门框架) 

    准备工作: 有公网IP的服务器 + 公网服务器域名

    框架: VUE (渐进式框架) + vue-cli(vue脚手架)

    工具: frp, centOS, WebStorm, 电脑(废话)

二.下载工具

Frp: 工具: https://github.com/fatedier/frp/releases
官网: https://www.chuantou.org/

github下载压缩包

三.配置Frp 服务器端(公网IP) 和 客户端(电脑)

(1)服务器端

1.新建目录,

 mkdir ~/frp 

2.上传frp_0.21.0_linux_amd64.tar.gz至linux服务器~/frp目录下

3.跳转到该目录下

cd ~/frp

4.解压

tar -zxvf  frp_0.21.0_linux_amd64.tar.gz

5.进入解压目录

cd frp_0.13.0_linux_amd64

gz压缩包解压如图

压缩包内部文件.png

6.这里主要关注4个文件，分别是frpc、frpc.ini和frps、frps.ini，前者两个文件是客户端所关注文件，后者两个文件是服务端所关注两个文件。

7.首先删掉frpc、frpc.ini两个文件，然后再进行配置

vi ./frps.ini

_

[common]
bind_port = 7000           #与客户端绑定的进行通信的端口
vhost_http_port = 8080     #访问客户端web服务自定义的端口号

8.保存然后启动服务./frps -c ./frps.ini，这是前台启动

(2)客户端

1.下载frp_0.21.0_darwin_amd64.tar.gz (对应自己的电脑系统版本, 这是Mac系统)

2.解压后,首先删掉frps、frps.ini两个文件,然后再进行配置，修改 frpc.ini 配置文件

[common]
server_addr = 120.56.37.48   #公网服务器ip
server_port = 7000            #与服务端bind_port一致

[web]
type = http         #访问协议
local_port = 8080   #内网web服务的端口号 (Vue调试模式,默认8080端口)
custom_domains = www.ak.com   #所绑定的公网服务器域名，一级、二级域名都可以

上面的配置和服务端是对应的。

(3)开始穿透

1.需先 运行frps 服务器S

    ./frps -c ./frps.ini

2.然后 运行frpc 客户端C

    ./frpc -c ./frpc.ini

终端开启frp穿透模式

四.前期穿透工作算是完成(什么!现在才是开始? )

(1)修改Vue-lic中的 config/index.js 配置文件, 如图 把 localhost 改为 127.0.0.1 (本地地址)

修改host

(2)测试链接

1.Vue的测试模式打开8080端口

运行起调试模式.png

2.穿透成功就意味着, 你可以使用浏览器打开 frpc.ini里设置的公网地址 www.ak.com

通过公网域名访问.png

3.如果成功打开网址, 但是会发现在只能在本机热更新, 其他设备上访问公网地址 是不能实现热更新 !! 每次更新还是需要手动按刷新按钮 !!

4.那么问题出在哪里? 查看日志!

网络日志.png

从中看出热更新的原理就是开启sock链接获取最新的更新,

那么问题正是出现在Webpack , 因为config/index.js 配置文件的地址是127.0.0.1, dev调试模式上默认使用127.0.0.1, 公网上并没有这个IP地址. 那应该是什么地址才对, 当然也要通过穿透的地址取回更新文件

!!注意!!:我们就需要修改到npm库中的 node_modules/webpack-dev-server/client/index.js文件的 重写__resourceQuery. 格式必须按照 <"?"+ 你的域名 + 服务器端口号>

修改npm库文件

五. 一切都配置好了, 终于可以秒秒钟远程调试你的代码, 来一波酷炫的公网调试, 如下动图(修改店铺 样式和名称)

公网调试.gif

参考:
https://www.jianshu.com/p/e8e26bcc6fe6
https://www.jianshu.com/p/00c79df1aaf0