百度百科:ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。ngrok 可捕获和分析所有通道上的流量,便于后期分析和重放.
对于前端的我来说,这丫的讲的啥玩意...
其实说白了就是你写一个项目,在PC上完美运行,想在手机端访问,只能让手机电脑处于同一局域网内,但是这个技术可以把你的本地IP和端口(例如:localhost:8080)转换为www.baidu.com一样的万网,这样,即使电脑与手机不是在同一局域网内也可以无缝访问,(厉害吧!)。
很早我就想了解有没有这种技术,因为有时候写完项目了,感觉挺漂亮的,想让朋友看看,一直发愁怎么变成网址,(别跟我说转二维码),今天无意间在网上看到这种技术,搞了一下午,终于被我弄好了。废话不多说,直接进入正题。
注意:使用前最好将防火墙关闭
软件:ngrox
可以选择三个版本:
ngrox官网服务器在国外,官网链接:https://dashboard.ngrok.com/get-started 进去注册一个账户,我直接用GitHub账户登陆的,注册之后登录显示如下:
从图片上可以看出,想要运行使用,得经过四个步骤:
ngrok authtoken 5sB1fv9TRbNr1FHnEKna8_3LhvQQxwMiyuw4DNME5W8
其中5sB1fv9TRbNr1FHnEKna8_3LhvQQxwMiyuw4DNME5W8:这是隧道id(隧道id,就是图3中的)
运行完之后在本机C:\Users\taohang.ngrok2文件夹下出现ngrok.yml
内容是:authtoken: 5sB1fv9TRbNr1FHnEKna8_3LhvQQxwMiyuw4DNME5W8
表示:你的ngrok账户与本机绑定了
ngrok http 8080
另外:如果想要自定义域名,在安装程序目录下的DOS
自定义子域名:输入 ngrok http -subdomain=th 8080 会出现:
Tunnel session failed: Only paid plans may bind custom subdomains.
Failed to bind the custom subdomain ‘tkh’ for the account ‘Javath’.
This account is on the ‘Free’ plan.
意思是,没有付钱,这是免费版,不能自定义域名,要是付过钱了,直接输入http://tkh.ngrok.io 就可以进入本地8080端口
没钱,还是使用免费版吧!
输入:ngrok http 8080 会出现:
Session Status online
Account Javatkh (Plan: Free)
Version 2.2.8
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://d5cd433a.ngrok.io -> localhost:8080
Forwarding https://d5cd433a.ngrok.io -> localhost:8080
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
表示:这是免费版,Javatkh是GitHub账户名称,服务器地址在US(美国),
在浏览器输入http://127.0.0.1:4040 就可以进入后台
在浏览器输入http://d5cd433a.ngrok.io 或者https://d5cd433a.ngrok.io 就可以访问本机8080端口
关于项目中的设置见小米球ngrok用法即可
因为国外服务器的速度限制,所有ngrox还有个国内的,叫做Sunny-Ngrok。
网站首页:https://www.ngrok.cc/_book/start/ngrok_windows.html
后台地址:https://www.ngrok.cc/user
现在网站呢注册好之后,登录后台地址,输入账户密码,如下:
使用:
第一种:在sunny.exe所在的目录 通过cmd命令行执行sunny.exe clientid 隧道id
多个隧道启动,执行:sunny.exe clientid 隧道id,隧道id 也就是中间加了个逗号
第二种:另一种方式通过 Sunny-Ngrok启动工具.bat 启动,直接输入隧道id就好了
Sunny-Ngrok 和ngrok不同的是:
在链接好隧道id后,它会直接弹出配置好的本地端口所对应的万网链接地址,浏览器输入地址即可访问
ngrok -config=ngrok.cfg -subdomain taohang 8080
taohang 是你自定义的域名前缀,8080是端口
http://taohang.ngrok.xiaomiqiu.cn 和 https://taohang.ngrok.xiaomiqiu.cn
就是你本地的8080端口
解决:我用的是webpack-cli运行的项目(Vue项目)。
·1.在项目的根目录的package.json文件中若有'dev',若没有添加即可。
“dev”: “webpack-dev-server --content-base ./
–open --inline --hot–compress --history-api-fallback --config build/webpack.dev.config.js”
的后面添加–host 172.20.10.2(填你自己的ip地址)。
也就是在最后一行大括号前面添加:
'dev': 'webpack-dev-server --content-base ./ --open --inline --hot--compress --history-api-fallback --config build/webpack.dev.config.js --host 172.20.10.2'
这样就能通过ip访问了。
2.但是通过服务器域名访问时还是显示
Invalid Host header,这是由于新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostname
不是配置内的,将中断访问。
解决:可以在build目录中的webpack.base.config.js中module.exports = { } 对象下,添加属性如下
devServer: { disableHostCheck: true, },
若是出现手机端无加载资源现象,则是因为接口写的是localhost/127.0.0.1 换成上面的172.20.10.2(自己的IP即可)
(这段没用)为什么直接输入他给的网址即可进入首页?
是因为直接输入localhost:8080也能直接进入首页,
我在router/index.js文件里,设置了重定向
export default new Router({
routes: [
// 第一个对象可以不要
{
path: ‘/’,
name: ‘随便起名字’,
// 重定向 默认使用book页面
redirect:’/book’
},]
)}
小米ngrok下载地址参考:http://ngrok.ciqiuwl.cn/
联系客服