Schnellstart: Verwenden von Docker mit einer React-App mit einer einzigen Seite in Visual Studio

Mit Visual Studio können Sie ganz einfach containerisierte ASP.NET Core-Apps erstellen, debuggen und ausführen, einschließlich solcher mit clientseitigem JavaScript, wie z.B. React.js Single-Page-Apps, und diese in Azure Container Registry, Docker Hub, Azure App Service oder Ihrer eigenen Containerregistrierung veröffentlichen. 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, um die Docker-Images zu verwenden, auf die in diesem Artikel verwiesen wird.

Installation und Einrichtung

Lesen Sie vor der Installation von Docker zunächst Docker Desktop for Windows: What to know before you install (Docker Desktop für Windows: Was vor der Installation zu beachten ist). Installieren Sie anschließend 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 unter Verwendung der Vorlage React and ASP.NET Core.

   

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

   .

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

3. Klicken Sie mit der rechten Maustaste auf den Serverprojektknoten, und wählen Sie Hinzufügen>Docker-Unterstützung aus, um dem Projekt ein Dockerfile hinzufügen.

   

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 unter Verwendung der Vorlage ASP.NET Core mit React.js ein neues Projekt.

   

2. Im Bildschirm Zusätzliche Informationen ist keine Auswahl von Docker-Unterstützung aktivieren nicht 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-Unterstützung aus, um Ihrem Projekt ein Dockerfile hinzufügen.

   

4. Wählen Sie den Containertyp aus.

Der nächste Schritt ist je nachdem, ob Sie Linux-oder Windows-Container verwenden, unterschiedlich.

Ändern der Dockerfile (Linux-Container)

Eine Dockerfile-Datei, der wichtigste Bestandteil beim Erstellen eines endgültigen Docker-Images, wird im Projekt erstellt. Verweisen Sie auf einen Dockerfile-Verweis, damit Sie einen Überblick über die darin enthaltenen Befehle erlangen.

Die Standardmäßige Dockerfile verwendet ein Basisimage zum Ausführen des Containers. Wenn Sie aber auch eine Node.js-Anwendung darauf ausführen möchten, müssen Sie Node.js installieren. Das bedeutet, dass einige Installationsbefehle an einigen Stellen in der Dockerfile-Datei hinzugefügt werden müssen. Die Installationsbefehle erfordern Administratorberechtigungen, da sich die Änderungen auf die privilegierten Systemdateien und Ordner des Containers auswirken.

Wenn das Kontrollkästchen Für HTTPS konfigurieren des Dialogfelds „Neues Projekt“ aktiviert ist, stellt die Dockerfile zwei Ports zur Verfügung. Ein Port wird für den HTTP-Datenverkehr, der andere für HTTPS verwendet. Wenn das Kontrollkästchen nicht aktiviert ist, wird ein einzelner Port (80) für HTTP-Datenverkehr zur Verfügung gestellt.

Wenn Sie auf .NET 8 oder höher abzielen, verwendet die von Visual Studio erstellte Dockerfile-Datei standardmäßig das normale Benutzerkonto (suchen Sie nach der Zeile USER app). Dieses Konto verfügt jedoch nicht über die zum Installieren von Node.js erforderlichen Administratorberechtigungen. Gehen Sie wie folgt vor, um dieser Situation Rechnung zu tragen:

1. Löschen Sie in der Dockerfile-Datei die Zeile USER app.
2. Ändern Sie die Ports, die im ersten Abschnitt der Dockerfile-Datei verfügbar gemacht werden, in Port 80 für HTTP-Anforderungen und (wenn Sie beim Erstellen des Projekts sich entschieden haben, HTTPS zu unterstützen) in Port 443 für HTTPS-Anforderungen.
3. Bearbeiten Sie launchSettings.json, um die Portverweise in 80 und 443 zu ändern. Ersetzen Sie für HTTP 8080 durch 80 und für HTTPS 8081 durch 443.

Führen Sie für alle .NET-Versionen die folgenden Schritte aus, um die Dockerfile-Datei zur Installation von Node.js zu aktualisieren:

