前端內網穿透，localtunnel你值得擁有！

一個前端在調試本地頁面時，總會有些稀奇古怪的需求，好比產品馬上要看你的頁面效果，而此時有沒有上線環境折騰給他看，那此時經過內網穿透的方式，實時把你的項目生成一個在線連接丟給他，讓他去找那一像素的bug！

什麼是內網穿透

個人理解是：將您的本地主機公開到世界各地，便於測試和共享，無需混淆DNS或部署只是爲了讓其餘人測試您的更改。

localtunnel

經過localtunnel就能把你的本地地址映射到一個公共地址，讓其餘用戶也能訪問，好比我本地地址localhost:8888,經過localtunnel生成一個指定前綴的https://huqi.localtunnel.me地址，讓測試人員無需經過局域網等就能訪問。

安裝及使用

默認你安裝了node的環境

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

好比我本地開啓了一個8888的服務

接着我就開啓localtunnel

瀏覽器輸入地址便可訪問

遇到的坑

顯示無效的主機：Invalid Host header，
經查是由於wepack配置的問題

• 問題
  
• 解決：webpack配置文件devServer添加：disableHostCheck: true

其餘有趣的現象

當已經有了一個自定義的域名，另一我的又開啓一個一樣的域名會怎樣？
很大概率會出現以下狀況(固然不是防火牆的問題)：

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