Snabbstart: Använda Docker med ett React-program på en sida i Visual Studio

Artikel
01/27/2025

Med Visual Studio kan du enkelt skapa, felsöka och köra containerbaserade ASP.NET Core-appar, inklusive de med JavaScript på klientsidan, till exempel React.js ensidesprogram (SPA) och publicera dem till Azure Container Registry, Docker Hub, Azure App Service eller ditt eget containerregister. I den här artikeln publicerar vi till Azure Container Registry.

Förutsättningar

Docker Desktop
Visual Studio 2019 med arbetsbelastningen Web Development, Azure Tools och/eller .NET Core plattformsoberoende utveckling arbetsbelastning installerad
.NET Core 3.1 Development Tools för utveckling med .NET Core 3.1.
För att publicera till Azure Container Registry krävs en Azure-prenumeration. Registrera dig för en kostnadsfri utvärderingsversion.
Node.js
För Windows-containrar, Windows 10 version 1809 eller senare, för att använda Docker-avbildningarna som refereras i den här artikeln.

Docker Desktop
Visual Studio 2022 med webbutveckling, Azure Tools arbetsbelastningsprofil och/eller .NET Core utvecklingsarbetsbelastningsprofil för plattformsoberoende installerad
För att publicera till Azure Container Registry krävs ett Azure-abonnemang. Registrera dig för en kostnadsfri utvärderingsversion.
Node.js
För Windows-containrar, Windows 10 version 1809 eller senare, för att använda Docker-avbildningarna som refereras i den här artikeln.

Installation och konfiguration

För Docker-installation läser du först informationen på Docker Desktop för Windows: Vad du bör veta innan du installerar. Installera sedan Docker Desktop.

Skapa ett projekt och lägg till Docker-stöd

Skapa ett nytt projekt med hjälp av mallen ASP.NET Core med React.js.
På skärmen Ytterligare information kan du inte välja Aktivera Docker-support, men oroa dig inte, du kan lägga till det stödet senare.
Högerklicka på projektnoden och välj Lägg till>Docker-support för att lägga till en Dockerfile i projektet.
Välj containertyp.

Nästa steg skiljer sig beroende på om du använder Linux-containrar eller Windows-containrar.

Obs

Om du använder de senaste projektmallarna i Visual Studio 2022 eller senare behöver du inte ändra Dockerfile.

Ändra Dockerfile (Linux-containrar)

Ett Dockerfile, receptet för att skapa en slutlig Docker-avbildning, skapas i projektet. Se Dockerfile-referens för att förstå kommandona i den.

Standard-Dockerfile använder en basavbildning för att köra containern, men när du också vill kunna köra ett Node.js program på den måste du installera Node.js, vilket innebär att du lägger till vissa installationskommandon på ett par platser i Dockerfile. Installationskommandona kräver utökade behörigheter eftersom ändringarna påverkar containerns privilegierade systemfiler och mappar.

När kryssrutan Konfigurera för HTTPS i den nya projektdialogrutan är markerad, exponerar Dockerfile två portar. En port används för HTTP-trafik. den andra porten används för HTTPS. Om kryssrutan inte är markerad exponeras en enskild port (80) för HTTP-trafik.

Om du siktar på .NET 8 eller senare, skapar Visual Studios standard-Dockerfile med ett normalt användarkonto (leta efter raden USER app), men det kontot har inte de utökade behörigheter som krävs för att installera Node.js. Gör följande för att ta hänsyn till den här situationen:

I Dockerfile tar du bort raden USER app.
Ändra de portar som exponeras i det första avsnittet i Dockerfile till port 80 är för HTTP-begäranden och (om du väljer att stödja HTTPS när du skapade projektet) 443 för HTTPS-begäranden.
Redigera launchSettings.json för att ändra portreferenserna där till 80 och 443. ersätt 8080 med 80 för HTTP och 8081 med 443 för HTTPS.

För alla .NET-versioner använder du följande steg för att uppdatera Dockerfile för att installera Node.js:

Lägg till följande rader för att installera curl, Node.js 14.x och vissa nödvändiga Node-bibliotek i containern. Se till att lägga till dessa rader både i det första avsnittet, för att lägga till installationen av Node-pakethanteraren npm.exe till basavbildningen, samt i avsnittet 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

Dockerfile bör nu se ut ungefär så här:

#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"]

Föregående Dockerfile baseras på dockerbilden från mcr.microsoft.com/dotnet/aspnet och innehåller instruktioner för att ändra basbilden genom att bygga ditt projekt och lägga till det i containern.

Ändra Dockerfile (Windows-containrar)

Öppna projektfilen genom att dubbelklicka på projektnoden och uppdatera projektfilen (*.csproj) genom att lägga till följande egenskap som underordnad elementet <PropertyGroup>:

 <DockerfileFastModeStage>base</DockerfileFastModeStage>

Not

