Comment utiliser les tunnels de développement dans Visual Studio 2022 avec les applications ASP.NET Core

Article
11/07/2024

La fonctionnalité de tunnels de développement de Visual Studio 2022 permet des connexions ad hoc entre des machines qui ne peuvent pas se connecter directement les unes aux autres. Une URL est créée pour permettre à tout appareil disposant d’une connexion Internet de se connecter à un projet ASP.NET Core pendant qu’il s’exécute sur localhost.

Cas d’utilisation

Voici quelques-uns des scénarios que les tunnels de développement permettent :

Tester une application web sur d’autres appareils, comme des téléphones mobiles et tablettes.
Tester une application avec des services externes. Par exemple, testez et déboguez des connecteurs Power Platform, des API Azure Communication Services ou des webhooks Twilio.
Mettre temporairement une application à la disposition d’autres utilisateurs sur Internet, pour une présentation ou pour inviter d’autres personnes à passer en revue votre travail sur une application web ou une API.
En guise d’alternative à d’autres solutions de transfert de port.

Prérequis

Visual Studio 2022 version 17.6 ou ultérieure avec la charge de travail Développement web et ASP.NET installée. Vous devez être connecté à Visual Studio pour créer et utiliser les tunnels de développement. Cette fonctionnalité n’est pas disponible dans Visual Studio pour Mac.
Un ou plusieurs projets ASP.NET Core. Cet article utilise une solution avec deux exemples de projet pour illustrer la fonctionnalité.

Créer un tunnel

Pour créer un tunnel :

Dans Visual Studio 2022, ouvrez un projet web ASP.NET Core ou une solution avec au moins un projet web défini comme projet de démarrage.

Dans la liste déroulante de débogage, sélectionnez Tunnels de développement>Créer un tunnel.

Liste déroulante de débogage montrant l’option tunnels de développement avec l’option Créer un tunnel sélectionné

La boîte de dialogue de création de tunnel s’ouvre.

Boîte de dialogue de création du tunnel de développement.

Sélectionnez le compte à utiliser pour créer le tunnel. Les types de comptes qui peuvent être utilisés pour créer des tunnels incluent Azure, les comptes Microsoft (MSA) et GitHub.
Entrez un nom pour le tunnel. Ce nom identifie le tunnel dans l’interface utilisateur de Visual Studio.
Choisissez le type de tunnel, Persistant ou Temporaire :
- Un tunnel temporaire obtient une nouvelle URL chaque fois que Visual Studio est démarré.
- Un tunnel persistant obtient la même URL chaque fois que Visual Studio est démarré. Pour plus d’informations, consultez Tunnels persistants et temporaires plus loin dans cet article.
Choisissez l’authentification requise pour l’accès au tunnel. Les options ci-dessous sont disponibles :
- Privé : le tunnel est accessible uniquement au compte qui l’a créé.
- Organisation : le tunnel est accessible aux comptes de l’organisation qui l’a créé. Si cette option est sélectionnée pour un compte Microsoft personnel (MSA), l’effet est identique à la sélection de Privé. La prise en charge de l’organisation pour les comptes Github n’est pas offerte.
- Public : aucune authentification requise. Choisissez cette option uniquement s’il est sûr de rendre l’application web ou l’API accessible à quiconque sur Internet.
Cliquez sur OK.

Visual Studio affiche la confirmation de la création de tunnel :

Notification de la création de tunnel réussie.

Le tunnel apparaît dans le menu volant de débogage Tunnels de développement :

Menu volant Dev Tunnels de débogage affichant le nouveau tunnel.

Spécifier le tunnel actif

Un projet ou une solution peut avoir plusieurs tunnels, mais un seul à la fois est actif. Le menu volant Tunnels de développement dans la liste déroulante de débogage peut spécifier le tunnel actif. Lorsqu’il existe un tunnel actif, il est utilisé pour tous les projets ASP.NET Core démarrés dans Visual Studio. Une fois qu’un tunnel est sélectionné comme actif, il reste actif jusqu’à ce que Visual Studio soit fermé. Dans l’illustration suivante, My Temporary Tunnel est actif :

Liste déroulante de débogage montrant le tunnel actif dans le menu volant Dev Tunnels.

Choisissez de ne pas utiliser de tunnel en sélectionnant Aucun dans le menu volant. Lorsque Visual Studio est redémarré, il revient par défaut à Aucun.

Utiliser un tunnel

Lorsqu’un tunnel est actif et que Visual Studio exécute une application web, le navigateur web s’ouvre sur une URL de tunnel au lieu d’une URL localhost. L’URL du tunnel ressemble à l’exemple suivant :

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

Désormais, tout utilisateur authentifié peut ouvrir la même URL sur n’importe quel autre appareil connecté à Internet. Tant que le projet continue à s’exécuter localement, tout appareil disposant d’une connexion Internet peut accéder à l’application web qui s’exécute sur une machine de développement.

Pour les projets web qui ont la prise en charge du navigateur, une page d’avertissement s’affiche sur la première requête envoyée à l’URL du tunnel à partir de chaque appareil :

Page de notification des tunnels de développement.

Une fois l’option Continuer sélectionnée, la requête est acheminée vers l’application web locale. Cette page de notification ne s’affiche pas pour les requêtes d’API utilisant des tunnels de développement.

Utiliser un tunnel pour tester sur un téléphone ou une tablette

Pour tester une application web à partir d’un appareil externe comme un téléphone ou une tablette, accédez à l’URL du tunnel. Pour faciliter la reproduction de l’URL sur l’appareil externe :