1. Fügen Sie die folgenden Zeilen hinzu, um curl, Node.js 14.x und bestimmte erforderliche Node-Bibliotheken im Container zu installieren. Achten Sie darauf, dass diese Zeilen beide im ersten Abschnitt eingefügt werden, um die Installation von Node Package Manager (npm.exe) dem Basisimage sowie im build-Abschnitt hinzuzufügen.

RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs

Das Dockerfile sollte in etwa wie folgt aussehen:

#See https://aka.ms/customizecontainer to learn how to customize your debug container and how Visual Studio uses this Dockerfile to build your images for faster debugging.

FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs

FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs
ARG BUILD_CONFIGURATION=Release
WORKDIR /src
COPY ["reactapp1.client/nuget.config", "reactapp1.client/"]
COPY ["ReactApp1.Server/ReactApp1.Server.csproj", "ReactApp1.Server/"]
COPY ["reactapp1.client/reactapp1.client.esproj", "reactapp1.client/"]
RUN dotnet restore "./ReactApp1.Server/./ReactApp1.Server.csproj"
COPY . .
WORKDIR "/src/ReactApp1.Server"
RUN dotnet build "./ReactApp1.Server.csproj" -c $BUILD_CONFIGURATION -o /app/build

FROM build AS publish
ARG BUILD_CONFIGURATION=Release
RUN dotnet publish "./ReactApp1.Server.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=false

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "ReactApp1.Server.dll"]

In Visual Studio 2022, Version 17.0 bis 17.7, sollte es wie folgt aussehen:

#See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.

FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
RUN apt-get update
RUN apt-get install -y curl
RUN apt-get install -y libpng-dev libjpeg-dev curl libxi6 build-essential libgl1-mesa-glx
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt-get install -y nodejs
WORKDIR /src
COPY ["ProjectSPA1/ProjectSPA1.csproj", "ProjectSPA1/"]
RUN dotnet restore "ProjectSPA1/ProjectSPA1.csproj"
COPY . .
WORKDIR "/src/ProjectSPA1"
RUN dotnet build "ProjectSPA1.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "ProjectSPA1.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "ProjectSPA1.dll"]

Das obige Dockerfile basiert auf dem Image mcr.microsoft.com/dotnet/core/aspnet und enthält Anweisungen zum Anpassen des Basisimages durch Erstellen Ihres Projekts und anschließendes Hinzufügen zum Container.

Ändern der Dockerfile (Windows-Container)

Öffnen Sie die Projektdatei durch Doppelklicken auf den Projektknoten. Aktualisieren Sie die Projektdatei (*.csproj), indem Sie die folgende Eigenschaft als untergeordnetes Element des Elements <PropertyGroup> hinzufügen:

 <DockerfileFastModeStage>base</DockerfileFastModeStage>

Hinweis

Die Änderung an DockerfileFastModeStage ist erforderlich, da die Dockerfile-Datei hier am Dateianfang eine Phase hinzufügt. Um die Leistung zu optimieren, verwendet Visual Studio den Fast-Modus. Das funktioniert aber nur, wenn die richtige Phase verwendet wird. Standardwert ist dies die erste Phase in der Dockerfile-Datei, die in diesem Beispiel von base in etwas anderes geändert wird, um Node.js herunterzuladen. Weitere Erläuterungen des Fast-Modus finden Sie unter Anpassen von Docker-Containern in Visual Studio.

Aktualisieren Sie die Dockerfile durch Hinzufügen der folgenden Zeilen. Mit diesen Zeilen werden „Node“ und „npm“ in den Container kopiert.

1. Fügen Sie der ersten Zeile der Dockerfile # escape=` hinzu.

2. Fügen Sie vor FROM ... base die folgenden Zeilen hinzu.

   FROM mcr.microsoft.com/powershell AS downloadnodejs
   ENV NODE_VERSION=14.16.0
   SHELL ["pwsh", "-Command", "$ErrorActionPreference = 'Stop';$ProgressPreference='silentlyContinue';"]
   RUN Invoke-WebRequest -OutFile nodejs.zip -UseBasicParsing "https://nodejs.org/dist/v$($env:NODE_VERSION)/node-v$($env:NODE_VERSION)-win-x64.zip"; `
       Expand-Archive nodejs.zip -DestinationPath C:\; `
       Rename-Item "C:\node-v$($env:NODE_VERSION)-win-x64" c:\nodejs
   

