[Tools] 透過 ngrok 讓外網能連到localhost服務

前台

最近在做金流服務需要設定金流端的回傳網址，但在開發階段只有localhost可用，之前都只能把程式整個寫完之後，部屬到能對外的IIS後才能進行功能測試，而現在發現 ngrok 這個工具，幫助我們也能讓外網連到 localhost 服務，同時針對Visual Studio的IIS Express也可以使用，讓我們還可以在debug環境下進行測試。

ngrok

• 官網: https://ngrok.com
• 官網下載: https://ngrok.com/download
• 官網文件: https://ngrok.com/docs
• 支援Linux、MacOs、Windows…
• 註冊即可使用免費方案，如要更多功能可參考付費方案https://ngrok.com/pricing

免費方案限制

1. 隨機產生URLs/ports對應HTTP/TCP 通道
2. 只能運行一個ngrok
3. 每個 ngrok能建立4個通道
4. 每分鐘最多40個連線數

註冊

到官網註冊(https://dashboard.ngrok.com/user/signup)一組自己的帳號

安裝與設定

登入後再Dashboard可以看到四步驟

1. 根據作業系統環境下載ngrok

2. 解壓縮ngrok.zip

3. 與帳號建立關聯，在解壓縮後的ngrok資料夾開啟命令提示字元(cmd)執行圖中第三步3 Connect your account指令

   ngrok authtoken YourTunnelAuthtoken
   

   亦可從Dashboard左邊選單Auth 取得或重設Your Tunnel Authtoken

   設定完畢可在以下路徑找到ngrok.yml

   • Windows: %userprofile%\.ngrok2
   • Linux : /home/YourUserName/.ngrok2/

4. 接下來就可以開始使用ngrok了

基本使用方式

將本機localhost:56424 開放對外服務

ngrok http 56424

• Web Interface : 管理頁面，可以看到透過ngrok進來的封包內容
• Forwarding (轉發) : 顯示ngrok網址對應本機的網址
  • 以此圖為例，可以透過http://437fe2cf.ngrok.io 或https://437fe2cf.ngrok.io 連結到本機的localhost:56424

如何讓 Visual Studio IIS Express也能對外連線

當我們用IIS Express 執行ngrok http 56424後會發現回傳頁面Bad Request - Invalid Hostname

這時可透過兩種做法來解決此問題

1. (推薦) 使用 Rewriting the Host header 方式，將host header改為localhost
   EX:

   ngrok http -host-header=rewrite localhost:56424
   

   或

   ngrok http -host-header=localhost 56424
   

2. (可參考就好) 第二種方式調整IIS Express applicationhost.config 設定
   • 在VS 2015 以上，到專案資料夾下開啟.vs\config\applicationhost.config (需開啟顯示隱藏檔)
   • 以範例為例，找到Port 56424設定

     <bindings>
         <binding protocol="http" bindingInformation="*:56424:localhost" />
     </bindings>
     

     將其改為

     <bindings>
         <binding protocol="http" bindingInformation="*:56424:*" />
     </bindings>
     

   • 之後在以系統管理員身分開啟Visual Studio並執行IIS Express，亦可解決此問題

Web 服務加密

如不想讓所有人都進入該網址，ngrok也提供加密功能 Password protecting your tunnel

ngrok http -auth="username:password" port

例(帳號:admin 密碼:test port:56424):

ngrok http --auth=admin:test 56424

如IIS Express使用可改為

ngrok http --auth=admin:test -host-header=localhost 56424

如何同時運時多組通道

以上面的作法都是以單一站台為主，假設我們有多組站台(EX:前台、API、後台…)須對外的話，可以透過 Running multiple simultaneous tunnels 方式設定多組通道，免費方案提供給我們建立四組通道這時候就派上用場了。


測試案例
假設有三個站台(IIS Express)

• TestWeb1 : localhost:64411
• TestWeb2 : localhost:64443
• TestWeb3 : localhost:64478

1. 設定ngrok.yml加入tunnels

   tunnels:
     test-web1:
       addr: 64411
       proto: http
       host_header: localhost
       bind_tls: true
     test-web2:
       addr: 64443
       proto: http
       host_header: localhost
       bind_tls: true
     test-web3:
       addr: 64478
       proto: http
       host_header: localhost
       bind_tls: true
   

   addr : 要轉發本機的port或網址
   proto: 通道協定名稱(ex: http, tcp, tls)
   host_header: 重寫標頭
   bind_tls: 建立Https、Http或兩者(ex: true, false, or both)

   這裡bind_tls我設定為true，只建立https。如果都設定為both每組站台就會建立兩組通道，以免費方案這樣就只能設定兩個站台而已

2. 執行ngrok

   ngrok start --all
   

3. 如下圖，就可以看到三個站台都有各自的對外網址
   
   

如有錯誤或建議，歡迎留言指教，謝謝!!
(相關內容如有侵犯隱私或著作權，請協助通知刪除，感謝)