Übung – Hinzufügen von OpenTelemetry zu einer cloudnativen Anwendung

Abgeschlossen

In dieser Übung fügen Sie Ihrer eShopLite-Lösung ein neues Diagnoseprojekt hinzu. Sie erfahren, wie Sie die NuGet-Pakete für OpenTelemetry einschließen und dann dem Dienst Produkte Einblicke hinzufügen.

Öffnen der Entwicklungsumgebung und Erstellen der Azure-Ressourcen

Sie können einen GitHub-Codespace als Host für die Übung verwenden oder die Übung lokal in Visual Studio Code durchführen.

Wenn Sie einen Codespace verwenden möchten, müssen Sie einen vorkonfigurierten GitHub-Codespace über diese Codespace-Erstellungsvorlage erstellen.

Dieser Schritt dauert mehrere Minuten, während GitHub den Codespace erstellt und konfiguriert. Wenn der Prozess abgeschlossen ist, sehen Sie die Codedateien für die Übung. Der für den Rest dieses Moduls verwendete Code befindet sich im Verzeichnis /dotnet-observability.

Um Visual Studio Code zu verwenden, klonen Sie das Repository https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative auf Ihrem lokalen Computer. Führen Sie dann folgende Schritte aus:

  1. Installieren Sie alle Systemanforderungen, um Dev Container in Visual Studio Code ausführen zu können.
  2. Achten Sie darauf, dass Docker ausgeführt wird.
  3. Öffnen Sie in einem neuen Visual Studio Code-Fenster den Ordner des geklonten Repositorys.
  4. Drücken Sie STRG+UMSCHALT+P, um die Befehlspalette zu öffnen.
  5. Suche: >Dev-Container: In Container neu erstellen und erneut öffnen
  6. Wählen Sie eShopLite – dotnet-observability aus der Dropdownliste aus. Visual Studio Code erstellt Ihren Entwicklungscontainer lokal.

Hinzufügen eines Diagnoseprojekts zur Lösung

Der erste Schritt zum Hinzufügen von Einblicken zur eShopLite-App besteht darin, ein neues Diagnoseprojekt für die Lösung einzuführen. Dieses Projekt enthält alle OpenTelemetry-Pakete und -Konfigurationen, die Sie verwenden werden, um der App Einblicke hinzuzufügen.

  1. Geben Sie in der Visual Studio Code-Befehlspalette >.NET ein: Öffnen Sie die Projektmappe.
  2. Wählen Sie dotnet-observability/eShopLite/eShopLite.sln aus.
  3. Klicken Sie im Projektmappen-Explorer unten im EXPLORER-Bereich mit der rechten Maustaste auf die eShopLite-Lösung, und wählen Sie dann Neues Projekt aus.
  4. Wählen Sie im Dialogfeld Eine Vorlage auswählen, um ein neues .NET-Projekt zu erstellen die Klassenbibliothek (Allgemein, Bibliothek) aus.
  5. Geben Sie im Feld Name den Wert Diagnose ein.
  6. Wählen Sie im Dropdownmenü Projekt wird erstellt in die Option Standardverzeichnis aus.

Hinzufügen von OpenTelemetry-Paketen

Fügen Sie nun dem neuen Diagnoseprojekt die OpenTelemetry-Pakete hinzu.

  1. Wechseln Sie mithilfe des Bereichs TERMINAL am unteren Rand von Visual Studio Code zum Projektordner Diagnose:

    cd dotnet-observability/eShopLite/Diagnostics
    
  2. Führen Sie diese dotnet add-Befehle aus:

    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
    
  3. Erweitern Sie im Bereich EXPLORER den Ordner Diagnose, und wählen Sie dann Diagnostics.csproj aus.

  4. Ändern Sie den Project Sdk am oberen Rand in:

    <Project Sdk="Microsoft.NET.Sdk.Web">
    

    Mit dem vorstehenden Code können Sie die IConfiguration-Klasse in Ihrem Code verwenden.

  5. Fügen Sie im <PropertyGroup> den Ausgabetyp hinzu:

    <OutputType>Library</OutputType>
    

    Der vorstehende Code stellt sicher, dass das Projekt als Bibliothek erstellt wird. Andernfalls erwartet der Compiler eine Program.cs-Datei mit einer main-Methode.