3. Fügen Sie vor und hinter FROM ... build die folgenden Zeilen hinzu.

   COPY --from=downloadnodejs C:\nodejs\ C:\Windows\system32\
   

4. Die vollständige Dockerfile sollte in etwa wie folgt aussehen:

   #See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images   for faster debugging.
   
   #Depending on the operating system of the host machines(s) that will build or run the containers, the image specified in the FROM statement may need to be changed.
   #For more information, please see https://aka.ms/containercompat
   # escape=`
   FROM mcr.microsoft.com/powershell:nanoserver-1809 AS downloadnodejs
   ENV NODE_VERSION=14.16.0
   SHELL ["pwsh", "-Command", "$ErrorActionPreference = 'Stop';$ProgressPreference='silentlyContinue';"]
   RUN Invoke-WebRequest -OutFile nodejs.zip -UseBasicParsing "https://nodejs.org/dist/v$($env:NODE_VERSION)/node-v$($env:NODE_VERSION)-win-x64.zip"; Expand-Archive nodejs.zip -DestinationPath C:\; Rename-Item "C:\node-v$($env:NODE_VERSION)-win-x64" c:\nodejs
   
   FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
   WORKDIR /app
   EXPOSE 80
   EXPOSE 443
   COPY --from=downloadnodejs C:\\nodejs C:\\Windows\\system32
   
   FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
   COPY --from=downloadnodejs C:\\nodejs C:\\Windows\\system32
   WORKDIR /src
   COPY ["Project1-SPA-Windows/Project1-SPA-Windows.csproj", "Project1-SPA-Windows/"]
   RUN dotnet restore "Project1-SPA-Windows/Project1-SPA-Windows.csproj"
   COPY . .
   WORKDIR "/src/Project1-SPA-Windows"
   RUN dotnet build "Project1-SPA-Windows.csproj" -c Release -o /app/build
   
   FROM build AS publish
   RUN dotnet publish "Project1-SPA-Windows.csproj" -c Release -o /app/publish /p:UseAppHost=false
   
   FROM base AS final
   WORKDIR /app
   COPY --from=publish /app/publish .
   ENTRYPOINT ["dotnet", "Project1-SPA-Windows.dll"]
   

5. Aktualisieren Sie die .dockerignore-Datei, indem Sie **/bin entfernen.

Debug

Mit Visual Studio 2022, Version 17.8 und höher und der React- und ASP.NET Core-Vorlage werden die Projekte bereits so konfiguriert, dass sowohl Client- als auch Serverprojekte mit Debuggingunterstützung gestartet werden.

Wenn Sie eine frühere Version von Visual Studio verwenden, erfahren Sie weiter unten, wie Sie das Debuggen mit dem Single-Page-Webanwendung-Proxyserver (Single-Page Application, SPA) einrichten.

Das Projekt verwendet während des Debuggens den SPA-Proxy. 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. Um den JavaScript-Clientcode zu debuggen, können Sie ein weiteres Debugprofil erstellen. Außerdem müssen Sie den Proxy manuell über eine Eingabeaufforderung starten, wenn Sie JavaScript debuggen. Sie können ihn über mehrere Debugsitzungen ausführen lassen.

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

2. Öffnen Sie eine Visual Studio-Entwicklereingabeaufforderung, navigieren Sie zum Ordner „ClientApp“ in Ihrem Projekt, und geben Sie dann den Befehl npm run start ein. Die Ausgabe sollte in etwa wie folgt aussehen:

   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
   

   Hinweis

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

3. Öffnen Sie die Dropdownliste, die Debugprofile enthält (neben dem grünen Dreieckssymbol oder der Schaltfläche Start), und wählen Sie {ProjectName} Debugeigenschaften und dann das Profil Docker aus.

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

   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 (aus Schritt 1) ist.

   

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

6. Es sollte in etwa den folgenden Code angezeigt werden:

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

   Wichtig

   Sie dürfen die Starteinstellungsoption publishAllPorts nicht auf true festlegen, wenn Sie einen Proxy verwenden. Diese Option veröffentlicht alle verfügbaren Ports an einem zufälligen Port, was 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, in der das Ziel für die localhost-Adresse und den Port von localhost im Container festgelegt ist. Die Portangabe befindet sich auf der Registerkarte Ports des Fensters Container.

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

   Wenn Sie HTTPS verwenden, stellen Sie sicher, dass der richtige Port für HTTPS ausgewählt wird (in diesem Tutorial ist dies 443).

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

   

   Wenn Sie beim Schreiben der Ausgabeassemblys einen Buildfehler erhalten, müssen Sie möglicherweise einen zuvor ausgeführten Container beenden, um die Dateien zu entsperren.

