内网开发web服务如何穿透到外网

@kvkens 2017-07-03 00:04:07发表于 iuap-design/blog

起因

image
作为一个web前端开发者,我们有时候会需要临时的本地web环境部署到外网,以供给人体验评价或者是协助调试,在公司PC与移动端调试的时候,发现是2个IP段,根本互相不通,后来滋生出PC主机开启共享的wifi来和手机互相访问、调试。但是这样也极其不便的。我也想过使用花生壳域名解析,但是发现使用起来再mac下也非常不方便,而且现在要实名注册不给用啊亲~~

我后来发现一款叫ngrok这个命令行的小工具,非常容易使用,代理转发本地请求到外网,我在这里就给大家分享一下使用方法

摘抄一段官网的一段介绍:

  1. 外网访问内网服务器不再是距离
  2. 在您电脑的web服务直接开放给外网,再也不担心没有路由器权限和80端口被营运商封闭了
  3. 解决本地80端口无法访问,不需要重复的进行文件上传到服务器,节省大量的上传时间,基于本地写完代码就可以通过微信调试
  4. 不仅实现了http服务的端口转发同时支持tcp的端口,在外网可以通过ssh等方式连接服务器

原版的ngrok偶尔会被墙到,所以我这里使用了国内的一个版本 - ngrok.cc

下载

  1. 打开站点首先下载工具ngrok 点这里下载

这里有很多版本可以选择,我使用的是Mac版本。

注册

  1. 下载完毕后,我们需要注册一下 注册地址
  2. 输入相应的信息注册完毕

image

创建

  1. 登录系统后,可以看到自己的操作界面。
    image
  2. 打开隧道管理->开通隧道找到免费的主机,点击立即购买
    image
  3. 隧道协议按照你自己的需求去选择http、https。
  4. 隧道名称可以随便输入例如:测试移动端
  5. 前置域名这里很关键,输入kvkens的话,那么你后面访问的域名就是kvkens.ngrok.cc
  6. 本地端口这里就是我们本地开启服务的端口了,我的node.js跑的服务一般是3000,那么我就输入3000了,根据你个人对外开放的端口服务来填写。
  7. http验证用户和密码这个我们留空,一般都是匿名访问的。
  8. 输入完毕后确定添加。
    image

开启外网服务

  1. 找到我们下载好的对应的系统版本ngrok。
  2. 执行命令./sunny clientid 隧道id
  3. 隧道ID就是我们创建后的那个id.
    image
  4. 想执行多个隧道的话用逗号分隔即可./sunny clientid c7fb2defb4081919,3e23d14f040b2b12
  5. 这样就可以访问我们的外网服务了,是不是很简单!

工具内建调试

  1. 我们访问的一些请求不光在控制台可以看到,还可以单独访问一个管理页面来查看的。
    image
  2. 打开http://127.0.0.1:4040就可以看到我们没有请求过所以是这样的。
  3. 我们打开一个标准的页面请求再来看看哈。
  4. 看到没有已经有了请求了,header信息、路径、延迟等都可以看出来,还可以自行模拟继续去请求某一个资源等等。
    image

尾声

关于ngrok更多的大家可以详细去查询,这里我只是给大家抛钻引钰的来展示讲解一下,有问题可以回复issue噢~下期再见!