Créer une application multiconteneur avec Docker ComposeCreate a Multi-Container App with Docker Compose

Dans ce didacticiel, vous allez apprendre à gérer plusieurs conteneurs et communiquer entre eux lorsque vous utilisez Docker Compose dans Visual Studio pour Mac.In this tutorial, you'll learn how to manage more than one container and communicate between them when using Docker Compose in Visual Studio for Mac.

PrérequisPrerequisites

Créer une application web ASP.NET Core et ajouter la prise en charge de DockerCreate an ASP.NET Core Web Application and Add Docker Support

  1. Créez une solution en accédant à Fichier > Nouvelle solution.Create a new solution by going to File > New Solution.
  2. Sous Web et Console > application, choisissez le modèle application Web :  créer une application ASP.netUnder Web and Console > App choose the Web Application template: Create a new ASP.NET application
  3. Sélectionnez le framework cible.Select the target framework. Dans cet exemple, nous allons utiliser .NET Core 3,1 : définir la version cible de .NET  FrameworkIn this example we will use .NET Core 3.1: Set target framework
  4. Entrez les détails du projet, comme le nom du projet ( DockerDemoFrontEnd dans cet exemple) et le nom de la solution ( DockerDemo ).Enter the project details, such as Project Name ( DockerDemoFrontEnd in this example) and Solution Name ( DockerDemo ). Le projet créé contient tous les éléments de base pour générer et exécuter un site web ASP.NET Core.The created project contains all the basics you need to build and run an ASP.NET Core web site.
  5. Dans la fenêtre de la solution, cliquez avec le bouton droit sur le projet DockerDemoFrontEnd et sélectionnez ajouter > ajouter la prise en charge de l’ancrage :  Ajouter la prise en charge de l’ancrageIn the Solution Window, right click the DockerDemoFrontEnd project and select Add > Add Docker Support : Add docker support

Visual Studio pour Mac ajoute automatiquement un nouveau projet appelé docker-compose à votre solution et un Dockerfile à votre projet existant.Visual Studio for Mac will automatically add a new project to your solution called docker-compose and add a Dockerfile to your existing project.

Créer une API web ASP.NET Core et ajouter la prise en charge de DockerCreate an ASP.NET Core Web API and Add Docker Support

Ensuite, nous allons créer un deuxième projet qui servira d’API principale.Next we will create a second project which will act as our backend API. Le modèle API .NET Core modèle inclut un contrôleur qui permet de gérer les requêtes RESTful.The .NET Core API template includes a controller that allows us to handle RESTful requests.

  1. Ajoutez un nouveau projet à la solution existante en cliquant sur la solution et en choisissant Ajouter > Ajouter un nouveau projet.Add a new project to the existing solution by right-clicking on the solution and choosing Add > Add New Project.
  2. Sous Web et Console > application, choisissez le modèle API .Under Web and Console > App choose the API template.
  3. Sélectionnez le framework cible.Select the target framework. Dans cet exemple, nous allons utiliser .NET Core 3,1.In this example we will use .NET Core 3.1.
  4. Entrez les détails du projet, tels que le nom du projet ( MyWebAPI dans cet exemple).Enter the project details, such as Project Name ( MyWebAPI in this example).
  5. Une fois créé, accédez à la fenêtre de la solution et cliquez avec le bouton droit sur le projet MyWebAPI, puis sélectionnez ajouter > ajouter la prise en charge de l’ancrage.Once created, go to the Solution Window and right click the MyWebAPI project and select Add > Add Docker Support.

Le fichier docker-compose.yml dans le projet docker-compose sera automatiquement mis à jour pour inclure le projet d’API en plus du projet d’application web existant.The docker-compose.yml file in the docker-compose project will be automatically updated to include the API project alongside the existing Web App project. Lorsque nous générons et exécutons le projet docker-compose , chacun de ces projets est déployé sur un conteneur Docker distinct.When we build and run the docker-compose project, each of these projects will be deployed to a separate Docker container.

version: '3.4'

services:
  dockerdemofrontend:
    image: ${DOCKER_REGISTRY-}dockerdemofrontend
    build:
      context: .
      dockerfile: DockerDemoFrontEnd/Dockerfile

  mywebapi:
    image: ${DOCKER_REGISTRY-}mywebapi
    build:
      context: .
      dockerfile: MyWebAPI/Dockerfile

Intégrer les deux conteneursIntegrate The Two Containers

Nous avons maintenant deux projets ASP.NET dans notre solution, et les deux sont configurés avec la prise en charge Docker.We now have two ASP.NET projects in our solution and both are configured with Docker support. Ensuite, nous devons ajouter du code !Next we need to add some code!

  1. Dans le DockerDemoFrontEnd projet, ouvrez le fichier pages/index. cshtml. cs et remplacez la OnGet méthode par le code suivant :In the DockerDemoFrontEnd project, open the Pages/Index.cshtml.cs file, and replace the OnGet method with the following code:

     public async Task OnGet()
     {
        ViewData["Message"] = "Hello from webfrontend";
    
        using (var client = new System.Net.Http.HttpClient())
        {
           // Call *mywebapi*, and display its response in the page
           var request = new System.Net.Http.HttpRequestMessage();
           request.RequestUri = new Uri("http://mywebapi/WeatherForecast");
           var response = await client.SendAsync(request);
           ViewData["Message"] += " and " + await response.Content.ReadAsStringAsync();
        }
     }
    

    Notes

    Dans le code de production, vous ne devez pas supprimer HttpClient après chaque demande.In production code, you shouldn't dispose HttpClient after every request. Pour connaître les meilleures pratiques, consultez utiliser HttpClientFactory pour implémenter des demandes http résilientes.For best practices, see Use HttpClientFactory to implement resilient HTTP requests.

  2. Dans le fichier Index.cshtml , ajoutez une ligne pour afficher ViewData["Message"] afin que le fichier ressemble à ce qui suit :In the Index.cshtml file, add a line to display ViewData["Message"] so that the file looks like the following code:

    @page
    @model IndexModel
    @{
        ViewData["Title"] = "Home page";
    }
    
    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
        <p>@ViewData["Message"]</p>
    </div>
    
  3. Dans les projets de serveur frontal et d’API Web, commentez l’appel à Microsoft. AspNetCore. Builder. HttpsPolicyBuilderExtensions. UseHttpsRedirection dans la Configure méthode de Startup.cs , car cet exemple de code utilise http, et non HTTPS, pour appeler l’API Web.In both the Front End and Web API projects, comment out the call to Microsoft.AspNetCore.Builder.HttpsPolicyBuilderExtensions.UseHttpsRedirection in the Configure method in Startup.cs , because this sample code uses HTTP, not HTTPS, to call the Web API.

                //app.UseHttpsRedirection();
    
  4. Définissez le projet docker-compose comme projet de démarrage et accédez à Exécuter > Démarrer le débogage.Set the docker-compose project as the startup project and go to Run > Start Debugging. Si tout est correctement configuré, vous voyez le message « Hello from webfrontend and webapi (with value 1). » :If everything is configured correctly, you see the message "Hello from webfrontend and webapi (with value 1).":

Solution Docker à plusieurs conteneurs en cours d’exécution