9. Überprüfen Sie, ob Sie einen Breakpoint im clientseitigen JavaScript-Code erreichen können. Legen Sie dazu einen Breakpoint in ClientApp/src/components/Counter.js in der Funktion incrementCounter fest, und versuchen Sie dann, den Breakpoint zu erreichen, indem Sie auf der Seite „Indikatoren“ auf die Schaltfläche Inkrement klicken.

   

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

    

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

Fenster „Container“

Öffnen Sie das Toolfenster Container. Sie finden es im Menü unter Ansicht>Weitere Fenster>Container, oder drücken Sie STRG+Q, beginnen Sie im Suchfeld mit der Eingabe von containers, und wählen Sie dann in den Ergebnissen das Fenster Container aus. Wenn das Fenster angezeigt wird, docken Sie es unterhalb des Editorbereichs an.

Im Fenster Container werden die ausgeführten Container angezeigt, und Sie können Informationen dazu abrufen. Sie können die Umgebungsvariablen, Bezeichnungen, Ports, Volumes, das Dateisystem und Protokolle anzeigen. Mithilfe der Symbolleistenschaltflächen können Sie ein Terminal (Shell-Eingabeaufforderung) 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 zu sehen.

Sie können auch die Images anzeigen und zugehörige Informationen untersuchen. Wählen Sie die Registerkarte Images aus, suchen Sie das Image für Ihr Projekt, und wählen Sie dann die Registerkarte Details aus, um eine JSON-Datei mit Informationen zu einem Image anzuzeigen.

Hinweis

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 die Releasekonfiguration, um ein Produktionsimage zu erstellen, das alle Inhalte enthält.

Veröffentlichen von Docker-Images

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

1. Wählen Sie im Dropdownliste Konfiguration die Option Release aus, und erstellen Sie die App.

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

3. Klicken Sie im Dialogfeld „Publish target“ (Veröffentlichungsziel) auf Docker Container Registry (Docker-Containerregistrierung).

   

4. Wählen Sie dann Azure Container Registry aus.

   

5. Wählen Sie Neue Azure-Containerregistrierung erstellen aus.

6. Geben Sie auf dem Bildschirm Neue Azure-Containerregistrierung erstellen die gewünschten Werte ein.

   Einstellung	Vorgeschlagener Wert	Beschreibung
   DNS-Präfix	Global eindeutiger Name	Name, der Ihre Containerregistrierung eindeutig identifiziert.
   Abonnement	Auswählen Ihres Abonnements	Das zu verwendende Azure-Abonnement.
   Ressourcengruppe	myResourceGroup	Name der Ressourcengruppe, in der die Containerregistrierung erstellt werden soll. Wählen Sie Neu aus, um eine neue Ressourcengruppe zu erstellen.
   SKU	Standard	Dienstebene der Containerregistrierung
   Registrierungsstandort	Ein Standort in Ihrer Nähe	Wählen Sie einen Standort 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.

   

   Am Ende des Veröffentlichungsprozesses können Sie die Veröffentlichungseinstellungen überprüfen und ggf. bearbeiten oder das Image über die Schaltfläche Veröffentlichen wieder veröffentlichen.

   

   Wenn Sie im Dialogfeld Veröffentlichen wieder von vorne beginnen möchten, löschen Sie das Veröffentlichungsprofil über den Link Löschen auf dieser Seite, und klicken Sie dann wieder auf Veröffentlichen.

Nächste Schritte

Sie können jetzt den Container aus der Registrierung auf einen beliebigen Host ziehen, auf dem Docker-Images ausgeführt werden können. Beispiel: Azure Container Instances.

Zusätzliche Ressourcen

• Containerentwicklung mit Visual Studio
• Problembehandlung bei der Visual Studio-Entwicklung mit Docker
• GitHub-Repository mit Visual Studio-Containertools