Cómo usar túneles de desarrollo en Visual Studio 2022 con aplicaciones ASP.NET Core

La característica de túneles de desarrollo de Visual Studio 2022 permite conexiones ad hoc entre máquinas que no se pueden conectar directamente entre sí. Se crea una dirección URL que permite que cualquier dispositivo con una conexión a Internet se conecte a un proyecto de ASP.NET Core mientras se ejecuta en localhost.

Casos de uso

Estos son algunos de los escenarios que los túneles de desarrollo hacen posibles:

• Probar una aplicación web en otros dispositivos, como teléfonos móviles y tabletas.
• Probar una aplicación con servicios externos. Por ejemplo, probar y depurar conectores de Power Platform, API de Azure Communication Services o webhooks de Twilio.
• Hacer que una aplicación esté disponible temporalmente para otros usuarios a través de Internet. Esto le permite realizar una presentación o invitar a otros usuarios a revisar su trabajo en una aplicación web o API.
• Ofrecer una alternativa a otras soluciones de reenvío de puertos.

Prerrequisitos

• Versión 17.6 o una posterior de Visual Studio 2022 con la carga de trabajo desarrollo web y ASP.NET instalada. Debe iniciar sesión en Visual Studio para crear y usar túneles de desarrollo. La característica no está disponible en Visual Studio para Mac.
• Uno o varios proyectos de ASP.NET Core. En este artículo se usa una solución con dos proyectos de ejemplo para mostrar la característica.

Creación de un túnel

Para crear un túnel:

En Visual Studio 2022, abra un proyecto web de ASP.NET Core o una solución con al menos un proyecto web establecido como proyecto de inicio.

En la lista desplegable de depuración, seleccione Dev Tunnels (Túneles de desarrollo) >Create A Tunnel (Crear un túnel).

Se abre el cuadro de diálogo de creación del túnel.

• Seleccione la cuenta que se va a usar para crear el túnel. Entre los tipos de cuenta que se pueden usar para crear túneles se incluyen Azure, Cuenta Microsoft (MSA) y GitHub.
• Escriba un nombre para el túnel. Este nombre identifica el túnel en la interfaz de usuario de Visual Studio.
• Elija el tipo de túnel, persistente o temporal:
  • Un túnel temporal obtiene una nueva dirección URL cada vez que se inicia Visual Studio.
  • Un túnel persistente obtiene la misma dirección URL cada vez que se inicia Visual Studio. Para obtener más información, consulte Túneles persistentes frente a temporales más adelante en este artículo.
• Elija la autenticación necesaria para acceder al túnel. Están disponibles las siguientes opciones:
  • Privado: el túnel solo es accesible para la cuenta que lo creó.
  • Organización: el túnel es accesible para las cuentas de la misma organización que la cuenta que lo creó. Si esta opción está seleccionada para una cuenta Microsoft personal (MSA), el efecto es el mismo que si se selecciona Privado. La opción Organización no es compatible con cuentas de GitHub.
  • Público: no se requiere autenticación. Elija esta opción solo si es seguro hacer que la aplicación web o la API sean accesibles para cualquier usuario de Internet.
• Seleccione Aceptar.

Visual Studio muestra la confirmación de la creación del túnel:

El túnel aparece en el control flotante Dev Tunnels (Túneles de desarrollo) de la lista desplegable de depuración:

Especificación del túnel activo

Un proyecto o solución puede tener varios túneles, pero solo uno de ellos está activo de cada vez. El control flotante Dev Tunnels (Túneles de desarrollo) de la lista desplegable de depuración puede especificar el túnel activo. Cuando hay un túnel activo, se usa para todos los proyectos de ASP.NET Core que se inician en Visual Studio. Cuando un túnel se ha seleccionado como activo, permanece activo hasta que se cierra Visual Studio. En la ilustración siguiente, está activo My Temporary Tunnel (Mi túnel temporal):

Para no usar ningún túnel, seleccione Ninguno en el control flotante. Cuando se reinicia Visual Studio, el valor predeterminado es Ninguno.

Uso de un túnel

Cuando un túnel está activo y Visual Studio ejecuta una aplicación web, el explorador web se abre en una dirección URL de túnel, en lugar de en una dirección URL de localhost. La dirección URL de túnel es similar a la del ejemplo siguiente:

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

Ahora cualquier usuario autenticado puede abrir la misma dirección URL en cualquier otro dispositivo conectado a Internet. Mientras el proyecto siga ejecutándose localmente, cualquier dispositivo con conexión a Internet puede acceder a la aplicación web que se ejecuta en un equipo de desarrollo.

En el caso de los proyectos web compatibles con exploradores, se muestra una página de advertencia en la primera solicitud que se envía a la dirección URL de túnel desde cada dispositivo:

Después de seleccionar Continuar, la solicitud se enruta a la aplicación web local. Esta página de notificación no se muestra para las solicitudes de API que usan túneles de desarrollo.

Uso de un túnel para realizar pruebas en un teléfono o tableta

Para probar una aplicación web desde un dispositivo externo como un teléfono o una tableta, vaya a la dirección URL de túnel. Para que sea más fácil reproducir la dirección URL en el dispositivo externo:

• Vaya a la dirección URL de túnel en el explorador Edge del equipo local.
• Genere un código QR para la dirección URL en el explorador Edge del equipo local:
  • Seleccione la barra de direcciones URL. Aparecerá el botón de código QR.
  • Seleccione el botón de código QR para generar y ver el código QR.
