你是否有遇過，想測試一個功能，或是想在不同裝置上測試，卻又要大費周章部署到測試機，你其實可以不用這麼麻煩！
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，就可以開啟囉！

module.exports = {
  devServer: {
     disableHostCheck: true,
   },
};

使用 React 時，網友也提供了解法

1 2	ngrok http 8080 -host-header="localhost:8080" ngrok http --host-header=rewrite 8080

記得將 8080 改成自己的 port 號哦！

錯誤: Your account is limited to 1 simultaneous ngrok agent session.

如果出現此錯誤: 他的意思是你使用了一個以上的代理，
當下找不到斷開的方式，最萬能的解法是 重開機 就會好囉😂

結語

有時在檢查網站裝置畫面功能，可能會跟在行動裝置上有不同狀況發生，ngrok 就很適合拿來測試行動裝置上的問題，也不需要一直重複部署，真的很方便呢！如果我的文章有幫助到你，歡迎給我一點鼓勵哦👏👏👏

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。

Lala Code

ngrok教學-從外部連到localhost執行你的網站