当前位置:首页 > IT技术

ngrok的使用(超详细)

时间:2019-06-16 11:45:24来源:IT技术作者:seo实验室小编阅读:67次「手机版」
 

ngrok

1、ngrok简介

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

对于前端的我来说,这丫的讲的啥玩意...

其实说白了就是你写一个项目,在PC上完美运行,想在手机端访问,只能让手机电?#28304;?#20110;同一局域网内,但是这个技术可以把你的本地IP和端口(例如:localhost:8080)转换为www.baidu.com一样的万网,这样,即使电脑与手机不是在同一局域网内也可以无缝访问,(厉害吧!)。

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

2、版本简介

注意:使用前最好将防火墙关闭

软件:ngrox

可以选择三个版本:

  1. ngrox国际版(就在官网下就行)
  2. ngrox 国内版
  3. 小米球ngrok(我感觉最好用的)

2.1ngrox国际版简介

ngrox官网服务器在国外,官网链接:https://dashboard.ngrok.com/get-started 进去注册一个账户,我直接用GitHub账户登陆的,注册之后登录显示如下:

在这里插入图片描述

从图片上可以看出,想要运行使用,得经过四个步骤:
  1. 第一步:下载
  2. 第二步?#33322;?#21387;下载文件。
  3. 第三步:在程序文件夹下 dos命令,运行:
ngrok authtoken 5sB1fv9TRbNr1FHnEKna8_3LhvQQxwMiyuw4DNME5W8

其中5sB1fv9TRbNr1FHnEKna8_3LhvQQxwMiyuw4DNME5W8:这是隧道id(隧道id,就是图3中的)

运行完之后在本机C:\Users\taohang.ngrok2文件夹下出现ngrok.yml

内容是:authtoken: 5sB1fv9TRbNr1FHnEKna8_3LhvQQxwMiyuw4DNME5W8

表示:你的ngrok账户与本机绑定了

  1. 第四步:设置本地端口8080。dos命令,运行:

    ngrok http 8080

    即可,这样你的本地端口就绑定好了。

  2. 第五步:$ ./ngrok help (查看帮助文档,可有可无)

另外:如果想要自定义域名,在安装程序目录下的DOS

  1. 自定义子域名:输入 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端口

     没钱,还是使用免费版吧!
    
  2. 输入: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端口

  3. 关于项目中的设置见小米球ngrok用法即可

2.2ngrox国内简介

因为国外服务器的速度限制,所有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不同的是:

  1. 它是国内的,只需要绑定隧道id即可使用,网速较快,而ngrok是国外的,网速?#19979;?/li>
  2. Sunny-Ngrok端口配置是在后台界面配置的(后台界面->隧道管理),里面可以配置隧道id,隧道名称,隧道协议,本地端口,服务器类型,到期日期,赠送域名,还可以编辑,删除等

在链接好隧道id后,它会直接弹出配置好的本地端口所对应的万网链接地址,浏览器输入地址即可访问

2.3小米球ngrok(我感觉最好用的)

  1. 再程序目录下,shift右键,->在此处打开命令窗口,运行
ngrok -config=ngrok.cfg -subdomain taohang 8080

taohang 是你自定义的域名前缀,8080是端口

  1. 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端口

  1. 在浏览器输入后如果出现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"

这样就能通过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/

相关阅读

TDA2030的功率放大电路详细教程

本电路可以将是利用运放TDA2030A制作的功率放大器。电源电压为±12V至±22V。输出的最大功率为18W。 该电路为深度负反馈电路,输

SQL_DISTINCT 语句详细用法

一 测试数据构建二 基本使用(单独使用)三 聚合函数中的DISTINCT下面全部是在MySQL 的环境下进行测试的!!!!!一 测试数据构建数据表 跟

HTML5-跳动的心+详细注解?

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String b

PostgreSQL10.5安装详细步骤(Win10)

一、PostgreSQL安装: 1. 获取安装包 https://www.enterprisedb.com/downloads/postgres-postgresql-downloads 2. 开始安装 3

ffmpeg?#38382;?#20013;文详细解释

a) 通用选项-L license-h 帮助-fromats 显示可用的格式,编解码的,协议的...-f fmt ?#31185;?#37319;用格式fmt-I filename 输入文件-y 覆盖输

分享到:

栏目导航

推荐阅读

?#35753;?#38405;读

疯狂麻将试玩
吉林快3走势图跨度分布 北京四合院民宿赚钱么 黄金北京pk计划软件 北京11选5预测号码推荐 华人易居赚钱吗 百变王牌开奖 pk10计划app破解版 老快3怎么容易中奖 中国体育彩票机选 网赌快3有稳赚的方法吗 双胆技巧 美国股票指数道琼斯 江西省快3开奖结果 开心农场多少人开发 安徽快3怎么玩 重庆时时5星基本走势图