Ngrok 應用範例與設定指南

  Ngrok 應用範例與設定指南

ngrok 是一個用來建立 安全公開網址 (Public URL) 的工具，適用於： ✅ 本機開發測試 (localhost 曝露到網際網路)
✅ 遠端存取內部伺服器 (SSH / Web / API)
✅ 建立 Webhook 伺服器 (GitHub, Telegram, Stripe, etc.)

---

📌 1️⃣ 安裝 Ngrok

🔹 在 Linux / macOS

使用以下命令透過 Apt 安裝 ngrok：
curl -sSL https://ngrok-agent.s3.amazonaws.com/ngrok.asc \
	| sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null \
	&& echo "deb https://ngrok-agent.s3.amazonaws.com buster main" \
	| sudo tee /etc/apt/sources.list.d/ngrok.list \
	&& sudo apt update \
	&& sudo apt install ngrok

✅ 確認安裝

bash
$ngrok version

🔹 在 Windows

1️⃣ 下載 Ngrok：從 官方網站 下載
2️⃣ 解壓縮並執行 ngrok.exe

---

📌 2️⃣ 設定 Ngrok

📌 註冊 Ngrok 帳號 並取得 Auth Token：
👉 官方網站  => https://ngrok.com/

📌 設定 ngrok 認證

bash
ngrok authtoken YOUR_AUTH_TOKEN

✅ 這樣就能使用 Ngrok 建立安全隧道 (Tunnel)！

---

📌 3️⃣ Ngrok 常見應用

🔹 (1) 曝露本機 localhost 伺服器

📌 如果你的 Web 伺服器運行在 localhost:5000

bash
ngrok http 5000

✅ 會產生一個 https:// 的公開網址

lua
Forwarding   https://random.ngrok.io -> localhost:5000

👉 現在你可以透過 https://random.ngrok.io 存取本機伺服器！

---

🔹 (2) Ngrok 曝露 ROS Websocket

如果你的 ROS Websocket 伺服器 運行在 localhost:9090：

bash
ngrok http 9090

✅ 會生成一個 WebSocket 可用的公開網址

nginx
Forwarding   https://example.ngrok.io -> localhost:9090

👉 可用於遠端連接 ROSBridge (ws://example.ngrok.io)

---

🔹 (3) Ngrok SSH 遠端登入

📌 在遠端電腦 (Server A) 開啟 SSH

bash
ngrok tcp 22

✅ Ngrok 會產生一個 TCP 隧道

nginx
Forwarding   tcp://4.tcp.ngrok.io:12345 -> localhost:22

📌 在本機 (Client B) 連接

bash
ssh user@4.tcp.ngrok.io -p 12345

✅ 你可以遠端登入 Server A，即使它在防火牆後！

---

🔹 (4) 使用固定網域 (付費方案)

Ngrok 免費版的 網址每次重新啟動都會變動，如果想要固定的網域：

bash
ngrok http -subdomain=mycustom ngrok.io 5000

✅ 網址變成：

arduino
https://mycustom.ngrok.io -> localhost:5000

---

📌 4️⃣ 進階應用

🔹 (1) 用於 Webhook 開發

GitHub Webhook 需要 公開網址 (https://)，可用 Ngrok 測試：

bash
ngrok http 3000

✅ Webhook 設定 URL

arduino
https://example.ngrok.io/webhook

🔹 (2) Ngrok 監控 (儀表板)

在 本機開啟 http://localhost:4040

bash
ngrok http 4040

✅ 可以查看請求記錄 & 偵錯！

---

🚀 總結

應用	指令
曝露 localhost Web 伺服器	ngrok http 5000
遠端 SSH 存取	ngrok tcp 22
ROS WebSocket 遠端連接	ngrok http 9090
固定網址 (需付費)	ngrok http -subdomain=mycustom ngrok.io 5000
Webhook 開發測試	ngrok http 3000
監控流量 (localhost:4040)	ngrok http 4040

🚀 Ngrok 是遠端存取與 Webhook 開發的好幫手，讓本機應用輕鬆連接網際網路！ 🚀