Démarrage rapide : Utiliser Docker avec une application à page unique React dans Visual Studio

Avec Visual Studio, vous pouvez facilement générer, déboguer et exécuter des applications ASP .NET Core conteneurisées, y compris celles avec JavaScript côté client comme l’application à page unique React.js et les publier sur Azure Container Registry, Docker Hub, Azure App Service ou votre propre registre de conteneurs. Dans cet article, nous montrons comment publier sur Azure Container Registry.

Prérequis

• Docker Desktop
• Visual Studio 2022 avec la charge de travail Développement web, Outils Azure et/ou la charge de travail Développement multiplateforme .NET Core installée
• Pour publier sur Azure Container Registry, un abonnement Azure. Inscrivez-vous pour un essai gratuit.
• Node.JS
• Pour les conteneurs Windows, Windows 10 version 1809 ou ultérieure, pour utiliser les images Docker référencées dans cet article.

Installation et configuration

Pour l’installation Docker, commencez par passer en revue les informations contenues dans Docker Desktop for Windows: What to know before you install. Installez ensuite Docker Desktop.

Créer un projet et ajouter le support Docker

Suivez ces étapes si vous utilisez Visual Studio 2022 version 17.8 ou ultérieure :

1. Créez un projet à l'aide du modèle React et ASP.NET Core.

   

2. Sur l’écran Informations supplémentaires, vous ne pouvez pas sélectionner Activer le support Docker, mais ne vous inquiétez pas, vous pouvez ajouter ce support plus tard.

   

   Visual Studio crée deux projets : un pour le code client React JavaScript et un autre pour le code du serveur C# ASP.NET Core.

3. Faites un clic droit sur le nœud du projet serveur, puis choisissez Ajouter>Support Docker pour ajouter un fichier Dockerfile à votre projet.

   

4. Sélectionnez le type de conteneur.

Procédez comme suit pour Visual Studio 2022 version 17.0 à 17.7 :

1. Créez un projet à l’aide du modèle ASP.NET Core avec React.js.

   

2. Sur l’écran Informations supplémentaires, vous ne pouvez pas sélectionner Activer le support Docker, mais ne vous inquiétez pas, vous pouvez ajouter ce support plus tard.

   

3. Cliquez avec le bouton de droite sur le nœud du projet, puis choisissez Ajouter>Support Docker pour ajouter un fichier Dockerfile à votre projet.

   

4. Sélectionnez le type de conteneur.

L’étape suivante est différente selon que vous utilisez des conteneurs Linux ou Windows.

Modifier le Dockerfile (conteneurs Linux)

Un fichier Docker, la recette permettant de créer une image Docker finale, est créé dans le projet. Reportez-vous à Informations de référence sur Dockerfile pour comprendre les commandes qu’il contient.

Le fichier Dockerfile par défaut utilise une image de base pour exécuter le conteneur, mais lorsque vous souhaitez également exécuter une application Node.js sur celle-ci, vous devez installer Node.js. Par conséquent, vous devez ajouter des commandes d'installation à quelques emplacements dans le fichier Dockerfile. Les commandes d'installation nécessitent des niveaux d'autorisations élevés, car les modifications affectent les fichiers et dossiers système privilégiés du conteneur.

Quand la case Configurer pour HTTPS de la boîte de dialogue du nouveau projet est cochée, le fichier Dockerfile expose deux ports. Un port est utilisé pour le trafic HTTP tandis que l’autre est utilisé pour HTTPS. Si la case n’est pas cochée, un seul port (80) est exposé pour le trafic HTTP.

Si vous ciblez .NET 8 ou une version ultérieure, le fichier Docker par défaut créé par Visual Studio utilise le compte d'utilisateur normal (recherchez la ligne USER app), mais ce compte ne dispose pas des autorisations élevées requises pour installer Node.js. Pour tenir compte de cette situation, procédez comme suit :

1. Dans le fichier Dockerfile, supprimez la ligne USER app.
2. Remplacez les ports exposés dans la première section du fichier Dockerfile par le port 80 pour les requêtes HTTP et (si vous avez choisi de prendre en charge HTTPS lors de la création du projet) 443 pour les requêtes HTTPS.
3. Modifiez launchSettings.json pour modifier les références de port à 80 et 443. Remplacez 8080 par 80 pour HTTP, et 8081 par 443 pour HTTPS.

Pour toutes les versions de .NET, procédez comme suit pour mettre à jour le fichier Dockerfile pour installer Node.js :

1. Ajoutez les lignes suivantes pour installer curl, Node.js 14.x et certaines bibliothèques Node requises dans le conteneur. Veillez à ajouter ces lignes dans la première section, pour ajouter l’installation du gestionnaire de package de nœud npm.exe à l’image de base, ainsi que dans la section 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

Le Dockerfile doit ressembler à ceci :

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

Dans Visual Studio 2022 version 17.0 à 17.7, vous devriez voir ce qui suit :

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

