Schnellstart: Verwenden von Docker mit einer React-Einzelseitenanwendung in Visual Studio

Mit Visual Studio können Sie containerisierte ASP.NET Core-Apps ganz einfach erstellen, debuggen und ausführen, einschließlich der apps mit clientseitigem JavaScript wie React.js Einzelseitenanwendung (Single Page Application, SPA) und veröffentlichen Sie sie in Azure Container Registry, Docker Hub, Azure App Service oder Ihrer eigenen Containerregistrierung. In diesem Artikel wird die Veröffentlichung in Azure Container Registry erläutert.

Voraussetzungen

• Docker Desktop
• Visual Studio 2022 mit installierten Workloads für Webentwicklung, Azure-Tools und/oder plattformübergreifende .NET Core-Entwicklung
• Zum Veröffentlichen in Azure Container Registry ist ein Azure-Abonnement erforderlich. Registrieren Sie sich für eine kostenlose Testversion.
• Node.js
• Für Windows-Container, Windows 10, Version 1809 oder höher, verwenden Sie die Docker-Images, auf die in diesem Artikel verwiesen wird.

Installation und Einrichtung

Überprüfen Sie bei der Docker-Installation zunächst die Informationen unter Docker Desktop für Windows: Was Sie wissen sollten, bevor Sieinstallieren. Installieren Sie als Nächstes Docker Desktop.

Erstellen eines Projekts und Hinzufügen der Docker-Unterstützung

Führen Sie die folgenden Schritte aus, wenn Sie Visual Studio 2022, Version 17.8 oder höher, verwenden:

1. Erstellen Sie ein neues Projekt mithilfe der Vorlage React und ASP.NET Core.

   

2. Wählen Sie auf dem Bildschirm Zusätzliche Informationen die Option Containerunterstützung aktivieren aus. Wählen Sie unbedingt Dockerfile Option aus, da Sie änderungen an dieser Datei manuell vornehmen müssen.

   

   Anmerkung

   In einigen Versionen von Visual Studio 2022 ist diese Option nicht aktiviert, Sie können diese Unterstützung aber später hinzufügen.

   Visual Studio erstellt zwei Projekte – eines für den React-JavaScript-Clientcode und einen für den ASP.NET Core C#-Servercode.

3. Wenn Sie während der Projekterstellung keine Docker-Containerunterstützung hinzugefügt haben, klicken Sie mit der rechten Maustaste auf den Serverprojektknoten, und wählen Sie ">Docker Support hinzufügen" aus, und wählen Sie die Dockerfile-Option zum Erstellen einer Dockerfile-Datei aus.

   

4. Wählen Sie den Containertyp aus.

Führen Sie die folgenden Schritte für Visual Studio 2022, Version 17.0 bis 17.7, aus:

1. Erstellen Sie ein neues Projekt mithilfe der ASP.NET Core mit React.js Vorlage.

   

2. Im Bildschirm Zusätzliche Informationen ist keine Auswahl von Docker-Unterstützung aktivieren möglich, Sie können die Unterstützung jedoch später hinzufügen.

   

3. Klicken Sie mit der rechten Maustaste auf den Projektknoten, und wählen Sie "Hinzufügen>Docker Support" aus, um Ihrem Projekt eine Dockerfile-Datei hinzuzufügen.

   

4. Wählen Sie den Containertyp aus.

Debuggen

Mit Visual Studio 2022, Version 17.9 oder höher und der vorlage React und ASP.NET Core, die vite.jsverwendet, sind die Projekte bereits so konfiguriert, dass sowohl die Client- als auch die Serverprojekte mit Debugunterstützung gestartet werden. Sie müssen jedoch den richtigen Port für den Spa-Proxy (Single-Page Application) einrichten, um auf den im Container ausgeführten ASP.NET Core-Server zuzugreifen. Sie können den Hostport aus dem Fenster Container in Visual Studio abrufen und im React-Projekt festlegen, wie in Erstellen einer React-App – Dockerbeschrieben.

Sie können auch den Start im Browser für den Server deaktivieren, der für das Öffnen mit Swagger eingerichtet ist, was für dieses Szenario nicht erforderlich ist. Um den Browserstart zu deaktivieren, öffnen Sie die Eigenschaften (Alt+Eingabe), wechseln Sie zur Registerkarte Debuggen, und klicken Sie auf den Link Öffnen der Benutzeroberfläche von Debugstartprofilen, und deaktivieren Sie das Kontrollkästchen Browser starten.

Wenn Sie eine frühere Version von Visual Studio 2022 verwenden, lesen Sie weiter, um das Debuggen mit dem Spa-Proxyserver (Single Page Application) einzurichten.

