2016-12-19

使用 ngrok 讓本機上的網站可以被全世界看到

這個 title 會不會下得太過火?!

回到主要目的,您一定有過這樣的經驗:想測試個功能,卻要大費周章地將程式部署到測試機、發揮創意做的小東西都沒有對外公開的 host 環境可以測試,即使是使用雲端,也是需要經過一些申請跟部署,加上費用也是考量的因素之一,而常常花在這些零碎工作的時間可能都比真正開發的時間要長。

現在我們可以使用 ngrok 這個服務來解決問題:我們可以將自己電腦上的網站透過 ngrok 的對應,讓其他人可以透過 ngrok 提供的網址來瀏覽原本只存在本機上的網站。

看完說明有沒有覺得是個好東西,就讓我們馬上開始吧


1. 如何開始

A. 下載 直接至 下載點 下載對應 os 的版本

1download

B. 解壓縮

如果連網需要透過 proxy 才需要進行下列步驟

2noconnect

  1. 先執行下列指令會自動建立 configuration 檔案 ngrok authtoken 4nq9771bPxe8ctg7LKr_2ClH7Y15Zqe4bWLWF9p

  2. authtoken 需經由註冊取得

  3. 設定 proxy

如果連網需要透過 proxy 才需要進行上述步驟

2. 執行

ngrok http port

e.g. ngrok http 80 表示使用 http 80 port

  • 預設同時啟用 httphttps

    4enabletunnel

3. 取得可連線的 url

A. ngrok >5accessurl

B. Web Interface

  • 服務開啟後,預設會建立 Web Interface 來提供相關資訊
  • 預設是 http://127.0.0.1:4040/

    6accessurl

4. 即時偵測網站資源被呼叫狀況

會列出網站相關資料被存取的紀錄,及使用的 http verb

A. ngrok >7request

B. Web Interface >8request

5. 檢視 request 及 response 細節

  • 可以確認收到的 header 與 body 是否正確

    10requestresponse

6. 重新執行 request

9replay

7. 加上網址存取密碼

ngrok http -auth="username:password" 80
  • 設定帳號密碼,加強資安控管

    11password

8. 其他一堆設定......

請大家上 ngrok 文件 更深入了解

結果

可以由 ngrok 動態提供的 url access,結果與 localhost 網站完全相同

12result

參考資料

  1. ngrok 官網
  2. ngrok 文件

沒有留言:

張貼留言