前端內網穿透localtunnel和natapp

做爲前端開發，遠程測試是必不可少的。不少時候爲了方便咱們每每只作內網測試，即同個局域網內，經過localhost或者127.0.0.1便可訪問您正在開啓的服務。但有些功能必須使用外網才能完成測試，但又不能爲了一個測試去搭建一個外網服務器。可使用內網穿透工具，本地開啓的服務器，外網能夠訪問。

localtunnel （國外網）

Localtunnel 是一個可讓內網服務器暴露到公網上的開源項目

1. 安裝 , 基於nodejs環境， 從npm全局安裝便可

$ npm install -g localtunnel

2. 開啓本地服務器

$ localhost:8080

開啓本地服務器方法不少種 , 如 apache , nginx , IIS ; 

nodejs  ： express , webpack 構建工具等php : $ php -S localhost:8080laravel : $ php artisan serve 8080python3 : $ python -m http.server 8080python2 :  $ python -m SimpleHTTPServer 8080複製代碼

3.  開啓localtunnel服務

    1）指定的端口號 --port 8000 必須與 localhost的8000相對應

    2）--subdomain mitu : 指定前綴爲 mitu

    3） lt 爲localtunnel 縮寫

4. 最後, 在外網瀏覽器輸入 https://mitu.localtunnel.me 便可訪問本地的localhost:8000， 須要注意的是，localtunnel的服務器是國外，有時候訪問可能不太理想

natapp （國內網站）

官網： natapp.cn/  , 進入官網後註冊帳號登陸

1.  進入用戶中心

2. 能夠購買不一樣的隧道，有不一樣的功能， 如綁定本身的域名，都有詳細介紹., 簡單的測試建議使用免費隧道。 購買隧道後在「個人隧道」有詳細信息，注意authtoken，一會配置客戶端時使用, 

3. 最右邊進入「配置」， 可配置指定的端口，默認80

4. 下載 客戶端軟件, 根據本身實際需求下載

5. 下載後解壓縮獲得 natapp.exe文件， 還需下載config.ini文件natapp.cn/article/con… ，將config.ini和natapp.exe放在同個目錄 , 並打開config.ini 添加authtoken (購買時「個人隧道」中的authtoken)

6.  在 natapp.exe 的目錄下命令行運行 $ natapp 

http://i4fdpf.natappfree.cc -> 127.0.0.1:8000， 本地的服務映射到了 http://i4fdpf.natappfree.cc, 外網請求http://i4fdpf.natappfree.cc便可訪問到本地的localhost:8000, 注意此時本地必須開啓一個localhost:8000的服務。

            

    總結： 

1. 兩個工具均須要開啓本地服務， 而後經過對於的端口號（省略時是默認80）映射,

2. localtunnel 配置簡單， 但外國服務器有時候訪問不理想

3. natapp是國內服務器，但配置相對繁瑣