Exercice - Ajouter OpenTelemetry à une application native cloud

7 minutes

Dans cet exercice, vous ajouterez un nouveau projet de diagnostic à votre solution eShopLite. Vous verrez comment inclure les packages NuGet OpenTelemetry, puis comment ajouter de l’observabilité au service Produits.

Ouvrir l’environnement de développement et créer les ressources Azure

Vous pouvez choisir d’utiliser un codespace GitHub qui héberge l’exercice ou effectuer l’exercice localement dans Visual Studio Code.

Pour utiliser un codespace, créez un codespace GitHub préconfiguré avec ce modèle de création d’un codespace.

Il faut plusieurs minutes pour que GitHub crée et configure le codespace. Une fois le processus terminé, les fichiers de code de l’exercice sont visibles. Le code utilisé pour le reste de ce module se trouve dans le répertoire /dotnet-observability.

Pour utiliser Visual Studio Code, clonez le référentiel https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative sur votre ordinateur local. Ensuite :

Installez la configuration requise pour exécuter le conteneur de développement dans Visual Studio Code.
Vérifiez que Docker est en cours d’exécution.
Dans une nouvelle fenêtre Visual Studio Code, ouvrez le dossier du référentiel cloné.
Appuyez sur Ctrl+Maj+P pour ouvrir la palette de commandes.
Recherche : >Conteneurs de développement : regénérer et rouvrir dans un conteneur
Sélectionnez eShopLite - dotnet-observabilité dans la liste déroulante. Visual Studio Code crée votre conteneur de développement localement.

Ajouter un projet de diagnostic à la solution

La première étape de l’ajout de l’observabilité à l’application eShopLite consiste à introduire un nouveau projet de diagnostic à la solution. Ce projet contient la totalité des packages et des configurations OpenTelemetry que vous utiliserez pour ajouter l’observabilité à l’application.

Dans la palette de commandes de Visual Studio Code, entrez >.NET : Ouvrir une solution.
Sélectionnez dotnet-observability/eShopLite/eShopLite.sln.
Dans l’Explorateur de solutions, en bas du volet EXPLORATEUR, cliquez avec le bouton droit sur la solution eShopLite, puis sélectionnez Nouveau projet.
Dans la boîte de dialogue Sélectionner un modèle pour créer un projet .NET, sélectionnez Bibliothèque de classes (Commun, Bibliothèque).
Dans le champ Nom, entrez Diagnostics.
Dans le menu déroulant Le projet sera créé dans, sélectionnez le Répertoire par défaut.

Ajouter les packages OpenTelemetry

Maintenant, ajoutez les packages OpenTelemetry au nouveau projet de diagnostic.

À l’aide du volet TERMINAL en bas de Visual Studio Code, accédez au dossier du projet Diagnostics :
```
cd dotnet-observability/eShopLite/Diagnostics
```

Exécutez ces commandes dotnet add :

dotnet add package OpenTelemetry.Exporter.Console
dotnet add package OpenTelemetry.Extensions.Hosting
dotnet add package OpenTelemetry.Instrumentation.AspNetCore
dotnet add package OpenTelemetry.Instrumentation.EventCounters --prerelease
dotnet add package OpenTelemetry.Instrumentation.Runtime
dotnet add package OpenTelemetry.Instrumentation.SqlClient --prerelease
dotnet add package OpenTelemetry.Instrumentation.Http

Dans le volet EXPLORATEUR, développez le dossier Diagnostics, puis sélectionnez Diagnostics.csproj.
Remplacez Project Sdk en haut par :
```
<Project Sdk="Microsoft.NET.Sdk.Web">
```
Le code précédent vous permet d’utiliser la classe IConfiguration dans votre code.
Dans <PropertyGroup>, ajoutez le type de sortie :
```
<OutputType>Library</OutputType>
```
Le code précédent garantit que le projet est généré en tant que bibliothèque. Sinon, le compilateur attend un fichier Program.cs avec une méthode main.

Ajouter le code pour utiliser OpenTelemetry

Maintenant que les packages OpenTelemetry ont été ajoutés, introduisez le code pour les utiliser.

Dans le volet EXPLORATEUR, cliquez avec le bouton droit sur le fichier Class1.cs, puis sélectionnez Renommer.
Renommez le fichier DiagnosticServiceCollectionExtensions.cs.

Remplacez le code dans le fichier par le code suivant :

using OpenTelemetry.Metrics;
using OpenTelemetry.Resources;
using OpenTelemetry.Trace;

