windows下内网穿透工具Ngrok安装与使用

Ngrok是内网穿透的工具，简而言之就是将内网IP映射成对外可访问的域名。Ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。ngrok 可捕获和分析所有通道上的流量，便于后期分析和重放。它是内网穿透的跳板之一。

下载ngrok

https://dashboard.ngrok.com/get-started

根据自己的系统下载对应的版本

下载后解压文件并进入文件

使用cmd进入该目录下，并在官网上复制自己的auth

使用命令 ngrok -authtoken 密钥 -subdomain  二级域名 端口

ngrok http 8080 ::8080为你本地服务器的端口号

最的访问生成的网址，就可以访问你的本地服务器。

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/
————————————————
版权声明：本文为CSDN博主「小城听风雨」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/a5252145/article/details/84895271

官网https://dashboard.ngrok.com/get-started

中文文档http://ngrok.cn/docs.html