Le Dockerfile précédent est basé sur l’image mcr.microsoft.com/dotnet/core/aspnet. Il comprend des instructions pour modifier l’image de base en générant votre projet et en l’ajoutant au conteneur.

Modifier le Dockerfile (conteneurs Windows)

Ouvrez le fichier projet en double-cliquant sur le nœud de projet, puis mettez à jour le fichier projet (*.csproj) en ajoutant la propriété suivante en tant qu’enfant de l’élément <PropertyGroup> :

 <DockerfileFastModeStage>base</DockerfileFastModeStage>

Remarque

La modification apportée à DockerfileFastModeStage est requise, car le fichier Dockerfile ajoute ici une étape au début du fichier Dockerfile. Pour optimiser les performances, Visual Studio utilise le mode Rapide, qui fonctionne uniquement si l'étape appropriée est utilisée. La valeur par défaut est la première étape du fichier Dockerfile, qui, dans cet exemple, est remplacée de base vers une autre étape pour télécharger Node.js. Pour plus d'informations sur le mode Rapide, reportez-vous à Personnaliser les conteneurs Docker dans Visual Studio.

Mettez à jour le fichier Dockerfile en ajoutant les lignes suivantes. Ces lignes copient Node et « npm » dans le conteneur.

1. Ajoutez # escape=` à la première ligne du fichier Dockerfile

2. Ajoutez les lignes suivantes avant 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. Ajoutez la ligne suivante avant et après FROM ... build

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

4. Le Dockerfile complet doit ressembler à ceci :

   #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. Mettez à jour le fichier .dockerignore en supprimant le fichier **/bin.

Débogage

Avec Visual Studio 2022 version 17.8 et version ultérieure et le modèle React et ASP.NET Core, les projets sont déjà configurés pour démarrer les projets client et serveur avec prise en charge du débogage.

Si vous utilisez une version antérieure de Visual Studio, poursuivez la lecture pour configurer le débogage avec le serveur proxy d’application monopage SPA.

Le projet utilise le proxy SPA pendant le débogage. Consultez Modèles d’application monopage (SPA) améliorés. Lors du débogage, le client JavaScript s’exécute sur l’ordinateur hôte, mais le code du serveur ASP.NET Core s’exécute dans le conteneur. Une fois publié, le proxy n'est pas exécuté et le code client s'exécute sur le même serveur que le code ASP.NET Core. Vous disposez déjà d’un profil de débogage *Docker que vous pouvez utiliser pour déboguer le code du serveur. Pour déboguer le code client JavaScript, vous pouvez créer un profil de débogage supplémentaire. Vous devez également démarrer le proxy manuellement à partir d'une invite de commandes lors du débogage de JavaScript. Vous pouvez le laisser s’exécuter lors de plusieurs sessions de débogage.

1. Générez le projet, s’il ne l’est pas déjà.

2. Ouvrez une invite de commandes de développement Visual Studio, accédez au dossier ClientApp de votre projet, puis exécutez la commande npm run start. Un résultat semblable à celui-ci doit s’afficher :

   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
   

   Remarque

   Notez l’URL locale. Vous devez le fournir dans un profil de lancement de débogage, qui est stocké dans votre fichier launchSettings.json.

3. Ouvrez la liste déroulante qui contient des profils de débogage (en regard de l’icône de triangle vert ou du bouton Démarrer), choisissez Propriétés de débogage de {ProjectName}, puis choisissez le profil Docker.

4. Vérifiez la section Variables d’environnement et ajoutez les variables d’environnement suivantes si elles ne sont pas déjà présentes :

   ASPNETCORE_ENVIRONMENT=Development,ASPNETCORE_HOSTINGSTARTUPASSEMBLIES=Microsoft.AspNetCore.SpaProxy

5. Définissez URL sur https://localhost:{proxy-port} où {proxy-port} est le port du serveur proxy (à l’étape 1).

   

   Cette action modifie l’entrée Docker dans le fichier launchSettings.json et lance l’URL appropriée pour le proxy local s’exécutant sur l’hôte. Recherchez le fichier launchSettings.json dans l'explorateur de solutions sous Propriétés.

6. Vous devriez voir quelque chose qui ressemble au code qui suit :

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

   Important

   Ne définissez pas l'option de paramètres de lancement publishAllPorts sur true si vous utilisez un proxy. Cette option publie tous les ports exposés sur un port aléatoire, ce qui ne fonctionne pas lorsque vous définissez un port spécifique dans le proxy SPA.

7. Ouvrez le fichier ClientApp/src/setupProxy.js et modifiez la ligne qui définit la cible pour utiliser l’adresse et le port localhost sur le conteneur. Vous trouverez le port sous l’onglet Ports de la fenêtre Conteneurs.

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

   Si vous utilisez HTTPS, veillez à choisir le port approprié pour HTTPS, qui est 443 dans ce tutoriel.

