The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

使用 Dev Tunnels (開發人員通道) 快速打造一個對外公開的測試連結

📅 2023/12/25 08:11 📁 Visual Studio, 介紹好用工具, 網路管理

開發 Webhook 應用程式的時候，最麻煩的地方就是如何讓外部的服務可以連線到你的本機開發環境。除此之外，要讓身邊的手機快速連到你正在開發中的網站，如果能快速建立一個對外公開的連結，且最好是 HTTPS 安全連線的網址，那也會十分方便。今天我要介紹一個微軟官方推出的 Dev Tunnels 服務，它擁有完整的命令列工具，同時也內建於 Visual Studio Code 與 Visual Studio 2022 之中，不但此服務完全免費，還十分容易上手，我們就馬上來看看怎樣使用吧！

A wide banner image featuring a visual metaphor for Dev Tunnels service A bright, modern tunnel of light and data representing a secure connection fr

Dev Tunnels 是什麼？

Dev Tunnels (開發人員通道) 允許開發人員安全地將本機 Web 服務公開到 Internet，還能控制誰有權訪問你的網站或 Web API，並從任何地方輕鬆偵錯您的 Web 應用程式。

這個服務跟 ngrok 或 Cloudflare Tunnel 其實是同樣性質的產品，都是透過一個中繼伺服器，讓你的本機開發環境可以透過一個對外公開的網址，讓 Internet 外部網路可以連線到你的本機開發環境。

使用 Dev Tunnels 服務的好處是，就是他跟微軟的開發工具整合的非常好，在 Visual Studio Code 與 Visual Studio 2022 都有內建這個功能，使用上真的非常方便，你根本不用特別使用命令列工具，就可以在本機開發環境快速建立一個對外公開的測試連結。

如何在 Visual Studio Code 使用 Dev Tunnels

在 VS Code 使用 Dev Tunnels 其實非常簡單，操作上也蠻直覺的，請參考以下步驟進行啟用：

  1. 使用 Dev Tunnels 前先啟動本機開發伺服器

    我以 Angular 為例，輸入 ng serve 啟動開發伺服器，並且在瀏覽器中打開 http://localhost:4200 確認伺服器已經正常運作。

    ng serve

  2. 執行 F1 > Forward a port 命令

    Forward a port

  3. 選擇要轉發的 Port 號碼

    按下 Forward a port 按鈕

    image

    輸入 Port 號碼 4200，按下 Enter 確認

    image

    這樣就設定完成了！

    從下圖你可以看到，你已經建立了一個對外公開的網址，並且可以透過 HTTPS 安全連線的方式連線到你的本機開發環境。按下 Preview in Editor 就可以直接在 Visual Studio Code 中用此網址開啟網站。

    image

如果只是個人要開發測試之用，其實這樣就夠了。但有點要特別注意的地方，就是它有個 Visibility (可視性) 欄位，可以讓你控制這個 Forwarded Address 對外網址的瀏覽權限：

  1. Private (私人連線) [預設值]

    只有你自己可以連線到這個 Forwarded Address 網址！

    你可以嘗試開一個「無痕視窗」連到該網址看看，他會要求你登入 GitHub 帳號才能打開這個網址。因此預設在使用上非常安全，其他人無法任意連線到你的本機開發環境。

    Sign in to GitHub to continue to Dev Tunnels

  2. Public (公開連線)

    如果你想開發的是 Webhook 類型的應用，就比較無法要求對方伺服器要登入才能存取你的 API，這時你就可以把 Visibility (可視性) 設定為 Public (公開連線)，這樣就可以讓任何人都可以連線到你的本機開發環境。

    Port Visibility

還有一點要注意，這個 Dev Tunnels 服務預設會在你的電腦與該服務之間建立好一個 VPN 通道，然後將網路封包轉送到你的電腦，使用者連接 Dev Tunnels 提供的網址時，是使用 HTTPS 加密連線的，但從 Local Proxy 連到你的本機服務時，預設是走 HTTP 非加密連線，這個過程我們稱為 TLS termination 或 SSL offloading。