• Examine este código QR con un teléfono o una tableta para ir a la dirección URL.

Ventana de salida de túneles de desarrollo

Para mostrar la dirección URL de un túnel de un proyecto en ejecución, seleccione Dev Tunnels (Túneles de desarrollo) en la lista desplegable Show output from (Mostrar resultados de).

Esta ventana es especialmente útil para los proyectos que no abren un explorador de forma predeterminada. Por ejemplo, al trabajar con una función de Azure, esta puede ser la manera más fácil de detectar la dirección URL pública que usa el túnel de desarrollo.

Ventana de herramientas de túneles de desarrollo

Visualice y administre los túneles de desarrollo en la ventana de herramientas Dev Tunnels (Túneles de desarrollo):

Para abrir la ventana Dev Tunnels (Túneles de desarrollo), seleccione la opción de menú Show Dev Tunnels Window (Mostrar la ventana de túneles de desarrollo) en la lista desplegable de depuración. Como alternativa, seleccione Ver>Otras ventanas>Dev Tunnels (Túneles de desarrollo).

Cree un túnel desde la ventana Dev Tunnels (Túneles de desarrollo). Para ello, seleccione el botón verde +.

Para eliminar un túnel, use el botón rojo x situado a la derecha del túnel.

El menú contextual de un túnel proporciona las siguientes opciones:

• Borrar túnel activo: se muestra cuando un túnel está configurado como activo (indicado por la marca de verificación en el lado izquierdo). Esta opción lo restablece para que la solución no use un túnel.
• Crear túnel activo: se muestra para los túneles que no están configurados como activos.
• Copiar token de acceso del túnel: se proporciona para escenarios en los que se crea un túnel con acceso privado u organizativo, y la aplicación es una API web. Para autenticarse para el túnel, copie y pegue el token de acceso del túnel como encabezado del formulario X-Tunnel-Authorization tunnel <TOKEN> en la solicitud. Si no se especifica este encabezado, la solicitud se bloquea al producirse un error en la comprobación de autenticación.
• Remove

Variables de entorno de URL de túnel

La característica de túneles de desarrollo proporciona una manera de obtener la dirección URL de túnel de un proyecto mediante programación en tiempo de ejecución. Cuando se inicia una aplicación que usa un túnel, Visual Studio crea la variable de entorno VS_TUNNEL_URL. El valor VS_TUNNEL_URL es la dirección URL del túnel que se usa para el proyecto actual. VS_TUNNEL_URL puede ser útil al integrar la aplicación con un servicio externo, ya que es necesario pasar la dirección URL de túnel al servicio externo.

Si hay varios proyectos de ASP.NET Core configurados para iniciarse en Visual Studio, la aplicación que se acaba de iniciar obtiene una variable de entorno para todos los proyectos que se iniciaron antes que ella. El patrón de este nombre de variable es VS_TUNNEL_URL_{ProjectName}, donde {ProjectName} es el nombre del otro proyecto. Por ejemplo, considere este ejemplo en el que hay dos proyectos establecidos para iniciarse:

Puesto que MyWebApi está por encima de MyWebApp, se inicia antes que el proyecto MyWebApp. Cuando se inicia el proyecto MyWebApi, recibe su dirección URL de túnel en la variable de entorno VS_TUNNEL_URL. Cuando se inicia el proyecto MyWebApp, recibe su propia dirección URL de túnel en VS_TUNNEL_URL, mientras que la dirección URL de túnel del otro proyecto se proporciona en la variable de entorno VS_TUNNEL_URL_MyWebApi.

Para ilustrarlo mejor, se han agregado las siguientes líneas de código resaltadas al archivo Program.cs en MyWebApp:

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")}");

Cuando se inicia la aplicación web, la salida de la consola es similar a la del ejemplo siguiente:

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

Para obtener información sobre cómo configurar varios proyectos de inicio, consulte Procedimiento para establecer varios proyectos de inicio.

Túneles persistentes frente a temporales

Un túnel persistente es aquel que usa la misma dirección URL después de salir de Visual Studio y reiniciarlo. El hecho de tener una dirección URL que no cambia puede ser útil al integrar una aplicación web con un servicio externo. Por ejemplo, al implementar un webhook de GitHub o desarrollar una API para integrarse con una aplicación de Power Platform. En tales casos, es posible que tenga que especificar la dirección URL de devolución de llamada en el servicio externo. Con un túnel persistente, la dirección URL del servicio externo solo debe configurarse una vez. Con un túnel temporal, la dirección URL de túnel debe configurarse cada vez que se reinicie Visual Studio.

Persistente no significa que el túnel funcione cuando Visual Studio no está abierto. Una dirección URL de túnel se conecta a la máquina local solo si el proyecto de ASP.NET Core al que se conecta la dirección URL de túnel se ejecuta en Visual Studio.

Es adecuado usar un túnel temporal cuando la dirección URL del túnel de desarrollo necesita funcionar durante un período breve. Por ejemplo, al compartir el trabajo en curso en una aplicación web con otros usuarios o probar una aplicación en un dispositivo externo. En algunos casos, puede que sea mejor obtener una nueva dirección URL cada vez que se inicie Visual Studio.

Consulte también

Los siguientes recursos usan una versión preliminar inicial de la característica de túneles de desarrollo, por lo que algunas partes no están actualizadas:

• Uso de túneles de desarrollo en Visual Studio para depurar las API web
• Automatización de llamadas de ACS y servicio Azure OpenAI
• Uso de túneles de desarrollo de Visual Studio para controlar webhooks de Twilio