namespace Microsoft.Extensions.DependencyInjection;

public static class DiagnosticServiceCollectionExtensions
{
  public static IServiceCollection AddObservability(this IServiceCollection services,
      string serviceName,
      IConfiguration configuration)
  {
    // create the resource that references the service name passed in
    var resource = ResourceBuilder.CreateDefault().AddService(serviceName: serviceName, serviceVersion: "1.0");

    // add the OpenTelemetry services
    var otelBuilder = services.AddOpenTelemetry();

    otelBuilder
        // add the metrics providers
        .WithMetrics(metrics =>
        {
          metrics
            .SetResourceBuilder(resource)
            .AddRuntimeInstrumentation()
            .AddAspNetCoreInstrumentation()
            .AddHttpClientInstrumentation()
            .AddEventCountersInstrumentation(c =>
            {
              c.AddEventSources(
                      "Microsoft.AspNetCore.Hosting",
                      "Microsoft-AspNetCore-Server-Kestrel",
                      "System.Net.Http",
                      "System.Net.Sockets");
            })
            .AddMeter("Microsoft.AspNetCore.Hosting", "Microsoft.AspNetCore.Server.Kestrel")
            .AddConsoleExporter();

        })
        // add the tracing providers
        .WithTracing(tracing =>
        {
          tracing.SetResourceBuilder(resource)
                      .AddAspNetCoreInstrumentation()
                      .AddHttpClientInstrumentation()
                      .AddSqlClientInstrumentation();
        });

    return services;
  }
}

Dans le volet TERMINAL, exécutez cette commande pour générer le projet :
```
dotnet build
```
La sortie doit ressembler à cet exemple :
```
Build succeeded.
    0 Warning(s)
    0 Error(s)
```
Le projet Diagnostics est maintenant prêt à être utilisé par le service Produits.
Dans le volet EXPLORATEUR, sous EXPLORATEUR DE SOLUTIONS, cliquez avec le bouton droit sur le projet Produits, puis sélectionnez Ajouter une référence de projet.
Sélectionnez Diagnostics.
Dans le volet EXPLORATEUR, développez le dossier Produits, puis sélectionnez Program.cs.
Sous le commentaire de code // Add observability code here, ajoutez un appel à la méthode Diagnostics :
```
builder.Services.AddObservability("Products", builder.Configuration);
```
Dans le volet TERMINAL, accédez au dossier Produits :
```
cd ../Products
```
Exécutez cette commande pour générer le projet :
```
dotnet build
```
La sortie doit ressembler à cet exemple :
```
Build succeeded.
    0 Warning(s)
    0 Error(s)
```

Mettre à jour les paramètres Docker et exécuter l’application

Dans le volet TERMINAL, accédez à la racine du dossier dotnet-observability :
```
cd ..
dotnet publish /p:PublishProfile=DefaultContainer
```
Exécutez ces commandes Docker :
```
cd /workspaces/mslearn-dotnet-cloudnative/dotnet-observability/
docker compose up 
```
Les conteneurs back-end (service Produits) et front-end (service Magasin) doivent être générés. Ensuite, l’application démarre.
Si vous effectuez cet exercice dans un codespace, sélectionnez l’onglet PORTS en bas de la fenêtre Visual Studio Code. Sélectionnez le lien Ouvrir dans le navigateur à côté du service Front End.
Si vous effectuez cet exercice localement dans Visual Studio Code, sous un nouvel onglet de navigateur, accédez à l’application sur http://localhost:32000.
Dans l’application, sélectionnez Produits dans la barre de navigation.
Sélectionnez Mettre à jour le stock pour plusieurs produits. Ensuite, dans la boîte de dialogue, modifiez la valeur du stock, puis sélectionnez Mettre à jour.

Sélectionnez l’onglet TERMINAL, puis faites défiler les messages. Notez qu’il y a des messages d’OpenTelemetry comme par exemple :

backend-1   | Export ec.Microsoft-AspNetCore-Server-Kestrel.connection-queue-length, Meter: OpenTelemetry.Instrumentation.EventCounters/1.5.1.1
backend-1   | (2023-11-09T19:55:14.8933518Z, 2023-11-09T20:04:44.8596671Z] http.request.method: PUT http.response.status_code: 200 http.route: /api/Stock/{id} network.protocol.name: http network.protocol.version: 1.1 url.scheme: http Histogram      
backend-1   | Value: Sum: 0.05144170000000001 Count: 4 Min: 0.0039736 Max: 0.0359739

Appuyez sur Ctrl+C pour arrêter l’application.