Hinzufügen des Codes zur Verwendung von OpenTelemetry

Nachdem die OpenTelemetry-Pakete hinzugefügt wurden, führen Sie nun den Code ein, um sie zu verwenden.

  1. Klicken Sie im Bereich EXPLORER mit der rechten Maustaste auf die Datei Class1.cs, und wählen Sie dann Umbenennen aus.

  2. Benennen Sie die Datei in DiagnosticServiceCollectionExtensions.cs um.

  3. Ersetzen Sie den Code in der Datei durch folgenden Code:

    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;
      }
    }
    
  4. Führen Sie im Bereich TERMINAL folgenden Befehl aus, um das Projekt zu erstellen:

    dotnet build
    

    Die Ausgabe sollte folgendem Beispiel entsprechen:

    Build succeeded.
        0 Warning(s)
        0 Error(s)
    
  5. Das Diagnose-Projekt kann jetzt vom Dienst Produkte verwendet werden.

  6. Klicken Sie im Bereich EXPLORER unter PROJEKTMAPPEN-EXPLORER mit der rechten Maustaste auf das Projekt Products, und wählen Sie anschließend Projektverweis hinzufügen aus.

  7. Wählen Sie Diagnose.

  8. Erweitern Sie im Bereich EXPLORER den Ordner Products, und wählen Sie dann Program.cs aus.

  9. Fügen Sie unter dem Codekommentar // Add observability code here einen Aufruf der Diagnosemethode hinzu:

    builder.Services.AddObservability("Products", builder.Configuration);
    
  10. Wechseln Sie im Bereich TERMINAL zum Ordner Products:

    cd ../Products
    
  11. Führen Sie diesen Befehl aus, um das Projekt zu erstellen:

    dotnet build
    

    Die Ausgabe sollte folgendem Beispiel entsprechen:

    Build succeeded.
        0 Warning(s)
        0 Error(s)
    

Aktualisieren von Docker-Einstellungen und Ausführen der App

  1. Wechseln Sie im Bereich TERMINAL zum Stammverzeichnis des Ordners dotnet-observability:

    cd ..
    dotnet publish /p:PublishProfile=DefaultContainer
    
  2. Führen Sie diese Docker-Befehle aus:

    cd /workspaces/mslearn-dotnet-cloudnative/dotnet-observability/
    docker compose up 
    

    Der Back-End-Container (Dienst Products) und der Front-End-Container (Dienst Store) sollten erstellt werden. Dann wird die App gestartet.

  3. Wenn Sie diese Übung in einem Codespace ausführen, wählen Sie unten im Visual Studio Code-Fenster die Registerkarte PORTS aus. Wählen Sie den Link Im Browser öffnen neben dem Front-End-Dienst aus.

  4. Wenn Sie diese Übung lokal in Visual Studio Code ausführen, wechseln Sie auf einer neuen Browserregisterkarte zur App unter http://localhost:32000.

  5. Wählen Sie in der App in der Navigationsleiste die Option Produkte aus.

    Screenshot: Die Seite „Produkte“ in der eShopLite-App Die Seite enthält eine Liste von Produkten mit Namen, Beschreibung und Preis sowie eine Schaltfläche zum Aktualisieren des Bestands.

  6. Wählen Sie Update Stock für mehrere Produkte aus. Ändern Sie dann im Dialogfeld den Bestandswert, und wählen Sie Update aus.

  7. Wählen Sie die Registerkarte TERMINAL aus, und scrollen Sie durch die Meldungen. Beachten Sie, dass Nachrichten aus OpenTelemetry vorhanden sind wie beispielsweise:

    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
    
  8. Drücken Sie STRG+C, um die App zu beenden.

Sie haben dem Dienst Products erfolgreich OpenTelemetry hinzugefügt. In der nächsten Lerneinheit erfahren Sie, wie Sie die Telemetriedaten besser nutzen können, indem Sie diese in Tools wie Prometheus und Grafana anzeigen.