Ändringen av DockerfileFastModeStage är nödvändig eftersom Dockerfilen här lägger till ett steg i början av Dockerfilen. För att optimera prestandan använder Visual Studio snabbt läge, men det fungerar bara om rätt steg används. Standardvärdet är den första fasen i Dockerfile, som i det här exemplet ändras från base till något annat för att ladda ned Node.js. Mer förklaring av snabblägefinns i Anpassa Docker-containrar i Visual Studio.

Uppdatera Dockerfile genom att lägga till följande rader. Dessa rader kopierar Node och npm till containern.

Lägg till # escape=` till den första raden i Dockerfile

Lägg till följande rader före FROM ... base

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

Lägg till följande rad före och efter FROM ... build

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

Den fullständiga Dockerfile bör nu se ut ungefär så här:

# 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"]

Uppdatera .dockerignore-filen genom att ta bort **/bin.

Följ dessa steg om du använder Visual Studio 2022 version 17.8 eller senare:

Skapa ett nytt projekt med mallen React och ASP.NET Core.
På skärmen Ytterligare information väljer du Aktivera containerstöd. Se till att välja Dockerfile- alternativet, eftersom du måste göra ändringar i filen manuellt.

Not

I vissa versioner av Visual Studio 2022 är det här alternativet inte aktiverat, men du kan lägga till det stödet senare.

Visual Studio skapar två projekt – ett för React JavaScript-klientkoden och ett annat för serverkoden ASP.NET Core C#.
Om du inte lade till Stöd för Docker-container när projektet skapades högerklickar du på serverprojektnoden och väljer Lägg till>Docker-support och se till att välja alternativet Dockerfile för att skapa en Dockerfile.
Välj containertyp.

Följ stegen nedan för Visual Studio 2022 version 17.0 till 17.7:

Skapa ett nytt projekt med hjälp av mallen ASP.NET Core med React.js.
På skärmen Ytterligare information kan du inte välja Aktivera Docker-support, men oroa dig inte, du kan lägga till det stödet senare.
Högerklicka på projektnoden och välj Lägg till>Docker-support för att lägga till en Dockerfile i projektet.
Välj containertyp.

Felsöka

Med Visual Studio 2022 version 17.9 eller senare och mallen React och ASP.NET Core som använder vite.jshar projekten redan konfigurerats för att starta både klient- och serverprojekten med felsökningsstöd, men du måste konfigurera rätt port för ensidesproxyn för program (SPA) som ska användas för att komma åt ASP.NET Core-servern som körs i containern. Du kan hämta värdporten från fönstret Containers i Visual Studio och ange den i React-projektet enligt beskrivningen i Skapa en React-app – Docker.

Du kan också inaktivera lanseringen i webbläsaren för servern, som är konfigurerad för att öppnas med Swagger, vilket inte krävs för det här scenariot. Om du vill inaktivera webbläsarstarten öppnar du fliken Egenskaper (Alt+Retur), går till fliken Felsökning och klickar på länken Öppna startprofiler för felsökningoch avmarkerar kryssrutan Starta webbläsare.

Om du använder en tidigare version av Visual Studio 2022 fortsätter du att läsa för att konfigurera felsökning med proxyservern för ensidesprogram (SPA).

Projektet använder SPA-proxyn under felsökningen. Se förbättrade enkeltsidiga programmallar (SPA). Vid felsökning körs JavaScript-klienten på värddatorn, men ASP.NET Core-serverkoden körs i containern. När den publiceras körs inte proxyn och klientkoden körs på samma server som ASP.NET Core-koden. Du har redan en felsökningsprofil *Docker- som du kan använda för att felsöka serverkoden. Om du vill felsöka JavaScript-klientkoden kan du skapa ytterligare en felsökningsprofil. Du måste också starta proxyn manuellt från en kommandorad när du felsöker JavaScript. Du kan låta den köras genom flera felsökningssessioner.

Skapa projektet, om det inte redan har skapats.

Öppna en Visual Studio dev-kommandotolk, gå till mappen ClientApp i projektet och ge sedan kommandot npm run start. Du bör se ungefär så här:

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

Not

Observera den lokala URL:en. Du måste ange detta i en felsökningsstartprofil som lagras i din launchSettings.json-fil.

Öppna listrutan som innehåller felsökningsprofiler (bredvid den gröna triangelikonen eller knappen Starta) och välj {ProjectName} Felsökningsegenskaperoch välj profilen Docker.
Kontrollera avsnittet Miljövariabler och lägg till följande miljövariabler om de inte redan finns:

ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy
Ange URL till https://localhost:{proxy-port} där {proxy-port} är porten från proxyservern (från steg 1).

Den här åtgärden ändrar Docker-posten i launchSettings.json-filen och startar rätt URL för den lokala proxyn som körs på värddatorn. Leta upp filen launchSettings.json i Solution Explorer under Egenskaper.

Du bör se något som liknar följande kod:

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

Viktig

Ställ inte in alternativet starta inställningar publishAllPorts till true om du använder en proxy. Det alternativet publicerar alla exponerade portar till en slumpmässig port, vilket inte fungerar när du anger en specifik port i SPA-proxyn.

