演習 - クラウドネイティブ アプリケーションで OpenTelemetry データを使う

• 15 分

この演習では、アプリ内の OpenTelemetry によって生成されたすべてのデータの可視性を向上させます。 Store サービスへの診断機能の追加を完了させます。 それが完了したら、Prometheus と Grafana を eShopLite サービスに追加し、取り込まれているメトリックの一部を確認します。 次の手順では、Zipkin を追加し、分散トレースを表示します。 最後に、Application Insights をアプリに追加し、それを使用してデータを表示します。

Prometheus と Grafana を追加する

Prometheus と Grafana には、プロジェクトに簡単に追加できる Docker イメージが用意されています。 ソリューションのルートにある docker-compose.yml ファイルに含めます。

1. Visual Studio Code の [エクスプローラー] ペインで、docker-compose.yml ファイルを選びます。

2. この YAML をファイルの末尾に追加します。

     prometheus:
       image: prom/prometheus
       container_name: prometheus
       command:
         - '--config.file=/etc/prometheus/prometheus.yml'
       ports:
         - 9090:9090
       restart: unless-stopped
       volumes:
         - ./prometheus:/etc/prometheus
   
     grafana:
       image: grafana/grafana
       container_name: grafana
       ports:
         - 3000:3000
       restart: unless-stopped
       environment:
         - GF_SECURITY_ADMIN_USER=admin
         - GF_SECURITY_ADMIN_PASSWORD=grafana
       volumes:
         - ./grafana/datasource:/etc/grafana/provisioning/datasources
   

上記の Docker yaml により、Prometheus と Grafana という 2 つの新しいサービスが追加されます。 Prometheus セクションでは、ポート 9090 で応答するようにコンテナーを構成します。 prometheus.yml ファイルを想定して prometheus フォルダーがマップされます。 Grafana セクションでは、ポート 3000で応答するようにコンテナーを構成します。 grafana フォルダー内の 3 つのフォルダーがマップされます。

Prometheus を構成する

Prometheus は、メトリックを収集する場所を認識できるように構成する必要があります。 prometheus.yml ファイルを prometheus フォルダーに追加します。

1. Visual Studio Code の [エクスプローラー] ペインで、dotnet-observability フォルダーを右クリックし、[新しいフォルダー] を選びます。

2. [名前] フィールドに「prometheus」と入力します。

3. [エクスプローラー] ペインで、prometheus フォルダーを右クリックし、[新しいファイル] を選びます。

4. [名前] フィールドに「prometheus.yml」と入力します。

5. ファイル エディターで、次の YAML を入力します。

   global:
     scrape_interval: 1s
   
   scrape_configs:
     - job_name: 'products'
       static_configs:
         - targets: ['backend:8080']
     - job_name: 'store'
       static_configs:
         - targets: ['frontend:8080']
   

   上記の YAML は、バックエンドとフロントエンドのサービスからメトリックをスクレイピングするように Prometheus を構成します。 アプリは Docker で実行されているため、そのホスト名がサービス名になります。

6. Ctrl+S を選択して、ファイルを保存します。

Grafana の構成

Grafana は、メトリックを収集する場所を認識できるように構成する必要があります。

1. Visual Studio Code の [エクスプローラー] ペインで、dotnet-observability フォルダーを右クリックし、[新しいフォルダー] を選びます。

2. [名前] フィールドに、「grafana」と入力します。

3. grafana フォルダーを右クリックし、[新しいフォルダー] を選びます。

4. [名前] フィールドに、「datasource」と入力します。

5. grafana フォルダーを右クリックし、[新しいフォルダー] を選びます。

6. [名前] フィールドに、「dashboard」と入力します。

7. grafana フォルダーを展開し、datasource フォルダーを右クリックし、[新しいファイル] を選びます。

8. [名前] フィールドに、「datasource.yml」と入力します。

9. [エディター] タブで、次の YAML を入力します。

   apiVersion: 1
   
   datasources:
   - name: Prometheus
     type: prometheus
     url: http://prometheus:9090 
     isDefault: true
     access: proxy
     editable: true
   

   上記の YAML は、データ ソースとして Prometheus を使用するように Grafana を構成します。

10. Ctrl+S を選択して、ファイルを保存します。

Prometheus にメトリックを公開するように ASP.NET Core アプリを更新する

現在、診断プロジェクトは、コンソールに対してのみメトリックを公開するように構成されています。 代わりに、Prometheus にメトリックを公開するようにプロジェクトを更新します。

1. Visual Studio Code の下部にある [ターミナル] ペインで、Diagnostics フォルダーに移動します。

2. このコマンドを実行します。

   cd .\eShopLite\Diagnostics\ 
   

3. OpenTelemetry.Exporter.Console パッケージを削除します。

   dotnet remove package OpenTelemetry.Exporter.Console
   

