如何在 Visual Studio 2022 中搭配使用開發人員通道與 ASP.NET Core 應用程式

Visual Studio 2022 的「開發人員通道」功能可啟用無法直接彼此連線的機器之間的臨機操作連線。 建立 URL，可讓任何具有網際網路連線的裝置在 localhost 上執行時連線至 ASP.NET Core 專案。

使用案例

開發人員通道所啟用的一些案例：

• 在其他裝置上測試 Web 應用程式，例如行動電話和平板電腦。
• 使用外部服務來測試應用程式。 例如，測試和偵錯 Power Platform 連接器、Azure 通訊服務 API 或 Twilio Webhook。
• 讓其他人暫時無法透過網際網路來使用應用程式，以進行簡報，或邀請其他人在 Web 應用程式或 API 上檢閱您的工作。
• 作為其他連接埠轉送方案的替代方案。

必要條件

• 已安裝 ASP.NET 和 Web 開發工作負載的 Visual Studio 2022 17.6 版或更新版本。 您需要登入 Visual Studio，才能建立和使用開發人員通道。 Visual Studio for Mac 中不提供此功能。
• 一或多個 ASP.NET Core 專案。 本文使用具有兩個範例專案的解決方案來示範此功能。

建立通道

若要建立通道：

在 Visual Studio 2022 中，開啟 ASP.NET Core Web 專案，或至少將一個 Web 專案設定為啟動專案的方案。

在偵錯下拉式清單中，選取 [開發人員通道] > [建立通道]。

通道建立對話方塊隨即開啟。

• 選取要用來建立通道的帳戶。 可用來建立通道的帳戶類型包括 Azure、Microsoft 帳戶 (MSA) 和 GitHub。
• 輸入通道的名稱。 此名稱可識別 Visual Studio UI 中的通道。
• 選擇通道類型：持續性或暫存：
  • 每次啟動 Visual Studio 時，暫存通道都會取得新的 URL。
  • 每次啟動 Visual Studio 時，持續性通道都會取得相同的 URL。 如需詳細資訊，請參閱本文稍後的持續性與暫存通道。
• 選擇存取通道所需的驗證。 有下列選項可供使用：
  • 私人：只有建立通道的帳戶才能存取通道。
  • 組織：建立通道之相同組織中的帳戶可以存取通道。 如果針對個人 Microsoft 帳戶 (MSA) 選取此選項，則效果會與選取 [私人] 相同。 不支援 Github 帳戶的組織支援。
  • 公用：不需要驗證。 只有在 Web 應用程式或 API 可供網際網路上的任何人存取時，才選擇此選項。
• 選取 [確定]。

Visual Studio 會顯示通道建立的確認：

通道會出現在偵錯下拉式清單 [開發人員通道] 飛出視窗中：

指定作用中通道

專案或解決方案可以有多個通道，但一次只能使用一個通道。 偵錯下拉式清單中的 [開發人員通道] 飛出視窗可以指定作用中通道。 具有作用中通道時，其會用於 Visual Studio 中所啟動的所有 ASP.NET Core 專案。 通道在選取為作用中之後，除非關閉 Visual Studio，否則都會保持作用中。 在下圖中，[我的暫存通道] 為作用中：

選取飛出視窗中的 [無]，以選擇不使用通道。 重新啟動 Visual Studio 時，預設會回到 [無]。

使用通道

通道為作用中而且 Visual Studio 執行 Web 應用程式時，網頁瀏覽器會開啟至通道 URL，而不是 localhost URL。 通道 URL 看起來會像下列範例：

https://0pbvlk3m-7032.usw2.devtunnels.ms

現在，任何已驗證的使用者都可以在任何其他已連線網際網路的裝置上開啟相同的 URL。 只要專案繼續在本機執行，任何具有網際網路連線的裝置都可以存取正在開發電腦上執行的 Web 應用程式。

針對具有瀏覽器支援的 Web 專案，系統會在每個裝置傳送至通道 URL 的第一個要求上顯示警告頁面：

選取 [繼續] 之後，會將要求路由傳送至本機 Web 應用程式。 針對使用開發人員通道的 API 要求，不會顯示此通知頁面。

使用通道以在手機或平板電腦上進行測試

若要從手機或平板電腦這類外部裝置來測試 Web 應用程式，請導覽至通道 URL。 若要更輕鬆地在外部裝置上重現 URL：

• 在本機電腦的 Edge 瀏覽器中，導覽至通道 URL。
• 在本機電腦的 Edge 瀏覽器中，產生 URL 的 QR 代碼：
  • 選取 URL 列，並出現 QR 代碼按鈕。
  • 選取 [QR 代碼] 按鈕，以產生並檢視 QR 代碼。
• 使用手機或平板電腦來掃描此 QR 代碼，以導覽至 URL。

[開發人員通道] 輸出視窗