Das Projekt verwendet den SPA-Proxy beim Debuggen. Siehe Verbesserte SPA-Vorlagen (Single-Page-Webanwendungen). Beim Debuggen wird der JavaScript-Client auf dem Hostcomputer ausgeführt, der ASP.NET Core-Servercode wird jedoch im Container ausgeführt. Bei der Veröffentlichung wird der Proxy nicht ausgeführt, und der Clientcode wird auf demselben Server wie der ASP.NET Core-Code ausgeführt. Sie verfügen bereits über ein Debugprofil *Docker, mit dem Sie den Servercode debuggen können. Zum Debuggen des JavaScript-Clientcodes können Sie ein zusätzliches Debugprofil erstellen. Sie müssen den Proxy auch manuell über eine Eingabeaufforderung starten, wenn Sie JavaScript debuggen. Sie können es über mehrere Debugsitzungen weiterlaufen lassen.

1. Erstellen Sie das Projekt, sofern es noch nicht bereits erstellt ist.

2. Öffnen Sie eine Visual Studio-Entwickler-Eingabeaufforderung, wechseln Sie zum ClientApp-Ordner in Ihrem Projekt, und geben Sie dann den Befehl, npm run start. Sie sollten etwa folgendes sehen:

   Compiled successfully!
   
   You can now view project3_spa in the browser.
   
     Local:            https://localhost:44407
     On Your Network:  https://192.168.1.5:44407
   
   Note that the development build isn't optimized.
   To create a production build, use npm run build.
   
   webpack compiled successfully
   

   Anmerkung

   Notieren Sie sich die lokale URL. Sie müssen dies in einem Debugstartprofil angeben, das in Ihrer launchSettings.json-Datei gespeichert ist.

3. Öffnen Sie die Dropdown-Liste, die die Debugprofile enthält (neben dem grünen Dreieckssymbol oder der Schaltfläche „Start“), und wählen Sie {ProjectName} Debug-Eigenschaften, dann das Profil Docker aus.

4. Überprüfen Sie den Abschnitt Umgebungsvariablen, und fügen Sie die folgenden Umgebungsvariablen hinzu, falls noch nicht vorhanden:

   ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy

5. Legen Sie die -URL- auf https://localhost:{proxy-port} fest, wobei {proxy-port} der Port vom Proxyserver ist (aus Schritt 1).

   

   Diese Aktion ändert den Docker-Eintrag in der launchSettings.json-Datei und startet die richtige URL für den lokalen Proxy, der auf dem Host ausgeführt wird. Suchen Sie die launchSettings.json-Datei im Projektmappen-Explorer unter Eigenschaften.

6. Sie sollten etwa den folgenden Code sehen:

   "profiles": {
      "Docker": {
         "commandName": "Docker",
         "launchBrowser": true,
         "environmentVariables": {
           "ASPNETCORE_ENVIRONMENT": "Development",
           "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
         },
         "launchUrl": "https://localhost:44407",
         "useSSL": true
      }
   }
   

   Wichtig

   Legen Sie die Starteinstellungsoption publishAllPorts nicht auf true fest, wenn Sie einen Proxy verwenden. Diese Option veröffentlicht alle verfügbar gemachten Ports für einen zufälligen Port, der nicht funktioniert, wenn Sie einen bestimmten Port im SPA-Proxy festlegen.

7. Öffnen Sie die Datei ClientApp/src/setupProxy.js, und ändern Sie die Zeile, die das Ziel festlegt, um die localhost Adresse und den Port für den Container zu verwenden. Sie finden den Port auf der Registerkarte Ports im Fenster Container.

   const target =  'https://localhost:{container-port}';
   

   Wenn Sie HTTPS verwenden, wählen Sie unbedingt den richtigen Port für HTTPS aus, der in diesem Lernprogramm 443 ist.

8. Starten Sie die App mit Debugging (F5).

   

   Wenn beim Versuch, die Ausgabeassemblys zu schreiben, ein Buildfehler auftritt, müssen Sie möglicherweise einen zuvor ausgeführten Container beenden, um die Dateien zu entsperren.

9. Stellen Sie sicher, dass Sie in clientseitigem JavaScript-Code einen Haltepunkt erreichen können, indem Sie einen Haltepunkt in ClientApp/src/components/Counter.js in der Funktion incrementCounter festlegen und dann versuchen, den Haltepunkt zu erreichen, indem Sie auf der Seite „Zähler“ auf die Schaltfläche Erhöhen klicken.

   

10. Versuchen Sie als Nächstes, einen Haltepunkt im serverseitigen ASP.NET Core-Code zu erreichen. Legen Sie einen Haltepunkt in WeatherController.cs in der Get-Methode fest, und versuchen Sie, /weatherforecast an die Basis-localhost anzufügen und die URL zu portieren, um diesen Code zu aktivieren.

    