4. OpenTelemetry.Exporter.Prometheus.AspNetCore パッケージを追加します。

   dotnet add package OpenTelemetry.Exporter.Prometheus.AspNetCore --prerelease
   

5. [エクスプローラー] ペインで、Diagnostics フォルダーを展開し、DiagnosticServiceCollectionExtensions.cs を選びます。

6. コンソール エクスポーター .AddConsoleExporter(); を次のコードに置き換えます。

   .AddPrometheusExporter();
   

7. ファイルの一番下にある最後の } の前に、次のコードを追加します。

   public static void MapObservability(this IEndpointRouteBuilder routes)
   {
     routes.MapPrometheusScrapingEndpoint();
   }
   

   このコードは、アプリでこれを含むすべてのサービスに Prometheus スクレイピング エンドポイントを追加します。 これにより、Prometheus が http://service/metrics からメトリックをスクレイピングできるようになります。

8. Ctrl+S を選択して、ファイルを保存します。

Store サービスでメトリックを公開する

アプリは現在、Products サービスにのみメトリックを公開するように構成されています。 Store サービスにもメトリックを公開するようにアプリを更新します。

1. [エクスプローラー] ペインのソリューション エクスプローラーで、Store プロジェクトを右クリックし、[プロジェクト参照の追加] を選びます。

2. [診断]を選択します。

3. [エクスプローラー] ペインで、Store フォルダーを展開し、Program.cs を選びます。

4. コード コメント // Add observability code hereの下に、Diagnostics メソッドの呼び出しを追加します。

   builder.Services.AddObservability("Store", builder.Configuration);
   

5. app.Run() メソッドの前に、次のコードを追加します。

   app.MapObservability();
   

   このメソッドは、Prometheus スクレイピング エンドポイントを Store サービスに追加します。

6. Ctrl+S を選択して、ファイルを保存します。

7. [エクスプローラー] ペインで、Product フォルダーを展開し、Program.cs を選びます。

8. app.Run() メソッドの前に、次のコードを追加します。

   app.MapObservability();
   

   このメソッドは、Prometheus スクレイピング エンドポイントを Product サービスに追加します。

9. Ctrl+S を選択して、ファイルを保存します。

新しい監視機能をテストする

次に、アプリに追加した新しい監視機能をテストします。

1. 下部の [ターミナル] ペインで、dotnet-observability/eShopLite フォルダーに移動します。

   cd ..
   

2. アプリ コンテナーを更新します。

   dotnet publish /p:PublishProfile=DefaultContainer 
   

3. dotnet-observability フォルダーに移動し、Docker でアプリを起動します。

   cd ..
   docker compose up
   

4. [ポート] タブの Prometheus (9090) で [ブラウザーで開く] を選びます。 Visual Studio Code でローカルで実行している場合は、ブラウザーを開き、新しいタブで Prometheus アプリ http://localhost:9090 に移動します。

5. 上部のメニューで、[状態]、[ターゲット] の順に選びます。

   

   Productsと Store のサービスが UP として一覧表示されます。

6. [ポート] タブの Grafana (3000) で [ブラウザーで開く] を選びます。 Visual Studio Code でローカルで実行している場合は、ブラウザーを開き、新しいタブで Grafana アプリ http://localhost:3000 に移動します。

7. ユーザー名「admin」を入力します。

8. パスワード「grafana」を入力します。

9. [最初のダッシュボードの作成] を選びます。

10. [ダッシュボードのインポート] を選びます。

11. 新しいタブで GitHub に移動し、ASP.NET Core ダッシュボード json ファイルを開きます。

12. "生" ファイルをコピーします。

13. この JSON を [ダッシュボード経由の JSON モデルのインポート] テキスト ボックスに貼り付けます。

14. [読み込み] を選択します。

15. [Prometheus データ ソース] ドロップダウンで、[Prometheus] を選びます。

16. インポート を選択します。

    

    Products と Store のサービスのメトリックを示すダッシュボードが表示されます。 2 つのサービス間で変更するジョブを選びます。

17. [ターミナル] ペインで、Ctrl+C キーを押してアプリを停止します。

Zipkin を追加する

次に、Zipkin を追加して、アプリのトレース機能を拡張します。 前に行ったように、Zipkin コンテナーをアプリに追加し、OpenTelemetry コレクターに接続するように構成します。 次に、OpenTelemetry Zipkin エクスポーターをアプリに追加します。

1. Visual Studio Code の [エクスプローラー] ペインで dotnet-observability フォルダー内の docker-compose.yml ファイルを選びます。

2. frontend の depends_on に prometheus と zipkin を追加します。

   depends_on: 
     - backend
     - prometheus
     - zipkin 
   

3. backend の depends_on に prometheus を追加します。

    depends_on: 
      - prometheus
   

