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

Artikel
05/30/2024

Mit Visual Studio können Sie ASP.NET Core-Container-Apps mühelos erstellen, debuggen und ausführen, einschließlich Apps mit clientseitigem JavaScript, z.B. React.js-Apps mit einer einzigen Seite (SPA). Anschließend können Sie sie in Azure Container Registry (SPA), 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 2019 mit installierten Workloads für Webentwicklung, Azure-Tools und/oder plattformübergreifende .NET Core-Entwicklung
.NET Core 3.1-Entwicklungstools zur Entwicklung mit .NET Core 3.1
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.

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

Erstellen Sie unter Verwendung der Vorlage ASP.NET Core mit React.js ein neues Projekt.
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.
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.
Wählen Sie den Containertyp aus.

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

Hinweis

Bei Verwendung der neuesten Projektvorlagen in Visual Studio 2022 oder höher müssen Sie das Dockerfile nicht ändern.

Ä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:

Löschen Sie in der Dockerfile-Datei die Zeile USER app.
Ä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.
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:

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/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.

FROM mcr.microsoft.com/dotnet/aspnet:3.1 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:3.1 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 des 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.

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

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

Fügen Sie vor und hinter FROM ... build die folgenden Zeilen hinzu.
```
COPY --from=downloadnodejs C:\nodejs\ C:\Windows\system32\
```

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

# escape=`
#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
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

FROM mcr.microsoft.com/dotnet/core/aspnet:3.1 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
COPY --from=downloadnodejs C:\\nodejs C:\\Windows\\system32

FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build
COPY --from=downloadnodejs C:\\nodejs C:\\Windows\\system32
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"]

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

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

Erstellen Sie ein neues Projekt unter Verwendung der Vorlage React and ASP.NET Core.
Wählen Sie im Bildschirm Zusätzliche Informationen die Option Containerunterstützung aktivieren aus. Wählen Sie unbedingt die Option Dockerfile aus, da Sie Änderungen an dieser Datei manuell vornehmen müssen.

Hinweis

In einigen Versionen von Visual Studio 2022 ist diese Option nicht aktiviert, Sie können die entsprechende 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.
Wenn Sie bei der Projekterstellung keine Docker-Containerunterstützung hinzugefügt haben, klicken Sie mit der rechten Maustaste auf den Knoten des Serverprojekts, und wählen Sie Hinzufügen>Docker-Unterstützung aus. Wählen Sie unbedingt die Dockerfile-Option zum Erstellen eines Dockerfiles aus.
Wählen Sie den Containertyp aus.

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

Erstellen Sie unter Verwendung der Vorlage ASP.NET Core mit React.js ein neues Projekt.
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.
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.
Wählen Sie den Containertyp aus.

Debug

Mit Visual Studio 2022 Version 17.9 oder höher und der verwendeten React- und ASP.NET Core-Vorlage vite.jssind die Projekte bereits so konfiguriert, dass sowohl die Client- als auch die Serverprojekte mit Debugunterstützung gestartet werden, aber Sie müssen den richtigen Port für den SPA-Proxy (Single-Page Application) einrichten, der für den Zugriff auf den ASP.NET Core-Server verwendet werden soll, der im Container ausgeführt wird. Sie können den Hostport über das Fenster Container in Visual Studio abrufen und im React-Projekt festlegen, wie in Erstellen einer React-Anwendung – Docker beschrieben.

Außerdem können Sie den Start im Browser für den Server deaktivieren, der so eingerichtet ist, dass er mit Swagger geöffnet wird, was für dieses Szenario nicht erforderlich ist. Zum Deaktivieren des Browserstarts öffnen Sie die Eigenschaften (ALT+EINGABETASTE), und wechseln Sie zur Registerkarte Debuggen. Klicken Sie anschließend 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, erfahren Sie weiter unten, wie Sie das Debuggen mit dem SPA-Proxyserver (Single-Page Application, Single-Page-Webanwendung) 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.

Erstellen Sie das Projekt, sofern es noch nicht erstellt wurde.
Ö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.
Ö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.
Ü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
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.

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.

Ö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).
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.
Ü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.
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.
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.

Wählen Sie in der Symbolleiste in der Dropdownliste Debuggen die Option Docker aus, und starten Sie das Debuggen der Anwendung. Möglicherweise wird eine Meldung mit einer Eingabeaufforderung zum Vertrauen eines Zertifikats angezeigt. Vertrauen Sie dem Zertifikat, um fortzufahren. Beim ersten Build lädt Docker die Basisimages herunter, weshalb der Vorgang etwas länger dauern kann.

Die Option Containertools im Fenster Ausgabe zeigt, welche Aktionen ausgeführt werden. Die mit npm.exe verknüpften Installationsschritte werden angezeigt.

Der Browser zeigt die Startseite der App.

Screenshot: ausgeführte App

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“.

Screenshot: Fenster „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.

Screenshot: Fenster „Container“ mit Images und Details

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.

Wählen Sie im Dropdownliste Konfiguration die Option Release aus, und erstellen Sie die App.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie Veröffentlichen.
Klicken Sie im Dialogfeld „Publish target“ (Veröffentlichungsziel) auf Docker Container Registry (Docker-Containerregistrierung).
Wählen Sie dann Azure Container Registry aus.
Wählen Sie Neue Azure-Containerregistrierung erstellen aus.

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.

Screenshot: Visual Studio-Dialogfeld zum Erstellen einer Azure Container Registry-Instanz

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.

Wählen Sie im Dropdownliste Konfiguration die Option Release aus, und erstellen Sie die App.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie Veröffentlichen.
Klicken Sie im Dialogfeld „Publish target“ (Veröffentlichungsziel) auf Docker Container Registry (Docker-Containerregistrierung).
Wählen Sie dann Azure Container Registry aus.
Wählen Sie Neue Azure-Containerregistrierung erstellen aus.

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.

Screenshot: Visual Studio-Dialogfeld zum Erstellen einer Azure Container Registry-Instanz

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.

Freigeben über

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

Voraussetzungen

Installation und Einrichtung

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

Ändern der Dockerfile (Linux-Container)

Ändern der Dockerfile (Windows-Container)

Debug

Fenster „Container“

Veröffentlichen von Docker-Images

Nächste Schritte

Zusätzliche Ressourcen

Feedback

Zusätzliche Ressourcen