Öppna filen ClientApp/src/setupProxy.js och ändra raden som anger målet för att använda localhost-adressen och porten på containern. Du hittar porten på fliken Portar i fönstret Containers.
```
const target =  'https://localhost:{container-port}';
```
Om du använder HTTPS ska du välja rätt port för HTTPS, som är 443 i denna handledning.
Starta appen med felsökning (F5).

Om du får ett byggfel när du försöker skriva utdatasammansättningarna kan du behöva stoppa en container som tidigare kördes för att låsa upp filerna.
Kontrollera att du kan träffa en brytpunkt i JavaScript-koden på klientsidan genom att ange en brytpunkt i ClientApp/src/components/Counter.js i funktionen incrementCounter och försök sedan trycka på brytpunkten genom att klicka på knappen Öka på sidan Räknare.
Försök sedan att träffa en brytpunkt i ASP.NET Core-kod på serversidan. Ange en brytpunkt i WeatherController.cs i metoden Get och försök lägga till /weatherforecast till den grundläggande localhost- och port-URL:en för att aktivera koden.
Om containerporten ändras, vilket kan inträffa om du gör en betydande ändring, till exempel om du uppdaterar launchSettings.json eller uppdaterar felsökningsstartprofilen i IDE, måste du uppdatera porten i setupProxy.js och även starta om proxyn. Avsluta den aktuella proxyn (Ctrl+C i kommandofönstret där den körs) och starta sedan om den med samma kommando npm run start.

Välj Docker- i listrutan för felsökning i verktygsfältet och börja felsöka appen. Du kan se ett meddelande med en uppmaning om att lita på ett certifikat. välj att lita på att certifikatet fortsätter. Första gången du skapar laddar Docker ned basavbildningarna, så det kan ta lite längre tid.

Alternativet Container Tools i fönstret Utdata visar vilka åtgärder som utförs. Du bör se installationsstegen som är associerade med npm.exe.

Webbläsaren visar appens startsida.

Skärmbild av appen som körs.

Fönstret Behållare

Öppna verktygsfönstret Container. Du hittar den på menyn under View>Other Windows>Containers, eller tryck på Ctrl+Q och börja skriva containers i sökrutan, och välj därefter fönstret Containers från resultaten. När fönstret öppnas dockar du det längst ned under redigeringsfönstret.

Fönstret Containers visar de containrar som körs och låter dig visa information om dem. Du kan visa miljövariabler, etiketter, portar, volymer, filsystemet och loggarna. Med knapparna i verktygsfältet kan du skapa en terminal (kommandotolk) i containern, bifoga felsökningsprogrammet eller rensa oanvända containrar. Se Använd fönstret Behållare.

Skärmbild av Containers-fönstret.

Klicka på fliken Filer och expandera mappen app för att se dina publicerade programfiler.

Du kan också visa bilderna och granska information om dem. Välj fliken Bilder, leta upp den för projektet och välj sedan fliken Information för att visa en json-fil som innehåller information om en bild.

Skärmbild av fönstret Containrar med bilder och information.

Anteckning

Avbildningen dev innehåller inte appens binärfiler och annat innehåll, eftersom debug konfigurationer använder volymmontering för att ge en iterativ redigerings- och felsökningsupplevelse. Om du vill skapa en produktionsbild som innehåller allt innehåll använder du konfigurationen Release.

Publicera Docker-avbildningar

När appens utvecklings- och felsökningscykel har slutförts kan du skapa en produktionsbild av appen.

Ändra listrutan för konfiguration till Release och skapa appen.
Högerklicka på projektet i Solution Explorer och välj Publicera.
I dialogrutan publicera mål väljer du Docker Container Registry.
Välj sedan Azure Container Registry.
Välj Skapa ett nytt Azure Container Registry-.

Fyll i önskade värden på skärmen Skapa nytt Azure Container Registry-.

Inställning	Föreslaget värde	Beskrivning
DNS-prefix	Globalt unikt namn	Namn som unikt identifierar ditt containerregister.
Prenumeration	Välj din prenumeration	Den Azure-prenumeration som ska användas.
resursgrupp	myResourceGroup	Namnet på resursgruppen där containerregistret ska skapas. Välj Ny för att skapa en ny resursgrupp.
SKU	Standard	Tjänstnivån för containerregistret
registerplats	En plats nära dig	Välj en plats i en region nära dig eller nära andra tjänster som använder containerregistret.

Skärmbild av dialogrutan Skapa Azure Container Registry i Visual Studio.

Välj Skapaoch välj sedan Slutför.

När publiceringsprocessen är slut kan du granska publiceringsinställningarna och redigera dem, när det behövs, eller publicera bilden igen med hjälp av knappen Publicera.

Om du vill börja igen med dialogrutan Publicera tar du bort publiceringsprofilen med hjälp av länken Ta bort på den här sidan och väljer sedan Publicera igen.

Ändra listrutan för konfiguration till Release och skapa appen.
Högerklicka på projektet i Solution Explorer och välj Publicera.
I dialogrutan för att publicera mål, väljer du Docker Container Registry.
Välj därefter Azure Container Registry.
Välj Skapa ett nytt Azure Container Registry-.