Ngrok — 在本機也可以起https!

想必大家在開發的時候曾經遇過下面幾種情境

情境 1

想要 DEMO 開發到一半的專案給客戶看,但沒辦法把半成品部署到正式環境,客戶也看不到你的 localhost…

情境 2

有時候在串接第三方登入或金流時都會要求 callback url 是 https,但是在本地開發就只有 http 可以用,那該怎麼辦呢? 直接推上正式環境就有 https 啦(大誤

情境 3

在本機開發時想用手機看一下畫面,但手機連的是行動網路不是公司內網,所以什麼都看不到

這時候就是 ngrok 登場的時候了!ngrok 的概念有點像是建立一個臨時的伺服器,讓外網也可以直連我們的本機,生成的網址也支援 https,所有的疑難雜症一併解決!

ngrok 的使用

因為我是用 Mac 開發,所以使用 brew 來安裝,其他作業系統的安裝方式可以參考這裡

Step.1

1
brew install ngrok/ngrok/ngrok

Step.2

記得先在官網註冊取得 token,並且執行

1
ngrok config add-authtoken <token>

Step.3

設定完 token 之後就可以開始使用 ngrok 的服務,假設我們在本地起的專案是 3000 就可以執行下面的指令

1
ngrok http 3000

成功之後就會看到 https 的 URL 了,實際測試網址可以被外部訪問沒問題,近期才知道有 ngrok 這麼好用的服務,真是相見恨晚啊!