Dev Tunnels 將本機服務公開到網路

平時在開發時會在本機上建立類似 localhost:3000 這樣的網頁/服務，但是僅限於本機存取，如果要讓區域網路上的其他裝置存取，還需要了解 IP、防火牆設定等，如果要讓網際網路上的其他裝置/使用者可以存取，很可能還需要處理固定 IP、路由器的連接埠請求轉發等等，對於一個只是想要暫時測試是否可以正常執行的程式來說太麻煩了，所以就有 Tunnel (通道)這樣的工具出現。

Tunnel 這類工具最主要的功能通常都是讓內部本機的服務可以快速的被外部網際網路存取，就像是建立了一個「通道」，將本機服務「轉發」、「暴露」在網路中。目前有許多類似的產品，例如 localhost.run, ngrok, localtunnel, Serveo 等，大多都採取可以短時間使用，長時間或是其他進階功能收費的方式。

而今天要介紹的 Dev Tunnels 則是微軟(Microsoft)官方推出的免費服務，需要有微軟或 GitHub 帳號，內建於 Visual Studio Code 與 Visual Studio 2022 ，並且也可以透過指令快速使用，對於開發和測試來說非常方便。

透過指令使用 Dev Tunnels

安裝

    
winget install Microsoft.devtunnel
    

macOS

    
brew install --cask devtunnel
    

Linux

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

登入

上面有提到需要有微軟或 GitHub 帳號，一開始使用時需要先執行下面的指令登入：

微軟帳號登入：

    
devtunnel user login
    

GitHub 帳號登入：

    
devtunnel user login -g
    

顯示目前登入帳號：

    
devtunnel user show
    

登出：

    
devtunnel user logout
    

建立臨時通道

將本機的 3000 port 暴露到網路上(需要登入才能使用)：

    
devtunnel host -p 3000
    

執行範例：

    
devtunnel host -p 3000
Hosting port: 3000
Connect via browser: https://vn0tttt3-3000.asse.devtunnels.ms
Inspect network activity: https://vn0tttt3-3000-inspect.asse.devtunnels.ms

Ready to accept connections for tunnel: puzzled-cat-cl7xxxx
    

將本機的 3000 port 暴露到網路上，不需要登入就可以使用：

    
devtunnel host -p 3000 --allow-anonymous
    

建立長久通道

    
devtunnel create
    

建立不需要登入就可以使用的通道：

    
devtunnel create -a
    

還有其他附加參數，這裡示範：
使用自訂 ID： ruyut 建立不需要登入就可以使用的通道，描述為：測試通道1

    
devtunnel create ruyut -a -d "測試通道1"
    

註1：ID 不等於網址
註2：測試時發現 ID 只能小寫，不然會出現：Tunnel service error: One or more validation errors occurred

    
devtunnel create
Tunnel ID             : quick-field-p1bgmqf.asse
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-field-p1bgmqf.
    

查看已建立的通道：

    
devtunnel list
    

設定預設通道(要使用的)

    
devtunnel set [通道 ID]
    

增加連接埠映射：

    
devtunnel port create -p 3000
    

查看連接埠映射狀態：

    
devtunnel port list
    

啟動連接：

    
devtunnel host
    

第一次啟動後就會產生連接的網址，在此長久通道過期前通道關閉/重新啟動 連結都不會改變

刪除通道：

    
devtunnel delete [通道ID]
    

參考資料：
GitHub - microsoft/dev-tunnels
Microsoft.Learn - Create and host a dev tunnel
Microsoft.Learn - Dev tunnels command-line reference
Visual Studio Code - Local Port Forwarding
Youtube.Microsoft Developer - Securely test and debug your web apps and webhooks with dev tunnels | OD121