8. Lancez l’application avec le débogage (F5).

   

   Si vous recevez une erreur de build lors de la tentative d’écriture des assemblys de sortie, vous devrez peut-être arrêter un conteneur en cours d’exécution pour déverrouiller les fichiers.

9. Vérifiez que vous pouvez atteindre un point d’arrêt dans le code JavaScript côté client en définissant un point d’arrêt dans ClientApp/src/components/Counter.js dans la fonction incrementCounter, puis essayez d’atteindre le point d’arrêt en cliquant sur le bouton Incrémenter de la page Compteurs.

   

10. Ensuite, essayez d’atteindre un point d’arrêt dans le code ASP.NET Core côté serveur. Placez un point d'arrêt en WeatherController.cs dans la méthode Get et essayez d'ajouter /weatherforecast à la base localhost et à l'URL du port pour activer ce code.

    

11. Si le port du conteneur change, ce qui peut se produire si vous apportez une modification significative, par exemple la mise à jour de launchSettings.json ou du profil de lancement de débogage dans l'IDE, vous devez mettre à jour le port dans setupProxy.js et redémarrer également le proxy. Arrêtez le proxy actuel (Ctrl+C dans la fenêtre de commande où il s’exécute), puis redémarrez-le à l’aide de la même commande npm run start.

Fenêtre Conteneurs

Ouvrez la fenêtre d’outils Conteneurs. Vous pouvez la trouver dans le menu sous Affichage>Autres fenêtres>Conteneurs, ou en appuyant sur Ctrl+Q et en commençant à taper containers dans la zone de recherche ; choisissez ensuite la fenêtre Conteneurs dans les résultats. Lorsque la fenêtre s’affiche, ancrez-la en bas sous le volet de l’éditeur.

La fenêtre Conteneurs affiche les conteneurs en cours d’exécution et vous permet d’afficher des informations les concernant. Vous pouvez afficher les variables d’environnement, les étiquettes, les ports, les volumes, le système de fichiers et les journaux. Les boutons de la barre d’outils vous permettent de créer un terminal (invite shell) à l’intérieur du conteneur, d’attacher le débogueur ou d’élaguer les conteneurs inutilisés. Voir Utiliser la fenêtre Conteneurs.

Cliquez sur l’onglet Fichiers, puis développez le dossier app pour afficher vos fichiers d’application publiés.

Vous pouvez également afficher les images et inspecter les informations les concernant. Choisissez l’onglet Images, recherchez celui de votre projet, puis choisissez l’onglet Détails pour afficher un fichier json qui contient des informations sur une image.

Notes

L’image dev ne contient pas les fichiers binaires de l’application ni aucun autre contenu. En effet, les configurations Debug utilisent le montage de volume pour fournir l’expérience de modification et de débogage itérative. Pour créer une image de production incluant tout le contenu, utilisez la configuration Release.

Publier des images Docker

Une fois le cycle de développement et de débogage de l’application effectué, vous pouvez créer une image de production de l’application.

1. Changez la liste déroulante de configuration en Libérer et générez l’application.

2. Cliquez avec le bouton droit sur votre projet dans l’Explorateur de solutions et choisissez Publier.

3. Dans la boîte de dialogue de la cible de publication, sélectionnez l’onglet Docker Container Registry.

   

4. Ensuite, choisissez Azure Container Registry.

   

5. Choisissez Créer une instance Azure Container Registry.

6. Renseignez les valeurs souhaitées dans l’écran Créer un registre de conteneurs Azure.

   Paramètre	Valeur suggérée	Description
   Préfixe DNS	Nom globalement unique	Nom qui identifie uniquement votre registre de conteneurs.
   Abonnement	Choisir votre abonnement	Sélectionnez l’abonnement Azure à utiliser.
   Groupe de ressources	myResourceGroup	Nom du groupe de ressources où créer votre registre de conteneurs. Choisissez Nouveau pour créer un groupe de ressources.
   Référence SKU	Standard	Niveau de service du registre de conteneurs
   Emplacement du registre	Un emplacement proche de vous	Choisissez un emplacement dans une région près de chez vous ou près d'autres services qui peuvent utiliser votre registre de conteneurs.

   

7. Sélectionnez Créer, puis Terminer.

   

   Lorsque le processus de publication se termine, vous pouvez passer en revue les paramètres de publication et les modifier, si nécessaire, ou publier à nouveau l’image à l’aide du bouton Publier.

   

   Pour recommencer avec la boîte de dialogue Publier, supprimez le profil de publication à l’aide du lien Supprimer sur cette page, puis choisissez à nouveau Publier.

Étapes suivantes

Vous pouvez désormais extraire le conteneur à partir du registre sur tout hôte en mesure d’exécuter des images Docker, par exemple Azure Container Instances.

Ressources supplémentaires

• Développement de conteneurs avec Visual Studio
• Détecter un problème de développement Visual Studio avec Docker
• Référentiel GitHub des outils de conteneur Visual Studio