若要顯示執行中專案的通道 URL，請在 [顯示輸出來源] 下拉式清單中選取 [開發人員通道]。

此視窗特別適用於預設不會開啟瀏覽器的專案。 例如，使用 Azure 函數時，這可能是探索開發人員通道所使用公用 URL 的最簡單方式。

[開發人員通道] 工具視窗

在 [開發人員通道] 工具視窗中，檢視和管理開發人員通道：

若要開啟 [開發人員通道] 視窗，請在偵錯下拉式清單中選取 [顯示開發人員通道視窗] 功能表選項。 或者，選取 [檢視] > [其他視窗] > [開發人員通道]。

從 [開發人員通道] 視窗中，選取綠色 + 按鈕來建立新的通道。

使用通道右側的紅色 x 按鈕來刪除通道。

通道的操作功能表提供下列選項：

• 清除作用中通道：將通道設定為作用中時顯示 (由左側的核取記號指出)，而這會將其重設，讓解決方案不要使用通道。
• 建立作用中通道：針對未設定為作用中的通道顯示。
• 複製通道存取權杖：適用於使用私人或組織存取權來建立通道而且應用程式是 Web API 的案例。 若要驗證通道，請複製通道存取權杖，並將其貼上為要求中表單 X-Tunnel-Authorization tunnel <TOKEN> 的標頭。 如果未指定此標頭，則會封鎖要求，因為驗證檢查失敗。
• 移除

通道 URL 環境變數

開發人員通道功能可讓您在執行階段以程式設計方式取得專案的通道 URL。 啟動可使用通道的應用程式時，Visual Studio 會建立環境變數 VS_TUNNEL_URL。 VS_TUNNEL_URL 值是用於目前專案的通道 URL。 整合應用程式與外部服務時，VS_TUNNEL_URL 十分有用，其中需要將通道 URL 傳遞至外部服務。

如果將多個 ASP.NET Core 專案設定為在 Visual Studio 中啟動，則正在啟動的應用程式會取得在其之前啟動之任何專案的環境變數。 此變數名稱的模式為 VS_TUNNEL_URL_{ProjectName}，其中 {ProjectName} 是其他專案的名稱。 例如，請考慮此範例，其中顯示兩個設定要啟動的專案：

因為 MyWebApi 高於 MyWebApp，所以會在 MyWebApp 專案之前予以啟動。 啟動 MyWebApi 專案時，會在 VS_TUNNEL_URL 環境變數中收到其通道 URL。 啟動 MyWebApp 專案時，會在 VS_TUNNEL_URL 中收到它自己的通道 URL，並在 VS_TUNNEL_URL_MyWebApi 環境變數中提供其他專案的通道 URL。

為了說明，已將下列醒目提示的程式碼新增至 MyWebApp 中的 Program.cs 檔案：

public class Program
{
    public static void Main(string[] args)
    {
        Console.WriteLine($"Tunnel URL: {Environment.
            GetEnvironmentVariable("VS_TUNNEL_URL")}");
        Console.WriteLine($"API project tunnel URL: {Environment.
            GetEnvironmentVariable("VS_TUNNEL_URL_MyWebApi")}");

啟動 Web 應用程式時，主控台輸出看起來會像下列範例：

Tunnel URL: https://lxm0ltdt-7175.usw2.devtunnels.ms/
API project tunnel URL: https://lxm0ltdt-7042.usw2.devtunnels.ms/
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:7175
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5228
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: C:\DevTunnelsDemo\MyWebApp

如需如何設定多個啟動專案的相關資訊，請參閱如何：設定多個啟動專案。

持續性與暫存通道

持續性通道是在結束並重新啟動 Visual Studio 之後使用相同 URL 的通道。 整合 Web 應用程式與外部服務時，擁有不會變更的 URL 可能十分有用。 例如，實作 GitHub Webhook，或開發 API 以與 Power Platform 應用程式整合。 在這種情況下，您可能需要指定外部服務的回呼 URL。 使用持續性通道時，只需要設定外部服務 URL 一次即可。 使用暫存通道時，每次 Visual Studio 重新啟動時，都必須設定通道 URL。

「持續性」並不表示通道可在未開啟 Visual Studio 時運作。 只有在通道 URL 所連線的 ASP.NET Core 專案正在 Visual Studio 中執行時，通道 URL 才會連線至本機電腦。

開發人員通道 URL 需要短暫運作時，可以使用暫存通道。 例如，與其他人在 Web 應用程式上共用進行中工作，或在外部裝置上測試應用程式。 在某些情況下，最好在每次啟動 Visual Studio 時都取得新的 URL。

另請參閱

下列資源使用開發人員通道功能的早期預覽版本，因此有些資源已過期：

• 在 Visual Studio 中使用開發人員通道以對 Web API 進行偵錯
• ACS 通話自動化和 Azure OpenAI 服務
• 使用 Visual Studio 開發人員通道來處理 Twilio Webhook.