你是否有遇過,想測試一個功能,或是想在不同裝置上測試,卻又要大費周章部署到測試機,你其實可以不用這麼麻煩!
ngrok 可以在本地 localhost 的環境下直接進行測試,重點是 免費版 就夠給我們一般使用
下載 ngrok
首先Install ngrok,依自己的 OS 作業系統選擇檔案
註冊 ngrok 帳號
進入 ngrok 官網,可以用 github 或 google 帳號建立,或是自行建立一個帳號
登入 ngrok 取得 token
直接把 Command Line 複製下來
加入 token
將 Command Line 貼到剛下載的 ngrok.exe
設定完之後會看到自動建立了 ngrok.yml
啟用連到 local 的 web 服務
依本地端的埠號去下指令,如果我的本地是 localhost:4000 那就會是
1 | ngrok http 4000 |
之後就會出現以下畫面
把網址貼到瀏覽器上執行,就會出現你本地端的網站啦~
使用框架時遇到 invalid host header
vue 的解決方式是直接在 vue.config.js 的地方設定 disableHostCheck: true
,就可以開啟囉!
1 | module.exports = { |
使用 React 時,網友也提供了解法
1 | ngrok http 8080 -host-header="localhost:8080" |
記得將 8080 改成自己的 port 號哦!
錯誤: Your account is limited to 1 simultaneous ngrok agent session.
如果出現此錯誤: 他的意思是你使用了一個以上的代理,
當下找不到斷開的方式,最萬能的解法是 重開機 就會好囉😂
結語
有時在檢查網站裝置畫面功能,可能會跟在行動裝置上有不同狀況發生,ngrok 就很適合拿來測試行動裝置上的問題,也不需要一直重複部署,真的很方便呢!如果我的文章有幫助到你,歡迎給我一點鼓勵哦👏👏👏