11. Wenn sich der Containerport ändert, was passieren kann, wenn Sie eine erhebliche Änderung vornehmen, z. B. das Aktualisieren launchSettings.json oder das Aktualisieren des Debugstartprofils in der IDE, müssen Sie den Port in setupProxy.js aktualisieren und auch den Proxy neu starten. Beenden Sie den aktuellen Proxy (STRG+C im Befehlsfenster, in dem er ausgeführt wird), und starten Sie ihn dann mit demselben Befehl npm run startneu.

Fenster „Container“

Öffnen Sie das Toolfenster Container. Sie finden es im Menü unter Ansicht>Andere Fenster>Container, oder drücken Sie STRG+Q und beginnen Sie mit der Eingabe im Suchfeld containers, und wählen Sie dann das Container Fenster aus den Ergebnissen aus. Wenn das Fenster angezeigt wird, docken Sie es am unteren Rand unter dem Editorbereich an.

Im Fenster Container werden die laufenden Container angezeigt, und Sie können Informationen zu ihnen einsehen. Sie können die Umgebungsvariablen, Bezeichnungen, Ports, Volumes, das Dateisystem und Protokolle anzeigen. Mit den Symbolleistenschaltflächen können Sie ein Terminal (Shellaufforderung) innerhalb des Containers erstellen, den Debugger anfügen oder nicht verwendete Container löschen. Weitere Informationen finden Sie unter Verwenden des Fensters „Container“.

Klicken Sie auf die Registerkarte Dateien, und erweitern Sie den Ordner app, um Ihre veröffentlichten Anwendungsdateien anzuzeigen.

Sie können die Bilder auch anzeigen und Informationen zu ihnen überprüfen. Wählen Sie die Registerkarte "Bilder" aus, suchen Sie die Registerkarte "Bilder" für Ihr Projekt, und wählen Sie dann die Registerkarte Details aus, um eine JSON-Datei anzuzeigen, die Informationen zu einem Bild enthält.

Anmerkung

Das dev-Image enthält weder die Binärdateien der App noch andere Inhalte, da die Debugkonfigurationen die Volumebereitstellung nutzen, um die iterativen Bearbeitungs- und Debugfunktionen bereitzustellen. Verwenden Sie zum Erstellen eines Produktionsimages, das alle Inhalte enthält, die konfiguration Release.

Veröffentlichen von Docker-Images

Sobald der Entwicklungs- und Debugzyklus der App abgeschlossen ist, können Sie ein Produktionsbild der App erstellen.

1. Ändern Sie die Dropdownliste der Konfiguration in Release-, und erstellen Sie die App.

2. Klicken Sie mit der rechten Maustaste auf Ihr Projekt im Projektmappen-Explorer, und wählen Sie Veröffentlichenaus.

3. Wählen Sie im Dialogfeld "Veröffentlichungsziel" Docker Container Registryaus.

   

4. Wählen Sie als Nächstes Azure Container Registryaus.

   

5. Wählen Sie Erstellen einer neuen Azure-Containerregistrierungaus.

6. Füllen Sie die gewünschten Werte im Bildschirm Erstellen einer neuen Azure-Containerregistrierung aus.

   Einstellung	Vorgeschlagener Wert	Beschreibung
   DNS-Präfix	Global eindeutiger Name	Der Name, der Ihre Containerregistrierung eindeutig identifiziert.
   Abonnement	Wählen Sie Ihr Abonnement aus	Das zu verwendende Azure-Abonnement.
   Ressourcengruppe	myResourceGroup	Name der Ressourcengruppe, in der Die Containerregistrierung erstellt werden soll. Wählen Sie Neue aus, um eine neue Ressourcengruppe zu erstellen.
   SKU	Norm	Dienstebene der Containerregistrierung
   Registrierungsstandort	Ein Ort in der Nähe von Ihnen	Wählen Sie einen Speicherort in einer Region in Ihrer Nähe oder in der Nähe anderer Dienste aus, die Ihre Containerregistrierung verwenden.

   

7. Klicken Sie auf Erstellen und dann auf Fertig stellen.

   

   Wenn der Veröffentlichungsprozess endet, können Sie die Veröffentlichungseinstellungen überprüfen und bei Bedarf bearbeiten oder das Bild mithilfe der Schaltfläche Veröffentlichen erneut veröffentlichen.

   

   Um erneut mit dem Dialogfeld Veröffentlichen zu beginnen, löschen Sie das Veröffentlichungsprofil mithilfe des Links Löschen auf dieser Seite, und wählen Sie dann Veröffentlichen erneut aus.

Nächste Schritte

Sie können den Container jetzt aus der Registrierung auf jeden Host abrufen, der Docker-Images ausführen kann, z. B. Azure Container Instances.

Weitere Ressourcen

• Containerentwicklung mit Visual Studio
• Problembehandlung bei der Entwicklung von Visual Studio mit Docker
• GitHub-Repository für Visual Studio-Containertools