Dev-tunnels gebruiken in Visual Studio 2022 met ASP.NET Core-apps

De functie dev tunnels van Visual Studio 2022 maakt ad-hocverbindingen mogelijk tussen computers die niet rechtstreeks verbinding met elkaar kunnen maken. Er wordt een URL gemaakt waarmee elk apparaat met een internetverbinding verbinding kan maken met een ASP.NET Core-project terwijl het wordt uitgevoerd op localhost.

Gebruikssituaties

Enkele van de scenario's die dev tunnels mogelijk maken:

• Test een web-app op andere apparaten, zoals mobiele telefoons en tablets.
• Test een app met externe services. Test en debug Power Platform-connectors, Azure Communication Services-APIs of Twilio-webhooks.
• Maak een app tijdelijk beschikbaar voor anderen via internet, voor een presentatie of nodig anderen uit om uw werk op een web-app of API te controleren.
• Als alternatief voor andere poortdoorsturingoplossingen.

Vereiste voorwaarden

• Visual Studio 2022 versie 17.6 of hoger met de ASP.NET- en webontwikkelingsworkload geïnstalleerd. U moet zijn aangemeld bij Visual Studio om dev tunnels te maken en te gebruiken.
• Een of meer ASP.NET Core-projecten. In dit artikel wordt een oplossing met twee voorbeeldprojecten gebruikt om de functie te demonstreren.

Een tunnel maken

Een tunnel maken:

Open in Visual Studio 2022 een ASP.NET Core-webproject of een oplossing met ten minste één webproject dat is ingesteld als opstartproject.

Selecteer in de vervolgkeuzelijst voor foutopsporing Dev Tunnels>Een tunnel maken.

Het dialoogvenster voor het maken van de tunnel wordt geopend.

• Selecteer het account dat u wilt gebruiken om de tunnel te maken. Accounttypen die kunnen worden gebruikt voor het maken van tunnels zijn Azure, Microsoft-account (MSA) en GitHub.
• Voer een naam in voor de tunnel. Deze naam identificeert de tunnel in de Visual Studio-gebruikersinterface.
• Kies het tunneltype, permanent of tijdelijk:
  • Telkens wanneer Visual Studio wordt gestart, krijgt een tijdelijke tunnel een nieuwe URL.
  • Telkens wanneer Visual Studio wordt gestart, krijgt een permanente tunnel dezelfde URL. Zie Permanente versus tijdelijke tunnels verderop in dit artikel voor meer informatie.
• Kies de verificatie die is vereist voor toegang tot de tunnel. De volgende opties zijn beschikbaar:
  • Privé: de tunnel is alleen toegankelijk voor het account dat deze heeft gemaakt.
  • Organisatie: De tunnel is toegankelijk voor accounts in dezelfde organisatie als degene die hem heeft gemaakt. Als deze optie is geselecteerd voor een persoonlijk Microsoft-account (MSA), is het effect hetzelfde als het selecteren van Privé. Organisatieondersteuning voor Github-accounts wordt niet ondersteund.
  • Openbaar: er is geen verificatie vereist. Kies deze optie alleen als het veilig is om de web-app of API toegankelijk te maken voor iedereen op internet.
• Selecteer OK.

Visual Studio geeft een bevestiging weer van het maken van een tunnel:

De tunnel wordt weergegeven in de debug flyout Dev Tunnels:

De actieve tunnel opgeven

Een project of oplossing kan meerdere tunnels hebben, maar slechts één voor één is actief. De flyout Dev Tunnels in de vervolgkeuzelijst voor foutopsporing kan de actieve tunnel opgeven. Wanneer er een actieve tunnel is, wordt deze gebruikt voor alle ASP.NET Core-projecten die zijn gestart in Visual Studio. Zodra een tunnel als actief is geselecteerd, blijft deze actief totdat Visual Studio is gesloten. In de volgende afbeelding is Mijn tijdelijke tunnel actief:

Kies ervoor om geen tunnel te gebruiken door Geen in de flyout te selecteren. Wanneer Visual Studio opnieuw wordt opgestart, wordt deze standaard teruggezet op None.

Een tunnel gebruiken

Wanneer een tunnel actief is en Visual Studio een web-app uitvoert, wordt de webbrowser geopend met een tunnel-URL in plaats van een localhost-URL. De tunnel-URL ziet er als volgt uit:

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

Elke geverifieerde gebruiker kan nu dezelfde URL openen op elk ander apparaat dat is verbonden met internet. Zolang het project lokaal blijft worden uitgevoerd, heeft elk apparaat met een internetverbinding toegang tot de webtoepassing die wordt uitgevoerd op een ontwikkelcomputer.

Voor webprojecten met browserondersteuning wordt een waarschuwingspagina weergegeven op de eerste aanvraag die vanaf elk apparaat naar de tunnel-URL wordt verzonden:

Nadat Doorgaan is geselecteerd, wordt de aanvraag doorgestuurd naar de lokale web-app. Deze meldingspagina wordt niet weergegeven voor API-aanvragen met behulp van dev-tunnels.

Een tunnel gebruiken om te testen op een telefoon of tablet

Als u een web-app wilt testen vanaf een extern apparaat, zoals een telefoon of tablet, gaat u naar de TUNNEL-URL. Om het gemakkelijker te maken om de URL op het externe apparaat te reproduceren:

• Navigeer naar de tunnel-URL in een Edge-browser op de lokale computer.
• Genereer een QR-code naar de URL in de Edge-browser op de lokale computer:
  • Selecteer de URL-balk en de knop QR-code wordt weergegeven.
  • Selecteer de knop QR-code om de QR-code te genereren en weer te geven.
