用途：

跟 ngrok 和 Cloudflare Tunnel 相同，透過一個中繼伺服器取得一個公開的網址，然後對應到本機的開發環境，讓外部的 Internet 網路可以暫時的連結到本機的開發環境，以便完成像 webhook 這一類的開發工作。

前置需求

1、github 帳號或是 microsoft 帳號 (但是我使用 microsoft 帳號出現問題，無法使用)

2、可以運行網站服務的本機開發環境，例如：xampp…，可以讓我們用 http://localhost 連到開發中的網站。

安裝

在 power shell 下，執行

winget install Microsoft.devtunnel

安裝完成後，必須關閉目前的 power shell 視窗，再重新開一個 power sheel ，讓環境變數生效。

操作

登入 Dev Tunnels 服務

# 以 microsoft 帳號登入
# 注意！我沒有成功登入過
devtunnel user login

# 或是以 github 帳號登入
# 這個我試過，OK 的
devtunnel user login -g

登出 github 帳號時，會出現一個網頁，內容如下：

Login complete. You can return to the application. Feel free to close this browser tab.

然後你就可以關掉這個網頁，繼續後續的操作。

啟動本機的網站服務

在這裏我用 laravel 內建的網站伺服器為例，你當然也可以用 xampp，laragon, herd…等其他軟體。

php artisan serve
# 這會讓網站伺服器在 8000 這個 port 上運作
# http://127.0.0.1:8000 或 http://localhost:8000 都可以連上網站

將 Dev Tunnel 對應到本機開發環境

devtunnel host -p 8000 --allow-anonymous

-p 指的是 port，在這個例子中就是 8000

–allow-anonymous 就是開放給任何人使用，無需認證

執行後，會出現類似下列的訊息

Hosting port: 8000
Connect via browser: https://7ms0h0hk.asse.devtunnels.ms:8000, https://7ms0h0hk-8000.asse.devtunnels.ms
Inspect network activity: https://7ms0h0hk-8000-inspect.asse.devtunnels.ms

Ready to accept connections for tunnel: majestic-horse-19slrj8

其中第二行 Connect via browser: 裏面給的 2 個網址：https://7ms0h0hk.asse.devtunnels.ms:8000 和 https://7ms0h0hk-8000.asse.devtunnels.ms 就是你可以給 Internet 上的其他人或是其他網路服務，存取你開發環境的網址。

然後記得別關視窗，這樣就可以透過 Dev Tunnels 給的網址，連結到你本機的開發環境了。

進階操作

目前對我來說，這樣就夠用了，有新的東西再補上來。

問題與解答

1、無法用 microsoft 帳號登入 (20250317)

我在用 microsoft 帳號登入時，出現以下訊息

Context: Missing wamcompat_id_token in WAM case
Tag: 0x20714047 (error code 0) (internal error code 544292935)

但是用 github 帳號登入就 OK，目前還找不到解決之道。

Reference

https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started?tabs=windows

https://learn.microsoft.com/zh-tw/azure/developer/dev-tunnels/get-started?tabs=windows

https://blog.miniasp.com/post/2023/12/25/Port-forwarding-local-services-with-Dev-Tunnels

https://studyhost.blogspot.com/2023/10/devtunnel-webapi.html