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

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

什么是内网穿透

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

localtunnel

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

安装及使用

默认你安装了node的环境webpack

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

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

clipboard.png

接着我就开启localtunnel github

clipboard.png

浏览器输入地址便可访问web

clipboard.png

遇到的坑

显示无效的主机:Invalid Host header
经查是由于wepack配置的问题npm

  • 问题
    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
相关文章
相关标签/搜索