4. Zipkin の環境変数を frontend と backend の両方に追加します。

   environment: 
     - ZIPKIN_URL=http://zipkin:9411    
   

   2 つのサービスは次のようになります。

   frontend:
     image: storeimage
     build:
       context: .
       dockerfile: ./eShopLite/Store/Dockerfile
     environment: 
       - ProductEndpoint=http://backend:8080
       - ZIPKIN_URL=http://zipkin:9411
     ports:
       - "32000:8080"
     depends_on: 
       - backend
       - prometheus
       - zipkin
   
   backend:
     image: productservice
     build: 
       context: .
       dockerfile: ./eShopLite/Products/Dockerfile
     environment: 
       - ZIPKIN_URL=http://zipkin:9411
   
     ports: 
       - "32001:8080"
     depends_on: 
       - prometheus    
   

5. この YAML をファイルの末尾に追加します。

     zipkin:
       image: openzipkin/zipkin
       ports:
         - 9411:9411
   

   上記の YAML は、Zipkin コンテナーをアプリに追加します。 これは、Zipkin コンテナーがポート 9411 で応答するように構成します。

6. Ctrl+S を選択して、ファイルを保存します。

7. [ターミナル] ペインで、Diagnostics フォルダーに移動します。

   cd ./eShopLite/Diagnostics/
   

8. Zipkin エクスポート パッケージを追加します。

   dotnet add package OpenTelemetry.Exporter.Zipkin --prerelease
   

9. [エクスプローラー] ペインで、Diagnostics フォルダーを展開し、DiagnosticServiceCollectionExtensions.cs を選びます。

10. トレース プロバイダーの末尾に、Zipkin を追加します。

    // add the tracing providers
    .WithTracing(tracing =>
    {
      tracing.SetResourceBuilder(resource)
                  .AddAspNetCoreInstrumentation()
                  .AddHttpClientInstrumentation()
                  .AddSqlClientInstrumentation()
                  .AddZipkinExporter(zipkin =>
                  {
                    var zipkinUrl = configuration["ZIPKIN_URL"] ?? "http://zipkin:9411";
                    zipkin.Endpoint = new Uri($"{zipkinUrl}/api/v2/spans");
                  });
    });
    

11. Ctrl+S を選択して、ファイルを保存します。

12. 下部の [ターミナル] ペインで、dotnet-observability/eShopLite フォルダーに移動します。

    cd ..
    

13. アプリ コンテナーを更新します。

    dotnet publish /p:PublishProfile=DefaultContainer 
    

14. dotnet-observability フォルダーに移動し、Docker でアプリを起動します。

    cd ..
    docker compose up
    

15. [ポート] タブの Prometheus (9090) で [ブラウザーで開く] を選びます。 Visual Studio Code でローカルで実行している場合は、新しいブラウザー タブを開き、Zipkin アプリ http://localhost:9411 に移動します。

16. メニューで [依存関係] を選びます。

    

17. [ターミナル] ペインで、Ctrl+C キーを押してアプリを停止します。

Application Insights を追加する

最後の手順は、Application Insights をアプリに追加することです。

Azure で Application Insights リソースを作成する

1. Visual Studio Code の [ターミナル] ペインで、Azure にサインインします。

   az login --use-device-code
   

2. 選択された Azure サブスクリプションを表示します。

   az account show -o table
   

   間違ったサブスクリプションが選択されている場合は、az account set コマンドを使って正しいものを選びます。

3. Application Insights の拡張機能を追加します。

   az extension add -n application-insights
   

4. Application Insights のリソースを作成します。

   az monitor app-insights component create --app eShopLiteInsights --location eastus --kind web -g eShopLite
   

   次のように出力されます。

   {
     "appId": "fb6e1af0-7556-469d-a31f-85e4550c8fde",
     "applicationId": "eShopLiteInsights",
     "applicationType": "web",
     "connectionString": "InstrumentationKey=00000000-0000-0000-0000-000000000000;IngestionEndpoint=https://eastus-2.in.applicationinsights.azure.com/;LiveEndpoint=https://eastus.livediagnostics.monitor.azure.com/",
     "creationDate": "2023-11-10T16:50:00.950726+00:00",
     "disableIpMasking": null,
     "etag": "\"3a02952a-0000-0100-0000-654e5f380000\"",
     "flowType": "Bluefield",
     "hockeyAppId": null,
     "hockeyAppToken": null,
     "id": "/subscriptions/7eebce2a-0884-4df2-8d1d-2a3c051e47fe/resourceGroups/eShopLite/providers/microsoft.insights/components/eShopLiteInsights",
     "immediatePurgeDataOn30Days": null,
     "ingestionMode": "ApplicationInsights",
     "instrumentationKey": "00000000-0000-0000-0000-000000000000",
     "kind": "web",
     "location": "eastus",
     "name": "eShopLiteInsights",
     "privateLinkScopedResources": null,
     "provisioningState": "Succeeded",
     "publicNetworkAccessForIngestion": "Enabled",
     "publicNetworkAccessForQuery": "Enabled",
     "requestSource": "rest",
     "resourceGroup": "eShopLite",
     "retentionInDays": 90,
     "samplingPercentage": null,
     "tags": {},
     "tenantId": "7eebce2a-0884-4df2-8d1d-2a3c051e47fe",
     "type": "microsoft.insights/components"
   }
   

   上記の返された JSON から、".を除く connectionString をコピーします。 次に例を示します。

   InstrumentationKey=b851fa75-85a2-42f7-bb6f-413725d9d8ba;IngestionEndpoint=https://eastus-2.in.applicationinsights.azure.com/;LiveEndpoint=https://eastus.livediagnostics.monitor.azure.com/

