应用场景: 在公网上 进行公众号网页测试
解决: 每次调试都需要打包和提交服务器 (测试人员在异地)
效果: 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/
三.配置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压缩包解压如图
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
四.前期穿透工作算是完成(什么!现在才是开始? )
(1)修改Vue-lic中的 config/index.js 配置文件, 如图 把 localhost 改为 127.0.0.1 (本地地址)
(2)测试链接
1.Vue的测试模式打开8080端口
2.穿透成功就意味着, 你可以使用浏览器打开 frpc.ini里设置的公网地址 www.ak.com
3.如果成功打开网址, 但是会发现在只能在本机热更新, 其他设备上访问公网地址 是不能实现热更新 !! 每次更新还是需要手动按刷新按钮 !!
4.那么问题出在哪里? 查看日志!
从中看出热更新的原理就是开启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. 格式必须按照 <"?"+ 你的域名 + 服务器端口号>
五. 一切都配置好了, 终于可以秒秒钟远程调试你的代码, 来一波酷炫的公网调试, 如下动图(修改店铺 样式和名称)
参考:
https://www.jianshu.com/p/e8e26bcc6fe6
https://www.jianshu.com/p/00c79df1aaf0
