前端内网穿透,localtunnel你值得拥有!

11
一个前端在调试本地页面时,总会有些稀奇古怪的需求,比如产品立刻要看你的页面效果,而此时有没有上线环境折腾给他看,那此时通过内网穿透的方式,实时把你的项目生成一个在线链接丢给他,让他去找那一像素的bug!

什么是内网穿透

我的理解是:将您的本地主机公开到世界各地,便于测试和共享,无需混淆DNS或部署只是为了让其他人测试您的更改。

localtunnel

通过localtunnel就能把你的本地地址映射到一个公共地址,让其他用户也能访问,比如我本地地址localhost:8888,通过localtunnel生成一个指定前缀的https://huqi.localtunnel.me地址,让测试人员无需通过局域网等就能访问。

安装及使用

默认你安装了node的环境

    npm install -g localtunnel  
    lt --subdomain <个性前缀> --port <要映射的端口>

比如我本地开启了一个8888的服务

clipboard.png

接着我就开启localtunnel

clipboard.png

浏览器输入地址即可访问

clipboard.png

遇到的坑

显示无效的主机:Invalid Host header
经查是因为wepack配置的问题

  • 问题
    39851094-ab28aeb6-5447-11e8-8a1d-1ce52ddc455e.png
  • 解决:webpack配置文件devServer添加:disableHostCheck: true

clipboard.png

其他有趣的现象

当已经有了一个自定义的域名,另外一个人又开启一个同样的域名会怎样?
很大几率会出现如下情况(当然不是防火墙的问题):

  • Error: connection refused: localtunnel.me:38571 (check your firewall settings)
    clipboard.png

如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

13 条评论
Lomo · 5月15日

ngrok 了解下?

+2 回复

0

也很有必要 localtunnel有时候会因为不可描述的原因无法开启

胡琦 作者 · 5月15日
chenging · 5月11日

实际上把localhost换成ip地址监听,只要处在一个网络下就可以访问了。

+1 回复

wzc0x0 · 5月15日

gfw拦截 gg

+1 回复

kybetter · 5月17日

我不知道它是什么原理啊,如果可以把域名配置成局域网内的服务器和域名,或者是自己国内的服务器和域名,会不会快一点?
刚才看了你提供的那篇文章,有思路了。谢谢。

+1 回复

Rossy1 · 5月10日

重复显示 tunnel server offline: socket hang up, retry 1s,怎么回事?

回复

0

本地跑没问题,开启localtunnel就报错吗?socket hang up的话有可能是项目使用了中间件body-parser,具体原因还需排查

胡琦 作者 · 5月10日
0

@胡琦 本地跑没问题,没有用body-parser,lt --subdomain ghbtext --port 8080之后一直重复
tunnel server offline: socket hang up, retry 1s
tunnel server offline: socket hang up, retry 1s
tunnel server offline: socket hang up, retry 1s
tunnel server offline: socket hang up, retry 1s
tunnel server offline: read ECONNRESET, retry 1s
tunnel server offline: socket hang up, retry 1s

Rossy1 · 5月10日
kybetter · 5月17日

请问有国内站点吗?开发时候,一个 app.js 文件大小就是 17MB,网速太慢的话,给人家看啥啊?不太现实。

回复

0

国内的好像基本都是收费的,试试ngrok 或者试试调试利器-SSH隧道

胡琦 作者 · 5月17日
胡琦 作者 · 5月17日

国内的好像基本都是收费的,试试ngrok

回复

kybetter · 5月17日

我用自己国内服务器试了一下,可能是我服务器带宽低或者是我公司网络慢吧,还是慢,跟 ngrok 速度差不多。17MB 的 js 得下将近 3 分钟。而且一改代码,webpack dev server 热加载,外网又重新加载js。

回复

ddchef · 5月22日

我觉得 frp 不错

回复

载入中...