5. Visual Studio Code の [エクスプローラー] ペインで、docker-compose.yml ファイルを選びます。

6. Application Insights に接続するために診断プロジェクトで使用される環境変数を追加します。 この YAML を Store サービスに追加します。

   environment:
     - APPLICATIONINSIGHTS_CONNECTION_STRING=InstrumentationKey=b851fa75-85a2-42f7-bb6f-413725d9d8ba;IngestionEndpoint=https://eastus-2.in.applicationinsights.azure.com/;LiveEndpoint=https://eastus.livediagnostics.monitor.azure.com/
   

   上記の接続文字列を、Azure CLI からコピーしたものに置き換えます。

7. Product サービスに対して、これらの手順を繰り返します。 YAML は最終的に次のようになります。

     frontend:
       image: storeimage
       build:
         context: .
         dockerfile: ./eShopLite/Store/Dockerfile
       environment: 
         - ProductEndpoint=http://backend:8080
         - ZIPKIN_URL=http://zipkin:9411
         - APPLICATIONINSIGHTS_CONNECTION_STRING=InstrumentationKey=b851fa75-85a2-42f7-bb6f-413725d9d8ba;IngestionEndpoint=https://eastus-2.in.applicationinsights.azure.com/;LiveEndpoint=https://eastus.livediagnostics.monitor.azure.com/
       ports:
         - "32000:8080"
       depends_on: 
         - backend
         - prometheus
         - zipkin
   
     backend:
       image: productservice
       build: 
         context: .
         dockerfile: ./eShopLite/Products/Dockerfile
       environment: 
         - ZIPKIN_URL=http://zipkin:9411
         - APPLICATIONINSIGHTS_CONNECTION_STRING=InstrumentationKey=b851fa75-85a2-42f7-bb6f-413725d9d8ba;IngestionEndpoint=https://eastus-2.in.applicationinsights.azure.com/;LiveEndpoint=https://eastus.livediagnostics.monitor.azure.com/
   
   

8. Ctrl+S を選択して、ファイルを保存します。

9. [ターミナル] ペインで、Diagnostics フォルダーに移動します。

   cd .\eShopLite\Diagnostics\ 
   

10. Application Insights エクスポーター パッケージを追加します。

    dotnet add package Azure.Monitor.OpenTelemetry.AspNetCore --prerelease
    

11. [エクスプローラー] ペインで、Diagnostics フォルダー、DiagnosticServiceCollectionExtensions.cs の順に選びます。

12. ファイルの先頭に、次の using ステートメントを追加します。

    using Azure.Monitor.OpenTelemetry.AspNetCore;
    

13. var otelBuilder = services.AddOpenTelemetry(); の下に、次のコードを追加します。

    if (!string.IsNullOrEmpty(configuration["APPLICATIONINSIGHTS_CONNECTION_STRING"]))
    {
      otelBuilder.UseAzureMonitor();
    }
    

14. Ctrl+S を選択して、ファイルを保存します。

15. 下部の [ターミナル] ペインで、dotnet-observability/eShopLite フォルダーに移動します。

    cd ..
    

16. アプリ コンテナーを更新します。

    dotnet publish /p:PublishProfile=DefaultContainer 
    

17. dotnet-observability フォルダーに移動し、Docker でアプリを起動します。

    cd ..
    docker compose up
    

18. Azure CLI へのサインインに使用したのと同じ資格情報を使用して、Azure portal にサインインします。

19. Azure portal で、[リソース グループ] を選択します。

20. eShopLite リソース グループを選びます。

21. eShopLiteInsights Application Insights リソースを選びます。

22. [アプリケーション ダッシュボード] を選びます。

    

23. メトリックの変更を確認するには、eShopLite アプリに移動して在庫を変更します。 次に、Application Insights ダッシュボードを更新します。

24. [ターミナル] ペインで、Ctrl+C キーを押してアプリを停止します。