如果你的本機使用的是 HTTPS 加密連線，目前 Visual Studio Code 內建的功能是無法順利切換成 HTTPS 連線的，你必須使用命令列工具才能順利建立使用 HTTPS 後端服務的連線。我認為這是個 Bug 並已回報到 Unable switch to HTTPS for Local Port Forwarding #201465 這裡。

Change Port Protocol

目前 Visual Studio Code 的功能就這麼簡單，但已經可以應付 90% 的應用場景，如果你想要更多的功能，就必須使用命令列工具了。

如何在 Visual Studio 2022 使用 Dev Tunnels

Visual Studio 2022 內建的 Dev Tunnels 功能比 Visual Studio Code 更強大，功能更多，使用上不能算太難，但跟 Visual Studio Code 比起來使用習慣上不太一樣。

  1. 首先，先建立一個開發人員通道

    開發人員通道

    建立一個開發人員通道

  2. 建立好之後，就跟往常一樣直接按下 F5 或 Ctrl+F5 開啟測試網站，預設就會開啟 Dev Tunnels 轉發的網址了！

    第一次開啟會顯示如下圖畫面，按下 Continue 就能夠繼續！

    image

    如果你的 HTTP Request 的 Accept 標頭設定為 */* 或 application/json 的話，預設也不會顯示這個畫面！

    它背後其實是寫入兩個 Cookies，只要 HTTP 要求有這兩個 Cookies 就不會再次提示這個畫面。

  3. 顯示開發人員通道視窗

    由於 Visual Studio 2022 對於 Dev Tunnels 的支援功能比較多，所以有蠻多東西可以看的，你要先顯示開發人員通道視窗，才能看到更多功能。

    顯示開發人員通道視窗

    你可以點擊「通道 URL」欄位的「檢視」就可以打開瀏覽器，但這個往只要在你按下 F5 或 Ctrl+F5 開啟測試網站後才會出現！

    開發人員通道

    由於 Dev Tunnels 是一項免費服務，為了避免服務被濫用，所以有每月使用量的上限，超過就不能用了，你透過點擊「顯示開發人員通道使用方式限制」查看剩餘的用量剩下多少。

    顯示開發人員通道使用方式限制

    如果真的只是自己測試用的話，一個月 2.0 GB 的頻寬用量其實已經很多了，真的不夠的話，換個帳戶建立開發人員通道即可，每個帳戶都是分開計算的。

    開發人員通道使用方式限制

如何在命令列工具使用 Dev Tunnels

我認為 Dev Tunnels 服務提供的功能真的很多，你在 Visual Studio Code 或 Visual Studio 2022 都沒辦法真正感受到他的強大，如果你想要更多的功能，就必須使用命令列工具了。

先來看看怎麼安裝：

  • Windows

    winget install Microsoft.devtunnel

  • macOS

    brew install --cask devtunnel

  • Linux

    curl -sL https://aka.ms/DevTunnelCliInstall | bash

再來看怎麼使用：

  1. 第一次使用要先登入

    登入 Microsoft Entra ID 或 Microsoft 帳戶

    devtunnel user login

    登入 GitHub 帳號要加上 -g 參數：

    devtunnel user login -g

    若要使用 Device Code 登入，請加上 -d 參數。

    顯示目前登入的帳號：

    devtunnel user show

    登出目前帳號：

    devtunnel user logout

  2. 建立開發人員通道

    快速建立一個 Port 4200 的開發人員通道：

    devtunnel host -p 4200

    你也可以一次建立多個 Port 的開發人員通道：

    devtunnel host -p 3000 4200

    快速建立一個 Port 4200 的開發人員通道，網址需可以匿名連線 (公開網址)：

    devtunnel host -p 4200 --allow-anonymous

    不要使用 TLS Termination，後端服務採用 HTTPS 加密連線：

    devtunnel host -p 8443 --protocol https

    設定開發人員通道會在 2 天後自動到期 (時間到自動斷線)：

    devtunnel host -p 4200 --expiration 2d

使用命令列工具來建立開發人員通道，你可以看到的資訊比較多，我以這個命令為例：

devtunnel host -p 4200 --expiration 2d -a

你會得到以下訊息：

Hosting port: 4200
Connect via browser: https://1blj4ljk.asse.devtunnels.ms:4200, https://1blj4ljk-4200.asse.devtunnels.ms
Inspect network activity: https://1blj4ljk-4200-inspect.asse.devtunnels.ms

Ready to accept connections for tunnel: joyful-mountain-55r3k63

這裡有 3 個連結，第一行 Connect via browser 提供的連結就是可以讓你從外網連線到你本機的網址。

另一個 Inspect network activity 就真的很酷了，他可以幫助你看到所有經過 Dev Tunnels 的網路封包，這個功能在偵錯 Webhook 應用程式時非常有用，你可以看到所有經過 Dev Tunnels 的 HTTP Request 與 HTTP Response，超級實用！

請注意下圖，我可不是按下 F12 開啟開發人員工具喔，而是開啟 Inspect network activity 的網址，連上來之後，任何人透過 Connect via browser 連進來的所有封包，全部都會一五一十的呈現在這裡，偵錯超方便！👍

Inspect network activity - DevTools

如何建立一個長久通道

上面的例子都是建立 Dev Tunnels 的「臨時通道」而已，每次建立時的網址都會變，真的只適合臨時測試之用。Dev Tunnels 其實可以建立「長久通道」，如此一來你就可以固定下測試的網址，並且可以長久使用。以下是建立方式的示範：

  1. 建立一個長久通道

    建立一個開發人員通道：

    devtunnel create

    你會得到以下訊息：

    Welcome to dev tunnels!
CLI version: 1.0.1042+788c4fbe73

By using the software, you agree to
  - the dev tunnels License Terms: https://aka.ms/devtunnels/tos
  - the Microsoft Privacy Statement: https://privacy.microsoft.com/privacystatement

Report issues on GitHub: https://aka.ms/devtunnels/issues
Use 'devtunnel --help' to see available commands or visit: https://aka.ms/devtunnels/docs

Tunnel ID             : quick-dog-nwk0lqp.asse
Name                  :
Description           :
Labels                :
Access control        : {}
Host connections      : 0
Client connections    : 0
Current upload rate   : 0 MB/s (limit: 20 MB/s)
Current download rate : 0 MB/s (limit: 20 MB/s)
Tunnel Expiration     : 30 days

Set default tunnel to quick-dog-nwk0lqp.

    這裡的 quick-dog-nwk0lqp 代表你的長久通道 ID，你可以透過 devtunnel list 查詢你的長久通道 ID。

  2. 替既有的長久通道建立 Port 對應

    devtunnel port create -p 4200 --protocol http

  3. 啟動 Dev Tunnels 開發人員通道

    devtunnel host

其實 Dev Tunnels 的命令列工具還有很多功能，如果你想瞭解更多功能，可以參考官方文件說明。

注意 Host 標頭的特性

由於 Dev Tunnels 是透過一個中繼伺服器，將網路封包轉送到你的電腦，所以你的本機開發環境會看到的 HTTP Request 的 Host 標頭，預設會是 localhost:PORT 為主。這是因為 Dev Tunnels 的設計本意就是幫助你將本機的開發伺服器對外提供測試之用。

但是，如果你的本機服務必須要指定 IP 或網址才能連線的話，就必須要透過 --host-header 參數來指定 Host 標頭的值，例如：

這裡的 --host-header 參數可以設定以下兩種值：

  1. unchanged

    預設會使用 Dev Tunnels 傳入的 Hostname 為主：

    devtunnel host -p 5052 --host-header "unchanged"

  2. 自訂任意 IP 或域名

    devtunnel host -p 5052 --host-header "192.168.100.37"

注意: 以上述範例來說，如果你沒有設定 --host-header 參數時，預設你的本機服務會看到的 Host 標頭是 localhost:5052。

相關連結

留言評論