Accédez à l’URL du tunnel dans un navigateur Edge sur l’ordinateur local.
Générez un code QR pour l’URL dans le navigateur Edge sur l’ordinateur local :
- Sélectionnez la barre d’URL, et le bouton Code QR s’affiche.
- Sélectionnez le bouton Code QR pour générer et afficher le code QR.
Scannez ce code QR avec un téléphone ou une tablette pour accéder à l’URL.

Fenêtre de sortie Tunnels de développement

Pour afficher l’URL d’un tunnel d’un projet en cours d’exécution, sélectionnez Tunnels de développement dans la liste déroulante Afficher la sortie à partir de.

Fenêtre de sortie Dev Tunnels.

Cette fenêtre est particulièrement utile pour les projets qui n’ouvrent pas de navigateur par défaut. Par exemple, lorsque vous utilisez une fonction Azure, il peut s’agir du moyen le plus simple de découvrir l’URL publique utilisée par le tunnel de développement.

Fenêtre de l’outil de tunnels de développement

Affichez et gérez les tunnels de développement dans la fenêtre de l’outil Tunnels de développement :

Fenêtre de l’outil Dev Tunnels.

Pour ouvrir la fenêtre Tunnels de développement, sélectionnez l’option de menu Afficher la fenêtre Tunnels de développement dans la liste déroulante de débogage. Vous pouvez également sélectionner Affichage>Autres fenêtres>Tunnels de développement.

Dans la fenêtre Tunnels de développement, créez un tunnel en sélectionnant le bouton + vert.

Supprimez un tunnel en utilisant le bouton x rouge à droite du tunnel.

Le menu contextuel d’un tunnel fournit les options suivantes :

Effacer le tunnel actif : affiché lorsqu’un tunnel est configuré comme actif (indiqué par la coche sur le côté gauche), cela le réinitialise, de sorte que la solution n’utilise pas de tunnel.
Rendre le tunnel actif : affiché pour les tunnels qui ne sont pas configurés comme actifs.
Copier le jeton d’accès au tunnel : fourni pour les scénarios où un tunnel est créé avec un accès privé ou organisationnel et où l’application est une API web. Pour vous authentifier pour le tunnel, copiez et collez le jeton d’accès au tunnel en tant qu’en-tête de la forme X-Tunnel-Authorization tunnel <TOKEN> dans la requête. Si cet en-tête n’est pas spécifié, la demande est bloquée, car la vérification de l’authentification a échoué.
Remove

Variables d’environnement d’URL de tunnel

La fonctionnalité de tunnels de développement permet d’obtenir l’URL de tunnel d’un projet par programmation au moment de l’exécution. Lorsqu’une application qui utilise un tunnel est lancée, Visual Studio crée la variable d’environnement VS_TUNNEL_URL. La valeur VS_TUNNEL_URL est l’URL du tunnel utilisé pour le projet actuel. VS_TUNNEL_URL peut être utile lors de l’intégration de l’application à un service externe, où l’URL du tunnel doit être transmise au service externe.

Si plusieurs projets ASP.NET Core sont configurés pour démarrer dans Visual Studio, l’application qui démarre obtient une variable d’environnement pour tout projet démarré avant. Le modèle de ce nom de variable est VS_TUNNEL_URL_{ProjectName}, où {ProjectName} est le nom de l’autre projet. Par exemple, prenons l’exemple suivant montrant deux projets définis pour démarrer :

Page de sélection des projets de démarrage montrant MyWebApi et MyWebApp à la fois à partir de cet ordre.

Étant donné que MyWebApi est au-dessus de MyWebApp, il a démarré avant le projet MyWebApp. Lorsque le projet MyWebApi est démarré, il reçoit son URL de tunnel dans la variable d’environnement VS_TUNNEL_URL. Lorsque le projet MyWebApp est démarré, il reçoit sa propre URL de tunnel dans VS_TUNNEL_URL, et l’URL de tunnel de l’autre projet est fournie dans la variable d’environnement VS_TUNNEL_URL_MyWebApi.

À titre d’exemple, les lignes de code en évidence suivantes ont été ajoutées au fichier Program.cs dans 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")}");

Lorsque l’application web est démarrée, la sortie de la console ressemble à l’exemple suivant :

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

Pour plus d’informations sur la configuration de plusieurs projets de démarrage, consultez Guide pratique pour définir plusieurs projets de démarrage.

Tunnels persistants et temporaires

Un tunnel persistant est un tunnel qui utilise la même URL après avoir quitté et redémarré Visual Studio. Avoir une URL qui ne change pas peut être utile lors de l’intégration d’une application web à un service externe. Par exemple, l’implémentation d’un webhook GitHub ou le développement d’une API à intégrer à une application Power Platform. Dans ce cas, vous devrez peut-être spécifier l’URL de rappel sur le service externe. Avec un tunnel persistant, l’URL du service externe ne doit être configurée qu’une seule fois. Avec un tunnel temporaire, l’URL du tunnel doit être configurée chaque fois que Visual Studio redémarre.

Persistant ne signifie pas que le tunnel fonctionne quand Visual Studio n’est pas ouvert. Une URL de tunnel se connecte à l’ordinateur local uniquement si le projet ASP.NET Core auquel l’URL de tunnel se connecte est en cours d’exécution dans Visual Studio.

Un tunnel temporaire convient lorsque l’URL du tunnel de développement doit fonctionner pendant une courte période. Par exemple, le partage du travail en cours sur une application web avec d’autres personnes ou le test d’une application sur un appareil externe. Dans certains cas, il peut être préférable d’obtenir une nouvelle URL chaque fois que Visual Studio démarre.

Voir aussi

Les ressources suivantes utilisent une version préliminaire de la fonctionnalité de tunnels de développement, ainsi certaines d’entre elles sont obsolètes :

Partager via