在某些時候,您可能想要向其他人展示您正在進行的專案。幸運的是,有一些很好的工具可以完成這項工作,localhost.run 和 Ngrok。兩者都會建立一個通往您開發伺服器的通道,並(預設情況下)在其各自的伺服器上自動產生一個網際網路位址,以提供給您的客戶或任何您想展示作品的特殊人士。
警告
對外公開您的開發伺服器會帶來安全風險。使用此類工具時務必謹慎。
當您完成示範或測試後,請務必停止 localhost.run 或 ngrok。這將防止任何透過它們對您電腦的未經授權的存取。
使用 Tunnelmole
Tunnelmole 可以在任何安裝 NodeJS 16+ 的機器上運作,並且沒有非 JavaScript 的依賴項。
首先,全域安裝 tunnelmole
套件
$ yarn global add tunnelmole
然後,假設您在埠 80
上執行 quasar,請執行以下命令
$ tmole 80
如果您的埠與 80
不同,請將 80
變更為您的埠。
以下是包含輸出的完整命令
$ tmole 80
http://b8ootd-ip-157-211-195-182.tunnelmole.com is forwarding to localhost:80
https://b8ootd-ip-157-211-195-182.tunnelmole.com is forwarding to localhost:80
如果您自行託管 Tunnelmole 服務,或者您已為官方服務設定 API 金鑰,您可以執行以下命令來使用自訂子網域(同樣,如果您的埠不同,請將 80
替換為您的埠)。
$ tmole 80 as mysubdomain.tunnelmole.com
如果您將 tunnelmole 作為依賴項新增到您的專案中(yarn add --dev tunnelmole
或 npm i --save-dev tunnelmole
或 pnpm/bun 等效命令),也可以從程式碼啟動 tunnelmole
首先匯入 tunnelmole。支援 ES 和 CommonJS 模組。
將 tunnelmole 作為 ES 模組匯入
// import as ESM:
import { tunnelmole } from 'tunnelmole';
// or import as CommonJS module:
const tunnelmole = require('tunnelmole/cjs');
模組匯入後,您可以使用以下程式碼啟動 tunnelmole,如果您的應用程式監聽的埠不同,請將埠 80
變更為您的應用程式監聽的埠。
const url = await tunnelmole({
port: 80
// Optionally, add "domain: 'mysubdomain.tunnelmole.com'" if using a custom subdomain
});
// url = https://idsq6j-ip-157-211-195-169.tunnelmole.com
使用 localhost.run
- 假設您有 SSH shell,您只需要執行以下命令 (並替換成您的詳細資訊)
$ ssh -R 80:localhost:8080 ssh.localhost.run
# In case your development server doesn't run on port 8080 you need to change the number to the correct port
- 就這樣,您現在就會獲得一個隨機的子網域,該子網域會根據您目前的系統使用者名稱指派給您,如下所示
$ ssh -R 80:localhost:8080 ssh.localhost.run
Connect to http://fakeusername-random4chars.localhost.run or https://fakeusername-random4chars.localhost.run
Press ctrl-c to quit.
目前無法要求自訂子網域。
使用 Ngrok
下載並安裝 ngrok 這裡。(請注意,ngrok 可執行檔不需要放置在您的 cordova 資料夾內或從該資料夾執行。在 Mac 上,最好將 ngrok 可執行檔放置在
/usr/local/bin
內,以便能夠全域執行。)啟動您的開發伺服器
$ quasar dev
- 建立您的 ngrok 連線
$ ngrok http 8080
# In case your development server doesn't run on port 8080 you need to change the number to the correct port
- ngrok 會在啟動時於命令列中顯示網址。
Tunnel Status online
Version 2.0/2.0
Web Interface http://127.0.0.1:4040
Forwarding http://92832de0.ngrok.io -> localhost:8080
Forwarding https://92832de0.ngrok.io -> localhost:8080
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
請小心,「轉發 (Forwarding)」網址在連線關閉前,任何人都可以存取。
檢查流量
執行 ngrok 時,請造訪 https://127.0.0.1:4040
以檢查流量。
這個工具允許自訂網域、密碼保護以及更多功能。如果您需要進一步的協助,請參閱 ngrok 文件 以取得更多資訊。