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

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.

Note

Den här artikeln gäller för Visual Studio 2019. Om du använder Visual Studio 2022 finns det nya JavaScript-projektmallar som gör scenariot mycket enklare. Se Självstudie: Skapa en ASP.NET Core-app med React i Visual Studio – Docker.

Prerequisites

• Docker Desktop
• Visual Studio 2019 med arbetsbelastningen ASP.NET och webbutveckling, Azure-utveckling och/eller .NET Core plattformsoberoende utveckling installerad.
• 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.

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

1. Skapa ett nytt projekt med ASP.NET Core-mallen med React.js.

   

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

   

3. Högerklicka på projektnoden och välj Lägg till>Docker-stöd för att lägga till en Dockerfile i projektet.

   

4. Välj containertyp.

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

Note

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

Ändra Dockerfile (Linux-containrar)

En Dockerfile, receptet för att skapa en slutlig Docker-avbildning, skapas i projektet. Se Dockerfile-referensen 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:

1. I Dockerfile tar du bort raden USER app.
2. Ä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.
3. 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å mcr.microsoft.com/dotnet/aspnet avbildningen och innehåller instruktioner för att ändra basavbildningen genom att skapa projektet 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>

Note

Ändringen av DockerfileFastModeStage krävs eftersom Dockerfile här lägger till en fas i början av Dockerfile. För att optimera prestandan använder Visual Studio snabbt läge, men det fungerar bara om rätt fas 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 snabbt läge finnsi Anpassa Docker-containrar i Visual Studio.

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

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

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

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

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

4. 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"]
   

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

Debug

Välj Docker i listrutan 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 Containerverktyg 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.

Fönstret Behållare

Öppna verktygsfönstret Containrar . Du hittar den på menyn under Visa>andra>, eller tryck på Ctrl+Q och börja skriva containers i sökrutan och välj sedan Fönstret Containrar i resultatet. När fönstret öppnas dockar du det längst ned under redigeringsfönstret.

I fönstret Containrar visas de containrar som körs och du kan 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 Containrar.

Klicka på fliken Filer och expandera app mappen 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.

Note

Dev-avbildningen innehåller inte appens binärfiler och annat innehåll, eftersom felsökningskonfigurationer använder volymmontering för att möjliggöra iterativ redigering och felsökning. För att skapa en produktionsbild som innehåller allt, använder du Release-konfigurationen.

Publicera Docker-avbildningar

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

1. Ändra listrutan för konfiguration till Släpp och skapa appen.

2. Högerklicka på projektet i Solution Explorer och välj Publicera.

3. I dialogrutan Publicera mål väljer du Docker Container Registry.

   

4. Välj sedan Azure Container Registry.

   

5. Välj Skapa ett nytt Azure Container Registry.

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

   Setting	Föreslaget värde	Description
   DNS-prefix	Globalt unikt namn	Namn som unikt identifierar ditt containerregister.
   Subscription	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 ditt containerregister.

   

7. Välj Skapa och 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 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.

Nästa steg

Nu kan du hämta containern från registret till alla värdar som kan köra Docker-avbildningar, till exempel Azure Container Instances.

Ytterligare resurser

• Containerutveckling med Visual Studio
• Felsöka Visual Studio-utveckling med Docker
• GitHub-lagringsplats för Visual Studio Container Tools