前端內網穿透localtunnel和natapp

修飾發表於2018-06-21

作為前端開發,遠端測試是必不可少的。很多時候為了方便我們往往只做內網測試,即同個區域網內,通過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複製程式碼

前端內網穿透localtunnel和natapp

3.  開啟localtunnel服務

前端內網穿透localtunnel和natapp

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

    2)--subdomain mitu : 指定字首為 mitu

    3) lt 為localtunnel 縮寫

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


natapp (國內網站)

官網: natapp.cn/  , 進入官網後註冊賬號登入

1.  進入使用者中心

前端內網穿透localtunnel和natapp

2. 可以購買不同的隧道,有不同的功能, 如繫結自己的域名,都有詳細介紹., 簡單的測試建議使用免費隧道。 購買隧道後在“我的隧道”有詳細資訊,注意authtoken,一會配置客戶端時使用, 


3. 最右邊進入“配置”, 可配置指定的埠,預設80

前端內網穿透localtunnel和natapp

4. 下載 客戶端軟體, 根據自己實際需求下載

前端內網穿透localtunnel和natapp

5. 下載後解壓縮得到 natapp.exe檔案, 還需下載config.ini檔案natapp.cn/article/con… ,將config.ininatapp.exe放在同個目錄 , 並開啟config.ini 新增authtoken (購買時“我的隧道”中的authtoken)

前端內網穿透localtunnel和natapp

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

前端內網穿透localtunnel和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是國內伺服器,但配置相對繁瑣 



相關文章