前言#
最近在做畢設的時候需要在移動端進行測試，所說有模擬器，但是做 APP 還是得在真機上體驗一下，才能更好的發現問題所在以及需要優化的地方。然而我又不想讓我的 APP 只局限於局域網內進行使用，也不想為了達成這一目的而租一台伺服器，所以此篇教程就此誕生。
一、ngrok 是什麼？#
ngrok是一款內網穿透工具，所謂內網穿透說直白一點，就是使你電腦的服務能在公網中被訪問到。國內也有很多這類產品，比如花生殼，natapp等等，如果你也想使用 ngrok，請自備科學上網。
二、ngrok 的使用#
在ngrok註冊完成即可得到一串Authtoken Key，ngrok 的使用方法也是極為簡單的，只需要 3 步：
-
下載並解壓對應系統的壓縮包
-
在 ngrok 目錄下執行
ngrok config add-authtoken <authtokenkey> -
在 ngrok 目錄下執行
ngrok http 80即可將本機的 80 端口暴露到公網
運行成功後會得到一個網址 (例如：
https://cd30-23-247-137-82.ngrok.io)，打開這個網址就可以直接訪問到你本機的 80 端口。ngrok 每次運行都會分配一個不同的臨時網址，如果需要一個固定的網址就需要訂閱高級版本。價格是相當的刑！
三、使用 ngrok 的 api 獲取臨時網址並替換到項目中#
雖說每次運行 ngrok 都會給出臨時的網址，不過每次都要手動將鏈接放到項目中，屬實是太麻煩了，所以我們可以通過 ngrok 提供的 api 來將項目中的 baseURL 進行替換。首先需要申請 API Key並記錄 apikey，只需要填入描述即可，沒有任何難度。接著查看官方文檔，官方為我們提供了 6 種語言的 API 庫，我是用的是 Python 的，api 使用的相關教程官方已經寫得非常詳細了我就不在介紹，直接貼出腳本。
#!/usr/bin/env python import ngrok import re,os # construct the api client client = ngrok.Client("填入apikey") public_url = "" # list all ip policies #由於我是Free Plan，所以同時擁有一個臨時網址，所以沒做過多處理 for endpoint in client.endpoints.list(): public_url=endpoint.public_url print(public_url) def updateFile(file,old_str,new_str): with open(file, "r", encoding="utf-8") as f1,open("%s.bak" % file, "w", encoding="utf-8") as f2: for line in f1: f2.write(re.sub(old_str,new_str,line)) os.remove(file) os.rename("%s.bak" % file, file) #替換flutter項目的baseUrl updateFile(r"xxxx/lib/api/request_util.dart", "static const String baseUrl = .*;", 'static const String baseUrl = "%s";' % public_url) #替換管理後台的baseUrl updateFile(r"xxxx/src/boot/axios.js", "baseURL: .*'", "baseURL: '%s'" % public_url)四、運行腳本#
為了使用方便，可以寫兩個腳本來執行 ngrok 和替換項目的 baseURL。
注意：下列腳本都是基於 MacOS 編寫，請根據系統做出相應調整。如果要使用下列 shell 腳本，請將運行腳本放到與 python 文件同一目錄下，並且將 ngrok 路徑寫入到環境變量 Path 中。
ngrok 運行腳本：
#!/bin/zsh ngrok http 8333; #記得將8333改為你的後端項目端口替換 baseURL 運行腳本：
#!/bin/zsh dir=$(dirname $(readlink -f "$0")) python $dir/rebase.py