Quickstart: Docker gebruiken met een React-toepassing met één pagina in Visual Studio
Met Visual Studio kunt u eenvoudig container-ASP.NET Core-apps bouwen, fouten opsporen en uitvoeren, inclusief apps met JavaScript aan de clientzijde, zoals React.js toepassing met één pagina (SPA) en deze publiceren naar Azure Container Registry, Docker Hub, Azure App Service of uw eigen Container Registry. In dit artikel publiceren we naar Azure Container Registry.
Voorwaarden
- Docker Desktop
- Visual Studio 2019 met de Web Development, Azure Tools workload en/of platformoverschrijdende ontwikkeling van .NET Core workload geïnstalleerd
- .NET Core 3.1 Development Tools voor ontwikkeling met .NET Core 3.1.
- Voor het publiceren naar Azure Container Registry is een Azure-abonnement vereist. meld u aan voor een gratis proefversie.
- Node.js
- Voor Windows-containers, Windows 10 versie 1809 of hoger, om de Docker-images te gebruiken waarnaar in dit artikel wordt verwezen.
- Docker Desktop
- Visual Studio 2022 met de Web Development, Azure Tools workload en/of platformoverschrijdende ontwikkeling van .NET Core workload geïnstalleerd
- Er is een Azure-abonnement nodig om te publiceren naar Azure Container Registry. meld u aan voor een gratis proefversie.
- Node.js
- Voor Windows-containers, Windows 10 versie 1809 of hoger, kunt u de Docker-installatiekopieën gebruiken waarnaar in dit artikel wordt verwezen.
Installatie en configuratie
Lees voor docker-installatie eerst de informatie op Docker Desktop voor Windows: wat u moet weten voordat uinstalleert. Installeer vervolgens Docker Desktop-.
Een project maken en Docker-ondersteuning toevoegen
Maak een nieuw project met behulp van de ASP.NET Core met React.js sjabloon.
In het scherm Aanvullende informatie kunt u niet Docker-ondersteuning inschakelenselecteren, maar u kunt deze ondersteuning later toevoegen.
Klik met de rechtermuisknop op het projectknooppunt en kies >Docker-ondersteuning toevoegen om een Dockerfile aan uw project toe te voegen.
Selecteer het containertype.
De volgende stap is afhankelijk van of u Linux-containers of Windows-containers gebruikt.
Notitie
Als u de meest recente projectsjablonen in Visual Studio 2022 of hoger gebruikt, hoeft u het Dockerfile niet te wijzigen.
Het Dockerfile wijzigen (Linux-containers)
In het project wordt een Dockerfilegemaakt, het recept voor het maken van een definitieve Docker-image. Raadpleeg Dockerfile-verwijzing voor een goed begrip van de opdrachten hierin.
De standaard Dockerfile maakt gebruik van een basisafbeelding om de container uit te voeren, maar als u ook een Node.js toepassing erop wilt kunnen draaien, moet u Node.jsinstalleren, wat betekent dat u enkele installatieopdrachten op een paar plaatsen in de Dockerfile moet toevoegen. Voor de installatieopdrachten zijn verhoogde machtigingen vereist, omdat de wijzigingen van invloed zijn op de bevoegde systeembestanden en -mappen van de container.
Wanneer het selectievakje Configureren voor HTTPS is ingeschakeld in het nieuwe projectdialoogvenster, worden twee poorten weergegeven Dockerfile. Eén poort wordt gebruikt voor HTTP-verkeer; de andere poort wordt gebruikt voor HTTPS. Als het selectievakje niet is ingeschakeld, wordt één poort (80) weergegeven voor HTTP-verkeer.
Als u zich richt op .NET 8 of hoger, heeft het standaard Dockerfile dat Visual Studio maakt met behulp van het normale gebruikersaccount (zoek naar de regel USER app
), maar dat account beschikt niet over de verhoogde machtigingen om Node.jste installeren. Ga als volgt te werk om rekening te houden met deze situatie:
- Verwijder in het Dockerfile de regel
USER app
. - Wijzig de poorten die worden weergegeven in de eerste sectie van het Dockerfile in poort 80 voor HTTP-aanvragen en (als u ervoor hebt gekozen om HTTPS te ondersteunen bij het maken van het project) 443 voor HTTPS-aanvragen.
- Bewerk
launchSettings.json
om de poortverwijzingen daar te wijzigen in 80 en 443; vervang 8080 door 80 voor HTTP en 8081 door 443 voor HTTPS.
Voor alle .NET-versies gebruikt u de volgende stappen om het Dockerfile bij te werken om Node.jste installeren:
- Voeg de volgende regels toe om curl, Node.js 14.x en bepaalde vereiste Node-bibliotheken in de container te installeren. Zorg ervoor dat u deze regels zowel in de eerste sectie toevoegt als u de installatie van Node Package Manager
npm.exe
wilt toevoegen aan de basisinstallatiekopieën, evenals in de sectiebuild
.
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
De Dockerfile- ziet er nu ongeveer als volgt uit:
#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"]
De voorgaande Dockerfile is gebaseerd op de mcr.microsoft.com/dotnet/aspnet image en bevat instructies voor het wijzigen van de basisimage door uw project te bouwen en aan de container toe te voegen.
Het Dockerfile wijzigen (Windows-containers)
Open het projectbestand door te dubbelklikken op het projectknooppunt en werk het projectbestand (*.csproj) bij door de volgende eigenschap toe te voegen als onderliggend element van het <PropertyGroup>
element:
<DockerfileFastModeStage>base</DockerfileFastModeStage>
Notitie
De wijziging in DockerfileFastModeStage is vereist, omdat de Dockerfile hier een fase toevoegt aan het begin van de Dockerfile. Visual Studio maakt gebruik van Fast-modusom de prestaties te optimaliseren, maar werkt alleen als de juiste fase wordt gebruikt. De standaardinstelling is de eerste fase in het Dockerfile, dat in dit voorbeeld wordt gewijzigd van base
in iets anders om Node.jste downloaden. Zie Docker-containers aanpassen in Visual Studiovoor meer uitleg over Fast-modus.
Werk het Dockerfile bij door de volgende regels toe te voegen. Met deze regels worden Node en NPM naar de container gekopieerd.
Voeg
# escape=`
toe aan de eerste regel van het DockerfileVoeg de volgende regels toe vóór
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
Voeg de volgende regel toe vóór en na
FROM ... build
COPY --from=downloadnodejs C:\nodejs\ C:\Windows\system32\
Het volledige Dockerfile moet er nu ongeveer als volgt uitzien:
# 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"]
Werk het
.dockerignore
bestand bij door het**/bin
te verwijderen.
Volg deze stappen als u Visual Studio 2022 versie 17.8 of hoger gebruikt:
Maak een nieuw project met behulp van de sjabloon React en ASP.NET Core.
Selecteer in het scherm Aanvullende informatieContainerondersteuning inschakelen. Zorg ervoor dat u Dockerfile optie selecteert, omdat u handmatig wijzigingen in dat bestand moet aanbrengen.
Notitie
In sommige versies van Visual Studio 2022 is deze optie niet ingeschakeld, maar u kunt deze ondersteuning later toevoegen.
Visual Studio maakt twee projecten: één voor de React JavaScript-clientcode en een voor de ASP.NET Core C#-servercode.
Als u tijdens het maken van het project geen ondersteuning voor Docker-containers hebt toegevoegd, klikt u met de rechtermuisknop op het serverprojectknooppunt en kiest u >Docker-ondersteuning toevoegen en kiest u de optie Dockerfile om een Dockerfile te maken.
Selecteer het containertype.
Gebruik de volgende stappen voor Visual Studio 2022 versie 17.0 tot en met 17.7:
Maak een nieuw project met behulp van de ASP.NET Core met React.js sjabloon.
In het scherm Aanvullende informatie kunt u niet Docker-ondersteuning inschakelenselecteren, maar u kunt deze ondersteuning later toevoegen.
Klik met de rechtermuisknop op het projectknooppunt en kies >Docker-ondersteuning toevoegen om een Dockerfile aan uw project toe te voegen.
Selecteer het containertype.
Fouten opsporen
Met Visual Studio 2022 versie 17.9 of hoger en de sjabloon React en ASP.NET Core die gebruikmaakt van vite.js
, zijn de projecten al geconfigureerd om zowel de client- als serverprojecten te starten met ondersteuning voor foutopsporing, maar u moet de juiste poort instellen voor de spa-proxy (single-page application) om toegang te krijgen tot de ASP.NET Core-server die in de container wordt uitgevoerd. U kunt de hostpoort ophalen uit het venster Containers in Visual Studio en deze instellen in het React-project, zoals beschreven in Een React-app maken - Docker-.
U kunt de start ook uitschakelen in de browser voor de server, die is ingesteld om te worden geopend met Swagger, wat niet vereist is voor dit scenario. Als u het starten van de browser wilt uitschakelen, opent u de Eigenschappen (Alt+Enter), gaat u naar het tabblad Foutopsporing en klikt u op de koppeling Gebruikersinterface voor het starten van foutopsporingsprofielen openenen schakelt u het selectievakje Browser starten uit.
Als u een eerdere versie van Visual Studio 2022 gebruikt, leest u verder om foutopsporing in te stellen met de spa-proxyserver (toepassing met één pagina).
Het project maakt tijdens foutopsporing gebruik van de SPA-proxy. Zie Verbeterde spa-sjablonen (single-page app). Bij foutopsporing wordt de JavaScript-client uitgevoerd op de hostcomputer, maar de ASP.NET Core-servercode wordt uitgevoerd in de container. Wanneer de proxy wordt gepubliceerd, wordt deze niet uitgevoerd en wordt de clientcode uitgevoerd op dezelfde server als de ASP.NET Core-code. U hebt al een foutopsporingsprofiel *Docker- die u kunt gebruiken om fouten in de servercode op te sporen. Als u fouten wilt opsporen in de JavaScript-clientcode, kunt u een extra foutopsporingsprofiel maken. U moet de proxy ook handmatig starten vanaf een opdrachtprompt bij het opsporen van fouten in JavaScript. U kunt het laten draaien tijdens meerdere foutopsporingssessies.
Bouw het project, als dit nog niet is gebouwd.
Open een Visual Studio Dev-opdrachtprompt, ga naar de map ClientApp in uw project en geef de opdracht
npm run start
. U zou iets moeten zien dat er ongeveer zo uitziet: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
Notitie
Noteer de lokale URL. U moet dit opgeven in een opstartprofiel voor foutopsporing, dat is opgeslagen in uw
launchSettings.json
-bestand.Open de vervolgkeuzelijst met foutopsporingsprofielen (naast het groene driehoekpictogram of knop Start) en kies {ProjectName} Debug Propertiesen kies het Docker-profiel.
Controleer de sectie Omgevingsvariabelen en voeg de volgende omgevingsvariabelen toe als deze nog niet aanwezig zijn:
ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy
Stel de -URL in op
https://localhost:{proxy-port}
waar{proxy-port}
de poort is van de proxyserver (uit stap 1).Met deze actie wordt de Docker-vermelding in het
launchSettings.json
-bestand gewijzigd en wordt de juiste URL gestart voor de lokale proxy die op de host wordt uitgevoerd. Zoek het bestandlaunchSettings.json
in Solution Explorer onder Eigenschappen.U zou iets als de volgende code moeten zien:
"profiles": { "Docker": { "commandName": "Docker", "launchBrowser": true, "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development", "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy" }, "launchUrl": "https://localhost:44407", "useSSL": true } }
Belangrijk
Stel de optie startinstellingen niet
publishAllPorts
in optrue
als u een proxy gebruikt. Met deze optie worden alle blootgestelde poorten naar een willekeurig poortnummer gepubliceerd, wat niet werkt wanneer u een specifieke poort instelt in de SPA-proxy.Open het bestand ClientApp/src/setupProxy.js en wijzig de regel waarmee het doel wordt ingesteld voor het gebruik van het
localhost
-adres en de poort op de container. U vindt de poort op het tabblad Poorten van het venster Containers.const target = 'https://localhost:{container-port}';
Als u HTTPS gebruikt, moet u de juiste poort voor HTTPS kiezen. Dit is 443 in deze zelfstudie.
Start de app met foutopsporing (F5-).
Als er een buildfout optreedt bij het schrijven van de uitvoerassembly's, moet u mogelijk een eerder uitgevoerde container stoppen om de bestanden te ontgrendelen.
Controleer of u een onderbrekingspunt in JavaScript-code aan de clientzijde kunt bereiken door een onderbrekingspunt in te stellen in ClientApp/src/components/Counter.js in de functie incrementCounter en probeer vervolgens op het onderbrekingspunt te klikken door op de knop Increment op de pagina Tellers te klikken.
Probeer vervolgens een onderbrekingspunt te bereiken in de ASP.NET Core-code aan de serverzijde. Stel een onderbrekingspunt in
WeatherController.cs
in, in de methodeGet
, en probeer/weatherforecast
toe te voegen aan de basis-localhost
en poort-URL om de code te activeren.Als de containerpoort verandert, wat kan gebeuren als u een belangrijke wijziging aanbrengt, zoals het bijwerken van
launchSettings.json
of het bijwerken van het opstartprofiel voor foutopsporing in de IDE, moet u de poort insetupProxy.js
bijwerken en de proxy ook opnieuw opstarten. Beëindig de huidige proxy (Ctrl+C- in het opdrachtvenster waarop deze wordt uitgevoerd) en start deze opnieuw met dezelfde opdrachtnpm run start
.
Selecteer Docker- in de vervolgkeuzelijst voor foutopsporing in de werkbalk en start de foutopsporing van de app. Mogelijk ziet u een bericht met een prompt over het vertrouwen van een certificaat; kies ervoor om het certificaat te vertrouwen om door te gaan. De eerste keer dat u bouwt, downloadt Docker de basisinstallatiekopieën, dus het kan wat langer duren.
De optie Container Tools in het venster Uitvoer laat zien welke acties worden uitgevoerd. U ziet nu de installatiestappen die zijn gekoppeld aan npm.exe.
In de browser wordt de startpagina van de app weergegeven.
Container-Venster
Open het hulpprogrammavenster Containers. U kunt het vinden in het menu onder Weergave>Andere Windows>Containers, of druk op Ctrl+Q en begin met containers
typen in het zoekvak en kies vervolgens het Containers venster uit de resultaten. Wanneer het venster wordt weergegeven, kunt u het onder aan het bewerkingspaneel vastmaken.
In het venster Containers worden de actieve containers weergegeven en kunt u informatie over deze containers bekijken. U kunt de omgevingsvariabelen, labels, poorten, volumes, het bestandssysteem en logboeken bekijken. Met de werkbalkknoppen kunt u een terminal (shellprompt) in de container maken, het foutopsporingsprogramma koppelen of ongebruikte containers verwijderen. Zie Het venster Containers gebruiken.
Klik op het tabblad Bestanden en vouw de map app
uit om de gepubliceerde toepassingsbestanden weer te geven.
U kunt ook de afbeeldingen bekijken en informatie erover inspecteren. Kies het tabblad Afbeeldingen, zoek de afbeelding voor uw project en kies vervolgens het tabblad Details om een json-bestand met informatie over een afbeelding weer te geven.
Notitie
De dev-installatiekopieën bevatten niet de binaire bestanden en andere inhoud van de app, omdat configuraties fouten opsporen configuraties volume koppelen gebruiken om de iteratieve bewerkings- en foutopsporingservaring te bieden. Als u een productieafbeelding met alle inhoud wilt maken, gebruikt u de configuratie Release.
Docker-installatiekopieën publiceren
Zodra de ontwikkel- en foutopsporingscyclus van de app is voltooid, kunt u een productie-image van de app maken.
Wijzig de vervolgkeuzelijst voor configuratie in Release en bouw de app.
Klik met de rechtermuisknop op uw project in Solution Explorer- en kies Publiceren.
Selecteer in het dialoogvenster voor publicatiedoel Docker-containerregister.
Kies vervolgens Azure Container Registry.
Kies Een nieuwe Azure Container Registry-maken.
Vul de gewenste waarden in het scherm Nieuwe Azure Container Registry- maken.
Instelling Voorgestelde waarde Beschrijving DNS-voorvoegsel Wereldwijd unieke naam De naam waarmee uw containerregister uniek wordt geïdentificeerd. abonnement Kies uw abonnement Het Azure-abonnement dat moet worden gebruikt. Resourcegroep myResourceGroup Naam van de resourcegroep waarin het containerregister moet worden gemaakt. Kies Nieuwe om een nieuwe resourcegroep te maken. SKU Standaard Servicelaag van het containerregister Registerlocatie Een locatie dicht bij u in de buurt Kies een locatie in een regio bij u in de buurt of in de buurt van andere services die gebruikmaken van uw containerregister. Selecteer maken en selecteer voltooien.
Wanneer het publicatieproces afloopt, kunt u de publicatie-instellingen controleren en deze bewerken, indien nodig, of de afbeelding opnieuw publiceren met behulp van de knop Publiceren.
Als u opnieuw wilt beginnen met het dialoogvenster Publiceren, verwijdert u het publicatieprofiel met behulp van de koppeling Verwijderen op deze pagina en kiest u opnieuw Publiceren.
Wijzig de vervolgkeuzelijst voor configuratie in Release en bouw de app.
Klik met de rechtermuisknop op uw project in Solution Explorer- en kies Publiceren.
Selecteer in het dialoogvenster Publicatiedoel Docker-containerregister.
Kies vervolgens Azure Container Registry.
Kies Een nieuwe Azure Container Registry-maken.
Vul de gewenste waarden in op het scherm Nieuwe Azure Container Registry maken.
Instelling Voorgestelde waarde Beschrijving DNS-voorvoegsel Wereldwijd unieke naam De naam waarmee uw containerregister uniek wordt geïdentificeerd. abonnement Kies uw abonnement Het te gebruiken Azure-abonnement. resourcegroep myResourceGroup Naam van de resourcegroep waarin het containerregister moet worden gemaakt. Kies Nieuwe om een nieuwe resourcegroep te maken. SKU Standaard Servicelaag van het containerregister Registerlocatie Een locatie dicht bij u in de buurt Kies een locatie in een regio bij u in de buurt of in de buurt van andere services die gebruikmaken van uw containerregister. Selecteer maken en selecteer voltooien.
Wanneer het publicatieproces afloopt, kunt u de publicatie-instellingen controleren en deze bewerken, indien nodig, of de afbeelding opnieuw publiceren met behulp van de knop Publiceren.
Als u opnieuw wilt beginnen met het dialoogvenster Publiceren, verwijdert u het publicatieprofiel met behulp van de koppeling Verwijderen op deze pagina en kiest u opnieuw Publiceren.
Volgende stappen
U kunt de container nu uit het register halen naar elke host die Docker-installatiekopieën kan uitvoeren, bijvoorbeeld Azure Container Instances.