如何将 Visual Studio 2022 中的开发隧道与 ASP.NET Core 应用结合使用

使用 Visual Studio 2022 的开发隧道功能可以在无法直接相互连接的计算机之间建立临时连接。 创建一个 URL,使任何具有 Internet 连接的设备在 localhost 上运行时都可以连接到 ASP.NET Core 项目。

用例

开发隧道支持的一些方案:

  • 在其他设备(如手机和平板电脑)上测试 Web 应用。
  • 使用外部服务测试应用。 例如,测试和调试 Power Platform 连接器Azure 通信服务 APITwilio Webhook
  • 临时提供一个应用,供其他用户通过 Internet 使用,以进行演示或邀请其他用户查看你在 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 项目设为了启动项目的解决方案。

在调试下拉菜单中,选择“开发隧道”>“创建隧道”。

Debug dropdown showing dev tunnels option with Create tunnel selected

此时将打开“隧道创建”对话框。

Dev Tunnel creation dialog.

  • 选择用于创建隧道的帐户。 可用于创建隧道的帐户类型包括 Azure、Microsoft 帐户 (MSA) 和 GitHub。
  • 为隧道输入名称。 此名称在 Visual Studio UI 中标识该隧道。
  • 选择隧道类型“永久”或“临时”:
    • 每次启动 Visual Studio 时,临时隧道都会获得一个新的 URL。
    • 每次启动 Visual Studio 时,永久隧道都会获得同一个 URL。 有关详细信息,请参阅本文后面的永久隧道与临时隧道
  • 选择访问隧道所需的身份验证。 可用选项如下:
    • 专用:该隧道只能由创建它的帐户访问。
    • 组织:该隧道可供与创建它的帐户位于同一组织的帐户访问。 如果为个人 Microsoft 帐户 (MSA) 选择此选项,则效果与选择“专用”相同。 不支持对 Github 帐户的组织支持。
    • 公共:不需要身份验证。 仅当 Internet 中的所有用户都可以安全地访问 Web 应用或 API 时,才选择此选项。
  • 选择“确定”。

Visual Studio 显示隧道创建确认:

Notification of successful tunnel creation.

该隧道显示在调试下拉菜单“开发隧道”浮出控件中:

Debug dropdown Dev Tunnels flyout showing new tunnel.

指定活动隧道

一个项目或解决方案可以有多个隧道,但一次只有一个隧道处于活动状态。 调试下拉菜单中的“开发隧道”浮出控件可以指定活动隧道。 活动隧道用于 Visual Studio 中启动的所有 ASP.NET Core 项目。 将隧道选为活动后,它将保持活动状态,直到 Visual Studio 关闭。 在下图中,“我的临时隧道”处于活动状态:

Debug dropdown showing active tunnel in Dev Tunnels flyout.

通过在浮出控件中选择“无”来选择不使用隧道。 重启 Visual Studio 后,它会默认设置为“无”。

使用隧道

隧道处于活动状态且 Visual Studio 运行 Web 应用时,Web 浏览器将打开隧道 URL 而不是 localhost URL。 隧道 URL 如下例所示:

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

现在,所有经身份验证的用户都可以在其他任何连接了 Internet 的设备上打开同一 URL。 只要项目继续在本地运行,所有连接了 Internet 的设备都可以访问开发计算机上运行的 Web 应用。

对于具有浏览器支持的 Web 项目,从每个设备发送到隧道 URL 的第一个请求上会显示警告页:

Dev tunnels notification page.

选择“继续”后,请求将路由到本地 Web 应用。 对于使用开发隧道的 API 请求,不会显示此通知页面。

使用隧道在手机或平板电脑上进行测试

若要从手机或平板电脑等外部设备测试 Web 应用,请导航到隧道 URL。 若要更轻松地在外部设备上重现 URL,请执行以下操作:

  • 在本地计算机上的 Edge 浏览器中导航到隧道 URL。
  • 在本地计算机上的 Edge 浏览器中生成 URL 的 QR 码:
    • 选择 URL 栏,此时会显示“QR 码”按钮。
    • 选择“QR 码”按钮以生成和查看 QR 码。 QR code with button to create it highlighted.
  • 使用手机或平板电脑扫描此 QR 码以导航到该 URL。

开发隧道输出窗口

若要显示正在运行的项目的隧道的 URL,请在“显示来自以下位置的输出”下拉列表中选择“开发隧道”。

Dev Tunnels output window.

此窗口对于默认情况下不打开浏览器的项目特别有用。 例如,使用 Azure Function 时,若要查明开发隧道正在使用的公共 URL,它可能是最简单的方法。

开发隧道工具窗口

在“开发隧道”工具窗口中查看和管理开发隧道:

Dev Tunnels tool window.

若要打开“开发隧道”窗口,请在调试下拉菜单中选择“显示开发隧道窗口”菜单选项。 或者,选择“查看”>“其他窗口”>“开发隧道”。

在“开发隧道”窗口中,选择绿色的 + 按钮新建隧道。

使用隧道右侧的红色 x 按钮删除隧道。

隧道的上下文菜单提供以下选项:

  • 清除活动隧道:当隧道配置为活动时显示(由左侧的复选标记指示),这会对其进行重置,使解决方案不使用隧道。
  • 设为活动隧道:针对未配置为活动隧道的隧道显示。
  • 复制隧道访问令牌:适用于使用专用或组织访问权限创建隧道且应用是 Web API 的情况。 若要对隧道进行身份验证,请复制并粘贴隧道访问令牌,作为请求中表单 X-Tunnel-Authorization tunnel <TOKEN> 的标头。 如果未指定此标头,则会阻止请求,因为身份验证检查失败。
  • 删除

隧道 URL 环境变量

使用开发隧道功能可以在运行时以编程方式获取项目的隧道 URL。 启动使用隧道的应用时,Visual Studio 会创建环境变量 VS_TUNNEL_URLVS_TUNNEL_URL 值是当前项目所用的隧道的 URL。 将应用与外部服务集成时,VS_TUNNEL_URL 会很有用,因为这种情况下隧道 URL 需要传递给外部服务。

如果多个 ASP.NET Core 项目配置为在 Visual Studio 中启动,则正在启动的应用会为在它之前启动的任何项目获取环境变量。 此变量名称的形式是 VS_TUNNEL_URL_{ProjectName},其中 {ProjectName} 是另一个项目的名称。 例如,考虑以下示例,该示例显示了设为启动的两个项目:

Startup projects selection page showing MyWebApi and MyWebApp both starting, in that order.

由于 MyWebApi 高于 MyWebApp,因此它先于 MyWebApp 项目启动。 MyWebApi 项目启动时会在 VS_TUNNEL_URL 环境变量中收到其隧道 URL。 MyWebApp 项目启动时会在 VS_TUNNEL_URL 中收到自己的隧道 URL,另一个项目的隧道 URL 则在 VS_TUNNEL_URL_MyWebApi 环境变量中。

为了说明,将以下突出显示的代码行添加到了 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。

请参阅

以下资源使用早期预览版的开发隧道功能,因此其中部分资源已过时: