Alan Tsai 的學習筆記


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

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

2018-04-30 Monday
[開發工具小技巧][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
台灣 Pay QR Code
台灣 Pay QR Code
Line Pay 一卡通 QR Code
Line Pay 一卡通 QR Code
街口支付QR Code
支付寶QR Code
街口支付QR Code
微信支付QR Code
2018-04-30 Monday
comments powered by Disqus