ngrok的使用(超详细)

1、ngrok简介
百度百科：ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。ngrok 可捕获和分析所有通道上的流量，便于后期分析和重放.

啥玩意…
1
其实说白了就是你写一个项目，在PC上完美运行，想在手机端访问，只能让手机电脑处于同一局域网内，但是这个技术可以把你的本地IP和端口（例如：localhost:8080）转换为www.baidu.com一样的万网，这样，即使电脑与手机不是在同一局域网内也可以无缝访问，（厉害吧！）。

很早我就想了解有没有这种技术，因为有时候写完项目了，感觉挺漂亮的，想让朋友看看，一直发愁怎么变成网址，（别跟我说转二维码），今天无意间在网上看到这种技术，搞了一下午，终于被我弄好了。废话不多说，直接进入正题。

2、版本简介
注意：使用前最好将防火墙关闭
1
软件：ngrox
可以选择三个版本：

ngrox国际版（就在官网下就行）
ngrox 国内版
小米球ngrok(我感觉最好用的)
2.1ngrox国际版简介
ngrox官网服务器在国外，官网链接：https://dashboard.ngrok.com/get-started 进去注册一个账户，我直接用GitHub账户登陆的，注册之后登录显示如下：

在这里插入图片描述

从图片上可以看出，想要运行使用，得经过四个步骤：
1
第一步：下载
第二步：解压下载文件。
第三步：在程序文件夹下 dos命令，运行：
ngrok authtoken 5sB1fv9TRbNr1FHnEKna8_3LhvQQxwMiyuw4DNME5W8
1
其中5sB1fv9TRbNr1FHnEKna8_3LhvQQxwMiyuw4DNME5W8：这是隧道id（隧道id,就是图3中的）
运行完之后在本机C:\Users\taohang.ngrok2文件夹下出现ngrok.yml
内容是：authtoken: 5sB1fv9TRbNr1FHnEKna8_3LhvQQxwMiyuw4DNME5W8
表示：你的ngrok账户与本机绑定了

第四步：设置本地端口8080。dos命令，运行：
ngrok http 8080
即可，这样你的本地端口就绑定好了。
第五步：$ ./ngrok help (查看帮助文档，可有可无)
另外：如果想要自定义域名，在安装程序目录下的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端口

没钱，还是使用免费版吧！
1
输入：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用法即可

2.2ngrox国内简介
因为国外服务器的速度限制，所有ngrox还有个国内的，叫做Sunny-Ngrok。
1
网站首页：https://www.ngrok.cc/_book/start/ngrok_windows.html
后台地址：https://www.ngrok.cc/user

现在网站呢注册好之后，登录后台地址，输入账户密码，如下：
1
在这里插入图片描述

使用：
第一种：在sunny.exe所在的目录 通过cmd命令行执行sunny.exe clientid 隧道id
多个隧道启动，执行：sunny.exe clientid 隧道id,隧道id 也就是中间加了个逗号
第二种：另一种方式通过 Sunny-Ngrok启动工具.bat 启动，直接输入隧道id就好了

Sunny-Ngrok 和ngrok不同的是:

它是国内的，只需要绑定隧道id即可使用，网速较快，而ngrok是国外的，网速较慢；
Sunny-Ngrok端口配置是在后台界面配置的（后台界面->隧道管理），里面可以配置隧道id,隧道名称，隧道协议，本地端口，服务器类型，到期日期，赠送域名，还可以编辑，删除等
在链接好隧道id后，它会直接弹出配置好的本地端口所对应的万网链接地址，浏览器输入地址即可访问

2.3小米球ngrok(我感觉最好用的)
再程序目录下，shift右键，->在此处打开命令窗口，运行
ngrok -config=ngrok.cfg -subdomain taohang 8080
1
taohang 是你自定义的域名前缀，8080是端口

dos中会出现
Tunnel Status online
Version 1.7/1.7
Forwarding http://taohang.ngrok.xiaomiqiu.cn -> 127.0.0.1:8080
Forwarding https://taohang.ngrok.xiaomiqiu.cn -> 127.0.0.1:8080
Web Interface 127.0.0.1:4040
Conn 19
Avg Conn Time 8769.42ms
http://taohang.ngrok.xiaomiqiu.cn 和 https://taohang.ngrok.xiaomiqiu.cn
就是你本地的8080端口

在浏览器输入后如果出现Invalid Host header （无效的请求头）
解决：我用的是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”
1
这样就能通过ip访问了。
2.但是通过服务器域名访问时还是显示
Invalid Host header，这是由于新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname
不是配置内的，将中断访问。

解决：可以在build目录中的webpack.base.config.js中module.exports = { } 对象下，添加属性如下

devServer: {
  disableHostCheck: true,
},

1
2
3
若是出现手机端无加载资源现象，则是因为接口写的是localhost/127.0.0.1 换成上面的172.20.10.2（自己的IP即可）

（这段没用）为什么直接输入他给的网址即可进入首页？
1
是因为直接输入localhost:8080也能直接进入首页，
我在router/index.js文件里，设置了重定向
export default new Router({
routes: [
// 第一个对象可以不要
{
path: ‘/’,
name: ‘随便起名字’,
// 重定向 默认使用book页面
redirect:’/book’
},]
)}

小米ngrok下载地址参考：
http://ngrok.ciqiuwl.cn/