Table of Contents
用途：
跟 ngrok 和 Cloudflare Tunnel 相同，透過一個中繼伺服器取得一個公開的網址，然後對應到本機的開發環境，讓外部的 Internet 網路可以暫時的連結到本機的開發環境，以便完成像 webhook 這一類的開發工作。
前置需求
1、github 帳號或是 microsoft 帳號 (但是我使用 microsoft 帳號出現問題，無法使用)
2、可以運行網站服務的本機開發環境，例如：xampp…，可以讓我們用 http://localhost 連到開發中的網站。
安裝
在 power shell 下，執行
<span class="line"><span style="color: #D8DEE9FF">winget install Microsoft.devtunnel</span></span>
<span class="line"></span>安裝完成後，必須關閉目前的 power shell 視窗，再重新開一個 power sheel ，讓環境變數生效。
操作
登入 Dev Tunnels 服務
<span class="line"><span style="color: #D8DEE9FF"># 以 microsoft 帳號登入</span></span>
<span class="line"><span style="color: #D8DEE9FF"># 注意！我沒有成功登入過</span></span>
<span class="line"><span style="color: #D8DEE9FF">devtunnel user </span><span style="color: #81A1C1">login</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF"># 或是以 github 帳號登入</span></span>
<span class="line"><span style="color: #D8DEE9FF"># 這個我試過，OK 的</span></span>
<span class="line"><span style="color: #D8DEE9FF">devtunnel user </span><span style="color: #81A1C1">login</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">-</span><span style="color: #D8DEE9FF">g</span></span>登出 github 帳號時，會出現一個網頁，內容如下：
<span class="line"><span style="color: #81A1C1">Login</span><span style="color: #D8DEE9FF"> complete. You can </span><span style="color: #81A1C1">return</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">to</span><span style="color: #D8DEE9FF"> the </span><span style="color: #81A1C1">application</span><span style="color: #D8DEE9FF">. Feel free </span><span style="color: #81A1C1">to</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">close</span><span style="color: #D8DEE9FF"> this browser tab.</span></span>然後你就可以關掉這個網頁，繼續後續的操作。
啟動本機的網站服務
在這裏我用 laravel 內建的網站伺服器為例，你當然也可以用 xampp，laragon, herd…等其他軟體。
<span class="line"><span style="color: #D8DEE9FF">php artisan serve</span></span>
<span class="line"><span style="color: #D8DEE9FF"># 這會讓網站伺服器在 </span><span style="color: #B48EAD">8000</span><span style="color: #D8DEE9FF"> 這個 port 上運作</span></span>
<span class="line"><span style="color: #D8DEE9FF"># </span><span style="color: #81A1C1">http</span><span style="color: #D8DEE9FF">:</span><span style="color: #81A1C1">//</span><span style="color: #B48EAD">127</span><span style="color: #D8DEE9FF">.</span><span style="color: #B48EAD">0</span><span style="color: #D8DEE9FF">.</span><span style="color: #B48EAD">0</span><span style="color: #D8DEE9FF">.</span><span style="color: #B48EAD">1</span><span style="color: #D8DEE9FF">:</span><span style="color: #B48EAD">8000</span><span style="color: #D8DEE9FF"> 或 </span><span style="color: #81A1C1">http</span><span style="color: #D8DEE9FF">:</span><span style="color: #81A1C1">//</span><span style="color: #D8DEE9FF">localhost:</span><span style="color: #B48EAD">8000</span><span style="color: #D8DEE9FF"> 都可以連上網站</span></span>將 Dev Tunnel 對應到本機開發環境
<span class="line"><span style="color: #D8DEE9FF">devtunnel host </span><span style="color: #81A1C1">-</span><span style="color: #D8DEE9FF">p </span><span style="color: #B48EAD">8000</span><span style="color: #D8DEE9FF"> </span><span style="color: #616E88">--allow-anonymous</span></span>-p 指的是 port，在這個例子中就是 8000
--allow-anonymous 就是開放給任何人使用，無需認證
執行後，會出現類似下列的訊息
<span class="line"><span style="color: #D8DEE9FF">Hosting port: </span><span style="color: #B48EAD">8000</span></span>
<span class="line"><span style="color: #81A1C1">Connect</span><span style="color: #D8DEE9FF"> via browser: https:</span><span style="color: #81A1C1">//</span><span style="color: #D8DEE9FF">7ms0h0hk.asse.devtunnels.ms:</span><span style="color: #B48EAD">8000</span><span style="color: #D8DEE9FF">, https:</span><span style="color: #81A1C1">//</span><span style="color: #D8DEE9FF">7ms0h0hk</span><span style="color: #81A1C1">-</span><span style="color: #B48EAD">8000</span><span style="color: #D8DEE9FF">.asse.devtunnels.ms</span></span>
<span class="line"><span style="color: #D8DEE9FF">Inspect network activity: https:</span><span style="color: #81A1C1">//</span><span style="color: #D8DEE9FF">7ms0h0hk</span><span style="color: #81A1C1">-</span><span style="color: #B48EAD">8000</span><span style="color: #81A1C1">-</span><span style="color: #D8DEE9FF">inspect.asse.devtunnels.ms</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D8DEE9FF">Ready </span><span style="color: #81A1C1">to</span><span style="color: #D8DEE9FF"> accept connections </span><span style="color: #81A1C1">for</span><span style="color: #D8DEE9FF"> tunnel: majestic</span><span style="color: #81A1C1">-</span><span style="color: #D8DEE9FF">horse</span><span style="color: #81A1C1">-</span><span style="color: #D8DEE9FF">19slrj8</span></span>其中第二行 Connect via browser: 裏面給的 2 個網址：https://7ms0h0hk.asse.devtunnels.ms:8000 和 https://7ms0h0hk-8000.asse.devtunnels.ms 就是你可以給 Internet 上的其他人或是其他網路服務，存取你開發環境的網址。
然後記得別關視窗，這樣就可以透過 Dev Tunnels 給的網址，連結到你本機的開發環境了。
進階操作
目前對我來說，這樣就夠用了，有新的東西再補上來。
問題與解答
1、無法用 microsoft 帳號登入 (20250317)
我在用 microsoft 帳號登入時，出現以下訊息
<span class="line"><span style="color: #D8DEE9FF">Context: Missing wamcompat_id_token </span><span style="color: #81A1C1">in</span><span style="color: #D8DEE9FF"> WAM </span><span style="color: #81A1C1">case</span></span>
<span class="line"><span style="color: #D8DEE9FF">Tag: 0x20714047 (error code </span><span style="color: #B48EAD">0</span><span style="color: #D8DEE9FF">) (internal error code </span><span style="color: #B48EAD">544292935</span><span style="color: #D8DEE9FF">)</span></span>但是用 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
Comments