Freigeben über

Verwenden von Entwicklungstunneln in Visual Studio 2022 mit ASP.NET Core-Apps

  • Artikel

Das Feature Entwicklungstunnel von Visual Studio 2022 ermöglicht Ad-hoc-Verbindungen zwischen Computern, die keine direkte Verbindung miteinander herstellen können. Es wird eine URL erstellt, die es jedem Gerät mit einer Internetverbindung ermöglicht, eine Verbindung mit einem ASP.NET Core-Projekt herzustellen, während es auf Localhost ausgeführt wird.

Anwendungsfälle

Folgende Szenarien werden z. B. durch Entwicklungstunnel ermöglicht:

  • Testen einer Web-App auf anderen Geräten, z. B. Mobiltelefonen und Tablets
  • Testen einer App mit externen Diensten. Sie können beispielsweise Power Platform-Connectors, Azure Communication Services-APIs oder Twilio-Webhooks testen und debuggen.
  • Temporäres Verfügbarmachen einer App für andere Personen über das Internet, z. B. zur Präsentation oder um andere Personen einzuladen, Ihre Arbeit an einer Web-App oder API zu überprüfen
  • Als Alternative zu anderen Portweiterleitungslösungen

Voraussetzungen

  • Visual Studio 2022 Version 17.6 oder höher mit installiertem Workload ASP.NET und Webentwicklung. Sie müssen bei Visual Studio angemeldet sein, um Entwicklungstunnel erstellen und verwenden zu können. Das Feature ist in Visual Studio für Mac nicht verfügbar.
  • Mindestens ein ASP.NET Core-Projekt. In diesem Artikel wird eine Projektmappe mit zwei Beispielprojekten verwendet, um das Feature zu veranschaulichen.

Erstellen eines Tunnels

So erstellen Sie einen Tunnel

Öffnen Sie in Visual Studio 2022 ein ASP.NET Core-Webprojekt oder eine Projektmappe mit mindestens einem Webprojekt, das als Startprojekt festgelegt ist.

Wählen Sie in der Dropdownliste „Debuggen“ die Option Dev-Tunnel für Webanwendungen aktivieren>Tunnel erstellen aus.

Dropdownliste „Debuggen“ mit ausgewählter Option „Entwicklungstunnel“ > „Tunnel erstellen“

Das Dialogfeld zum Erstellen des Tunnels wird geöffnet.

Dialogfeld zum Erstellen des Tunnels

  • Wählen Sie das Konto aus, das zum Erstellen des Tunnels verwendet werden soll. Sie können zum Erstellen von Tunneln folgende Kontotypen verwenden: Azure, Microsoft-Konto (MSA) und GitHub.
  • Geben Sie einen Namen für den Tunnel ein. Dieser Name identifiziert den Tunnel auf der Visual Studio-Benutzeroberfläche.
  • Wählen Sie als Tunneltyp „Persistent“ oder „Temporär“ aus:
    • Ein temporärer Tunnel erhält bei jedem Start von Visual Studio eine neue URL.
    • Ein persistenter Tunnel erhält bei jedem Start von Visual Studio dieselbe URL. Weitere Informationen finden Sie weiter unten in diesem Artikel unter Persistente Tunnel im Vergleich zu temporären Tunneln.
  • Wählen Sie die Authentifizierung aus, die für den Zugriff auf den Tunnel erforderlich ist. Die folgenden Optionen sind verfügbar:
    • Privat: Auf den Tunnel kann nur über das Konto zugegriffen werden, mit dem er erstellt wurde.
    • Organisation: Auf den Tunnel können alle Konten in derselben Organisation wie das Konto zugreifen, mit dem er erstellt wurde. Wenn diese Option für ein persönliches Microsoft-Konto (MSA) ausgewählt wird, ist der Effekt identisch mit der Auswahl von „Privat“. Die Auswahl von „Organisation“ wird für GitHub-Konten nicht unterstützt.
    • Öffentlich: Es ist keine Authentifizierung erforderlich. Wählen Sie diese Option nur aus, wenn es sicher ist, wenn auf die Web-App oder API durch alle Personen im Internet zugegriffen werden kann.
  • Klicken Sie auf OK.

Visual Studio zeigt eine Bestätigung für die Tunnelerstellung an:

Benachrichtigung über die erfolgreiche Tunnelerstellung

Der Tunnel wird in der Dropdownliste „Debuggen“ im Flyout Entwicklungstunnel angezeigt:

Flyout „Entwicklungstunnel“ in der Dropdownliste „Debuggen“ mit dem neuen Tunnel

Angeben des aktiven Tunnels

