前端內網穿透localtunnel和natapp

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

localtunnel (國外網)前端

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

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

$ npm install -g localtunnelwebpack

2. 開啓本地服務器nginx

$ localhost:8080laravel

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

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


3.  開啓localtunnel服務express


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

    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.ininatapp.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是國內服務器,但配置相對繁瑣 

相關文章
相關標籤/搜索