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

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

Prometheus と Grafana を追加する

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

1. エクスプローラー ウィンドウで、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. [エクスプローラー] ウィンドウで、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+キーを押してファイルを保存します。

Grafana の構成

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

1. [エクスプローラー] ウィンドウで、dotnet-observability フォルダーを右クリックし、[新しいフォルダー] を選択します。

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

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

4. [名前] フィールドにデータソースを入力 します。

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

6. [名前] フィールドに 「ダッシュボード」と入力します。

7. grafana フォルダーを展開し、データソース フォルダーを右クリックし、[新しいファイル] を選択します。

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+キーを押してファイルを保存します。

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

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

1. 下部の [ターミナル ] ウィンドウで、[ 診断 ] フォルダーに移動します。

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. [エクスプローラー] ウィンドウで、[診断] フォルダーを展開し、[DiagnosticServiceCollectionExtensions.cs] を選択します。

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

   .AddPrometheusExporter();
   

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

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

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

8. Ctrl+キーを押してファイルを保存します。

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

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

1. [エクスプローラー] ウィンドウの [ソリューション エクスプローラー] で、ストア プロジェクトを右クリックし、[プロジェクト参照の追加] を選択します。

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

3. エクスプローラー ウィンドウで、ストア フォルダーを展開し、Program.csを選択します。

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

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

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

   app.MapObservability();
   

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

6. Ctrl+キーを押してファイルを保存します。

7. [エクスプローラー] ウィンドウで[Product]\(製品\) フォルダーを展開し、Program.csを選択します。

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

   app.MapObservability();
   

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

9. Ctrl+キーを押してファイルを保存します。

新しい観測機能をテストする

ここで、アプリに追加した新しい可観測機能をテストします。

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

   cd ..
   

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

   dotnet publish /p:PublishProfile=DefaultContainer 
   

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

   cd ..
   docker compose up
   

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

5. 上部のメニューで、[ 状態] を選択し、[ターゲット] を選択 します。

   

   [製品] と [ストア] サービスが UP として表示されます。

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

7. ユーザー名adminを入力してください。

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

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

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

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

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

13. JSON をダッシュボード JSON モデルを使用してインポート テキスト ボックスに貼り付けます。

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

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

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

    

    製品およびストア サービスのメトリックを示すダッシュボードが表示されます。 2 つのサービス間で変更する ジョブ を選択します。

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

Zipkin の追加

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

1. エクスプローラー ウィンドウで、dotnet-observability フォルダー内のdocker-compose.yml ファイルを選択します。

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

   depends_on: 
     - backend
     - prometheus
     - zipkin 
   

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

    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 コンテナーをアプリに追加します。 これは、ポート 9411 で応答するように Zipkin コンテナーを構成します。

6. Ctrl+キーを押してファイルを保存します。

7. [ターミナル] ウィンドウで、[診断] フォルダーに移動します。

   cd ./eShopLite/Diagnostics/
   

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

   dotnet add package OpenTelemetry.Exporter.Zipkin --prerelease
   

9. [エクスプローラー] ウィンドウで、[診断] フォルダーを展開し、[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+キーを押してファイルを保存します。

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

    cd ..
    

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

    dotnet publish /p:PublishProfile=DefaultContainer 
    

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

    cd ..
    docker compose up
    

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

16. メニューの [依存関係] を選択 します。

    

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

Application Insights の追加

最後の手順では、Application Insights をアプリに追加します。

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

1. [ターミナル] ウィンドウで、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": "00001111-aaaa-2222-bbbb-3333cccc4444",
     "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/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/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": "aaaabbbb-0000-cccc-1111-dddd2222eeee",
     "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. エクスプローラー ウィンドウで、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. Products サービスに対してこれらの手順を繰り返します。 最終的な 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+キーを押してファイルを保存します。

9. [ターミナル] ウィンドウで、[診断] フォルダーに移動します。

   cd .\eShopLite\Diagnostics\ 
   

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

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

11. [ 探索 ] ウィンドウで、[ 診断 ] フォルダーを選択し、[ 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+キーを押してファイルを保存します。

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 キーを押してアプリを停止します。