Ein Projekt oder eine Projektmappe kann mehrere Tunnel umfassen, von denen aber nur einer jeweils aktiv sein kann. Sie können den aktiven Tunnel über das Flyout Entwicklungstunnel im Dropdownliste „Debuggen“ angeben. Wenn ein aktiver Tunnel vorhanden ist, wird er für alle ASP.NET Core-Projekte verwendet, die in Visual Studio gestartet werden. Nachdem ein Tunnel als aktiv festgelegt wurde, bleibt er aktiv, bis Visual Studio geschlossen wird. In der folgenden Abbildung ist My Temporary Tunnel aktiv:

Dropdownliste Debuggen mit aktivem Tunnel im Flyout „Entwicklungstunnel“

Sie können auch festlegen, dass kein Tunnel verwendet wird, indem Sie im Flyout Kein auswählen. Wenn Visual Studio neu gestartet wird, erfolgt standardmäßig eine Zurücksetzung auf Kein.

Verwenden eines Tunnels

Wenn ein Tunnel aktiv ist und Visual Studio eine Web-App ausführt, wird der Webbrowser mit einer Tunnel-URL anstelle der Localhost-URL geöffnet. Die Tunnel-URL sieht wie im folgenden Beispiel aus:

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

Jetzt können alle authentifizierten Benutzer*innen dieselbe URL auf jedem anderen mit dem Internet verbundenen Gerät öffnen. Solange das Projekt weiterhin lokal ausgeführt wird, kann jedes Gerät mit einer Internetverbindung auf die Webanwendung zugreifen, die auf dem Entwicklungscomputer ausgeführt wird.

Für Webprojekte mit Browserunterstützung wird bei der ersten Anforderung an die Tunnel-URL von jedem Gerät eine Warnseite angezeigt:

Benachrichtigungsseite für Entwicklungstunnel

Nachdem Weiter ausgewählt wurde, wird die Anforderung an die lokale Web-App weitergeleitet. Diese Benachrichtigungsseite wird nicht bei API-Anforderungen angezeigt, die Entwicklungstunnel verwenden.

Verwenden eines Tunnels zum Testen auf einem Smartphone oder Tablet

Um eine Web-App von einem externen Gerät wie einem Smartphone oder Tablet aus zu testen, navigieren Sie zur Tunnel-URL. So vereinfachen Sie die Verwendung der URL auf externen Geräten

  • Navigieren Sie auf dem lokalen Computer in Edge zur Tunnel-URL.
  • Generieren Sie in Edge einen QR-Code für die URL auf dem lokalen Computer:
    • Wählen Sie die URL-Leiste aus, um die Schaltfläche für QR-Codes anzuzeigen.
    • Wählen Sie die Schaltfläche für QR-Codes aus, um den QR-Code zu generieren und anzuzeigen. QR-Code mit hervorgehobener Schaltfläche zum Erstellen
  • Scannen Sie diesen QR-Code auf einem Smartphone oder Tablet, um zu dieser URL zu navigieren.

Ausgabefenster für Entwicklungstunnel

Um die URL eines Tunnels für ein ausgeführtes Projekt anzuzeigen, wählen Sie in der Dropdownliste Ausgabe anzeigen von die Option Entwicklungstunnel aus.

Ausgabefenster für Entwicklungstunnel

Dieses Fenster ist besonders nützlich für Projekte, bei denen standardmäßig kein Browser geöffnet wird. Wenn Sie beispielsweise mit einer Azure-Funktion arbeiten, stellt dies möglicherweise die einfachste Möglichkeit dar, die öffentliche URL zu ermitteln, die vom Entwicklungstunnel verwendet wird.

Toolfenster „Entwicklungstunnel“

Sie können Entwicklungstunnel im Toolfenster Entwicklungstunnel anzeigen und verwalten:

Toolfenster „Entwicklungstunnel“

Um das Fenster Entwicklungstunnel zu öffnen, wählen Sie in der Dropdownliste „Debuggen“ die Menüoption Fenster „Entwicklungstunnel“ anzeigen aus. Alternativ können Sie Ansicht>Weitere Fenster>Entwicklungstunnel auswählen.

Erstellen Sie im Fenster Entwicklungstunnel einen neuen Tunnel, indem Sie die grüne +-Schaltfläche auswählen.

Sie löschen einen Tunnel mithilfe der roten x-Schaltfläche rechts neben dem Tunnel.