• Scan deze QR-code met een telefoon of tablet om naar de URL te navigeren.

Uitvoervenster Dev Tunnels

Als u de URL van een tunnel van een actief project wilt weergeven, selecteert u Dev Tunnels in de vervolgkeuzelijst Uitvoer weergeven .

Dit venster is vooral handig voor projecten die standaard geen browser openen. Wanneer u bijvoorbeeld met een Azure-functie werkt, is dit mogelijk de eenvoudigste manier om de openbare URL te detecteren die wordt gebruikt door de dev-tunnel.

Dev Tunnels-hulpprogrammavenster

Dev-tunnels weergeven en beheren in het hulpprogrammavenster Dev Tunnels :

Als u het venster Dev Tunnels wilt openen, selecteert u de menuoptie Dev Tunnels-venster weergeven in de vervolgkeuzelijst voor foutopsporing. U kunt ookAndere Windows>Dev Tunnels> selecteren.

Maak in het venster Dev Tunnels een nieuwe tunnel door de groene + knop te selecteren.

Verwijder een tunnel met behulp van de rode x knop rechts van de tunnel.

Het contextmenu voor een tunnel biedt de volgende opties:

• Actieve tunnel wissen: wordt weergegeven wanneer een tunnel is geconfigureerd als actief (aangegeven door het vinkje aan de linkerkant), wordt deze opnieuw ingesteld zodat de oplossing geen tunnel gebruikt.
• Actieve tunnel maken: weergegeven voor tunnels die niet zijn geconfigureerd als actief.
• Token voor tunneltoegang kopiëren: opgegeven voor scenario's waarin een tunnel wordt gemaakt met privé- of organisatietoegang en de app een web-API is. Als u wilt authenticeren voor de tunnel, kopieert en plakt u het tunneltoegangstoken als een header in het formaat X-Tunnel-Authorization tunnel <TOKEN> in de aanvraag. Als deze header niet is opgegeven, wordt de aanvraag geblokkeerd omdat de verificatiecontrole is mislukt.
• verwijderen

Omgevingsvariabelen voor tunnel-URL's

De functie dev tunnels biedt een manier om de tunnel-URL van een project programmatisch op te halen tijdens runtime. Wanneer een app wordt gestart die gebruikmaakt van een tunnel, maakt Visual Studio de omgevingsvariabele VS_TUNNEL_URL. De VS_TUNNEL_URL waarde is de URL voor de tunnel die wordt gebruikt voor het huidige project. VS_TUNNEL_URL kan handig zijn bij het integreren van de app met een externe service, waarbij de tunnel-URL moet worden doorgegeven aan de externe service.

Als er meerdere ASP.NET Core-projecten zijn geconfigureerd om te starten in Visual Studio, krijgt de app die wordt gestart een omgevingsvariabele voor elk project dat eerder is gestart. Het patroon voor deze variabelenaam is VS_TUNNEL_URL_{ProjectName}, waar {ProjectName} is de naam van het andere project. Overweeg bijvoorbeeld twee projecten die binnenkort van start gaan:

Omdat MyWebApi boven MyWebApp staat, wordt deze gestart vóór het Project MyWebApp. Wanneer het MyWebApi-project wordt gestart, ontvangt het de tunnel-URL in de VS_TUNNEL_URL omgevingsvariabele. Wanneer het MyWebApp-project wordt gestart, ontvangt het een eigen tunnel-URL en VS_TUNNEL_URL wordt de tunnel-URL van het andere project opgegeven in de VS_TUNNEL_URL_MyWebApi omgevingsvariabele.

Ter illustratie zijn de volgende gemarkeerde coderegels toegevoegd aan het bestand Program.cs in 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")}");

Wanneer de web-app wordt gestart, ziet de console-uitvoer eruit zoals in het volgende voorbeeld:

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

Raadpleeg Hoe te: Meerdere opstartprojecten instellen voor informatie over het instellen van meerdere opstartprojecten.

Permanente versus tijdelijke tunnels

Een permanente tunnel is een tunnel die dezelfde URL gebruikt nadat Visual Studio is afgesloten en opnieuw is gestart. Het gebruik van een URL die niet verandert, kan handig zijn bij het integreren van een web-app met een externe service. U kunt bijvoorbeeld een GitHub-webhook implementeren of een API ontwikkelen om te integreren met een Power Platform-app. In dergelijke gevallen moet u mogelijk de callback-URL voor de externe service opgeven. Met een permanente tunnel hoeft de URL van de externe service slechts eenmaal te worden geconfigureerd. Met behulp van een tijdelijke tunnel moet de tunnel-URL worden geconfigureerd telkens wanneer Visual Studio opnieuw wordt opgestart.

Persistent betekent niet dat de tunnel werkt wanneer Visual Studio niet is geopend. Een tunnel-URL maakt alleen verbinding met de lokale machine als het ASP.NET Core-project waarmee de tunnel-URL verbinding maakt, wordt uitgevoerd in Visual Studio.

Een tijdelijke tunnel is prima wanneer de URL van de dev-tunnel korte tijd moet werken. U kunt bijvoorbeeld werk in uitvoering delen in een web-app met anderen of een app testen op een extern apparaat. In sommige gevallen kunt u het beste een nieuwe URL ophalen telkens wanneer Visual Studio wordt gestart.

Zie ook

De volgende resources gebruiken een vroege preview-versie van de functie voor dev-tunnels, zodat onderdelen ervan verouderd zijn:

• Dev-tunnels in Visual Studio gebruiken om fouten in uw web-API's op te sporen
• ACS-oproepautomatisering en Azure OpenAI-service
• Visual Studio Dev Tunnels gebruiken om Twilio Webhooks te verwerken.