Alan Tsai 的學習筆記


學而不思則罔,思而不學則殆,不思不學則“網貸” 記錄軟體開發的點點滴滴 著重於微軟技術、網頁開發、DevOps、C#, Asp .net Mvc、Azure、AI、Chatbot、Docker、Data Science

[開發工具小技巧][05]ngrok讓外部能夠連到localhost的網站及服務

2018-04-30 星期一
[開發工具小技巧][04]ngrok讓外部能夠連到localhost的網站及服務.jpg
圖片來源:https://pixabay.com/en/confused-muddled-illogical-880735/ 

在開發的過程中,有時候會需要從另外一臺機器測試在local的網站及服務。最常見的情況就是當要測試網站在手機上看起來長什麽樣子的時候,或者有時候要讓別人連到自己local的sql serer的時候。

如果說要測試網站,還可以透過上到一臺測試機器,但是如果是local的sql server的話,除了在同一個局域網外比較容易,其他就需要改到路由什麽,太麻煩了。

今天介紹的工具,ngrok,就是讓這一切變得容易的工具,而且很佛心的是,免費版就夠一般使用

ngrok運作模式

本質上ngrok就是一個reverse proxy的工具,透過把local的port map到一個public的地址,讓外部能夠透過這個public地址連到,然後工具用reverse proxy和local實際的port取得資料。

官網的運作示意圖

由於這個過程,因此有個缺點,那就是速度相對較慢,尤其是ngrok的伺服器在美國因此也會減少一些速度。不過如果是爲了開發測試用,這個就不算缺點。

ngrok免費版本提供了一個動態的地址,需要進階功能或者同時map多個服務就需要付費。

ngrok安裝及設定

大概有幾個步奏:

  1. 下載ngrok - 這個工具是一個免安裝的工具,因此建議加入到path比較好執行
  2. 在ngrok 注冊一個免費賬號
  3. 把賬號token設定一下

下載ngrok

ngrok 小檔案

  1. 官網:https://ngrok.com/
  2. 下載地址:https://ngrok.com/download
  3. 費用功能差異:https://ngrok.com/pricing
  4. 支援的OS:Windows、Linux及Mac
  5. Windows建議用Chocolatey安裝:choco install ngrok
在ngrok注冊一個免費賬號
基本上和一般申請賬號方式沒什麽兩樣,鏈接https://dashboard.ngrok.com/user/signup
把賬號token設定一下

注冊完賬號之後,會自動進入dashboard,會看到有個token,把這個設定進去之後當有執行的時候會自動和這個賬號關聯,也可以用web界面看到情況。

chrome_2018-04-30_10-46-59.png
取得auth token的畫面

設定完之後會看到在%userprofile%\.ngrok2\ngrok.yml裏面有這個設定。

powershell_2018-04-30_10-56-22.png
設定完auth token

ngrok的使用

到這步爲止,所有設定都好了,接下來就是開始使用了。

這邊會以幾個情景介紹:

  1. 外部連到local的web服務
  2. 外部連到local的tcp服務

外部連到local的web服務

假設有個服務在port:1234,這個時候可以透過以下指令呼叫:

ngrok http 1234

這個時候就會看到一個外部可以用的網址,用哪個就可以連到。

如果不需要的時候就透過輸入

Ctrl+c
即可

2018-04-30_11-14-16.gif
gif演示使用方式

外部連到local的tcp服務

如果今天是要讓外面連到local的sql server,ngrok也支援tcp的映射。

以sql server爲例,衹需要呼叫:

ngrok tcp 1433

再來使用SSMS做測試連綫即可。

2018-04-30_11-36-14.gif
gif演示使用方式

從上面兩個gif,尤其是tcp測試那個,會明顯感覺到速度有點慢,這個取決於自己的網速(我這邊還有點慢),加上本身在美國點的原因。

要測試前,記得sql server有支援tcp連綫。詳細可以參考我另外一篇:[SQL]為什麼連不到MSSQL資料庫 - 故障排除指南

ngrok的進階使用

上面的介紹足夠一般的使用,不過有時候還會有些進階的應用,這邊介紹3個:

  1. 外鏈的web服務加密
  2. 重寫hostname的方式
  3. 管理/監控呼叫情況

外鏈的web服務加密

有時候給別人測試的鏈接不希望任意的人都能夠開啓,ngrok非常貼心的提供了這個服務。

只需要在mapping的時候加上auth這個參數就可以設定密碼保護。例如:

ngrok http --auth=admin:12345 1234

意思是,賬號要是admin,而密碼是12345 map到 1234 port。

2018-04-30_12-12-33.gif
gif演示效果

重寫hostname的方式

有些服務會使用到hostname的值,這個時候重寫hostname的功能就變得很重要。

可以使用host-header做設定。

這邊的例子用的是在IIS裏面設定只有test.com才會binding到80port,使用的指令就是:

ngrok http --host-header=test.com 80
2018-04-30_12-20-15.gif
gif演示效果

管理/監控呼叫情況

當ngrok執行起來之後,每一個request都會有記錄,可以透過使用command line、連到 localhost:4040

chrome_2018-04-30_12-22-25.png
local界面及command line的監控
  1. 當執行起來之後,會看到外部可以連的網址。
  2. 當有request進來,每一個結果寫在下面,從localhost:4040也可以看到,而且内容比較詳細(右邊的截圖)

結語

這篇介紹了ngrok這個工具,并且如何用ngrok讓local的東西能夠在外部被測試到。

這篇也介紹了如果要保護local的服務,可以用賬號密碼登入的方式避免泄露。如果需要hostname ngrok也有支援。

如果需要一些更深入的功能,例如網址不要變動,那麽可以考慮從free plan升級。

你有在用什麽類似的工具嗎?也歡迎分享交流。


如果文章對您有幫助,就請我喝杯飲料吧
街口支付QR Code
街口支付QR Code
街口支付QR Code
支付寶QR Code
街口支付QR Code
微信支付QR Code
2018-04-30 星期一
comments powered by Disqus