Das Kontextmenü für einen Tunnel bietet die folgenden Optionen:

  • Aktiven Tunnel löschen: Wird angezeigt, wenn ein Tunnel als aktiv konfiguriert ist (durch das Häkchen auf der linken Seite). Er wird zurückgesetzt, sodass die Lösung keinen Tunnel verwendet.
  • Aktiven Tunnel erstellen: Wird für Tunnel angezeigt, die nicht als aktiv konfiguriert sind
  • Tunnelzugriffstoken kopieren: Bereitgestellt für Szenarios, in denen ein Tunnel mit privatem oder organisationsweitem Zugriff erstellt wird, und die App eine Web-API ist. Um sich für den Tunnel zu authentifizieren, müssen Sie das Tunnelzugriffstoken kopieren und als Header im Format X-Tunnel-Authorization tunnel <TOKEN> in die Anforderung einfügen. Wenn dieser Header nicht angegeben ist, wird die Anforderung blockiert, da die Authentifizierungsprüfung fehlgeschlagen ist.
  • Remove

Tunnel-URL-Umgebungsvariablen

Das Feature „Entwicklungstunnel“ bietet eine Möglichkeit, die Tunnel-URL eines Projekts programmgesteuert zur Laufzeit abzurufen. Wenn eine App gestartet wird, die einen Tunnel verwendet, erstellt Visual Studio die Umgebungsvariable VS_TUNNEL_URL. Der Wert von VS_TUNNEL_URL ist die URL für den Tunnel, der für das aktuelle Projekt verwendet wird. VS_TUNNEL_URL kann bei der Integration der App in einen externen Dienst hilfreich sein, an den die Tunnel-URL übergeben werden soll.

Wenn mehrere ASP.NET Core-Projekte für den Start in Visual Studio konfiguriert sind, erhält die App, die gerade gestartet wird, eine Umgebungsvariable für jedes Projekt, das zuvor gestartet wurde. Das Muster für diesen Variablennamen lautet VS_TUNNEL_URL_{ProjectName}, wobei {ProjectName} der Name des anderen Projekts ist. Das folgende Beispiel zeigt z. B. zwei Projekte, die für den Start festgelegt sind:

Seite zur Auswahl von Startprojekten mit den Projekten MyWebApi und MyWebApp, die in dieser Reihenfolge gestartet werden

Da MyWebApi über MyWebApp steht, wird es vor dem Projekt MyWebApp gestartet. Wenn das Projekt MyWebApi gestartet wird, erhält es seine Tunnel-URL in der Umgebungsvariable VS_TUNNEL_URL. Wenn das Projekt MyWebApp gestartet wird, erhält es seine eigene Tunnel-URL in VS_TUNNEL_URL und die Tunnel-URL des anderen Projekts in der Umgebungsvariable VS_TUNNEL_URL_MyWebApi.

Zur Veranschaulichung wurden in der Datei Program.cs in MyWebApp die folgenden hervorgehobenen Codezeilen hinzugefügt:

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

Wenn die Web-App gestartet wird, sieht die Konsolenausgabe wie im folgenden Beispiel aus:

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

Weitere Informationen zum Einrichten mehrerer Startprojekte finden Sie unter Festlegen mehrerer Startprojekte.

Persistente Tunnel im Vergleich zu temporären Tunneln

Ein persistenter Tunnel verwendet nach dem Beenden und Neustarten von Visual Studio dieselbe URL weiter. Eine unveränderliche URL kann bei der Integration einer Web-App in einen externen Dienst nützlich sein. Beispiele wären das Implementieren eines GitHub-Webhooks oder das Entwickeln einer API zur Integration in eine Power Platform-App. In solchen Fällen müssen Sie möglicherweise eine Rückruf-URL für den externen Dienst angeben. Bei einem persistenten Tunnel muss die URL für den externen Diensts nur einmal konfiguriert werden. Bei Verwendung eines temporären Tunnels muss die Tunnel-URL bei jedem Neustart von Visual Studio erneut konfiguriert werden.

Persistent bedeutet nicht, dass der Tunnel auch dann funktioniert, wenn Visual Studio nicht geöffnet ist. Eine Tunnel-URL stellt nur dann eine Verbindung mit dem lokalen Computer her, wenn das ASP.NET Core-Projekt, mit dem die Tunnel-URL eine Verbindung herstellt, in Visual Studio ausgeführt wird.

Ein temporärer Tunnel bietet sich an, wenn die Entwicklungstunnel-URL nur eine kurze Zeit funktionieren muss. Beispiele hierfür sind das Teilen der laufenden Arbeit an einer Web-App mit anderen Personen oder das Testen einer App auf einem externen Gerät. In einigen Fällen ist es möglicherweise am besten, bei jedem Start von Visual Studio eine neue URL zu erhalten.

Weitere Informationen

In den folgenden Ressourcen wird eine frühe Vorschauversion des Features „Entwicklungstunnel“ verwendet, sodass Teile davon veraltet sind: