Postmanモックサーバーを使ってGrafana（Infinityプラグイン）の動作検証を行う

◇はじめに

本記事はPostman Advent Calendar 2024 12日目の記事になります。

今回は、先日のLinuxアドカレの記事で構築したGrafana＋Infinityプラグインの環境とPostmanのモックサーバ機能を使ってデータの取得、可視化までを試してみました。

◇Postmanモックサーバーとは？

モックサーバーは、実際のサーバ側の構築が完了する前に、APIの動作等をエミュレートするために使われたりします。
Postmanでは、Postmanのサービス内でモックサーバーを立てることができ、HTTP接続が可能なエンドポイントが発行され、自前でサーバを準備するのに比べ、簡単に構築ができます。

なお、この辺については公式サイトやPostman社が実施しているワークショップの資料に詳しく書いてあるため、そちらも参考にしてください。

そのほか、参考にしたサイトも載せておきます。

◇開発環境等

PostmanはWeb版を使用し、Windows PCからEdge経由で使用します。

• Postman側
  • Postman for Web：バージョン11.22.2-241209-1418
  • 使用ブラウザ：Edge
• Grafana側
  • ホストOS
    • Proxmox VE 8.3
  • VM
    • Ubuntu Server 24.04.1 LTS
    • Docker version 27.2.0
    • Docker Compose version v2.20.3
  • Grafana：grafana-oss:11.3.1

◇Postmanモックサーバー構築

まずは、Postman上にモックサーバーをつくっていきます。
詳細は省略する部分もあるので、適宜前述の参考サイトもご確認ください。

まずはモックサーバー用のコレクションを作成します。
今回はコレクション名を「Grafana-Mock」としています。

次に、作成したコレクションに対してモックサーバーを有効化します。
コレクションのメニューから「コレクションのモックを作成」を選択します。

モックサーバー名を入力し（今回は「Grafana-Mock-Server」）、赤枠内のチェックボックスも有効にしておきます。

「モックサーバーを作成」を選択してしばらくすると、URL発行画面が表示されます。
このタイミングで、右上の環境設定で、今回作成したモックサーバー名と同じ名前の環境を選択しておきます。

◇HTTPリクエスト、レスポンスサンプルの追加

とりあえず1個リクエストを追加してみます。

• HTTPリクエストメソッド：GET
• URL：{{url}}/hello-world

と入力して保存します。
なお、ここでの{{url}}は環境変数となっており、先ほど発行されたURLが保存されています。

保存後、リクエストの設定から「サンプルを追加」を選択します。

レスポンスのサンプルを入力できるようになるので、好きなレスポンスを入力します。
今回は、以下のようなJSONデータにしています。

  {
    "hello": "world!!"
  }

データを入力して保存します。

もういちどリクエストの項目を選択し、「送信」ボタンを実行します。
先ほど設定したレスポンスサンプルが応答として出力されれば成功です。

◇Grafanaからデータ取得

先ほど追加したHTTPリクエストをGrafanaのInfinityプラグインを使って取得してみます。

GrafanaとInfinityプラグインのセットアップ手順については、別の記事でまとめてますので今回は省略します。

Grafanaにログインしたら、Infinityプラグインの設定画面を開きます。
まず最初にプラグインの設定内の「Base URL」にPostmanモックサーバーのURLを入力します。
（前述の{{url}}の部分）
その後、「New dashboard」-「Add Visualization」と選択して、ビジュアルを追加していきます。

Data sourcesにはInfinitiyを選択し、TypeやMethodなど、下の画像の通り入力していきます。
この際、URL欄には、/hello-worldのみ入力することで、先ほどの「Base URL」にバインドされたURLにHTTPリクエストを発行します。
右上の表示ビジュアル設定はTableを選択し、helloとworld!!が画面上に表示されればOKです。
もし、表示されない場合はRefreshを実行してみてください。

これで、GrafanaからPostmanモックサーバーのデータを取得・可視化できました。
続いて、ほかのデータ形式も試してみます。

◇時系列データの可視化テスト

次に、Postmanモックサーバー側で時系列データを返すエンドポイントを作成し、それをGrafanaから取得してみます。
リクエストの設定とレスポンスのサンプルは以下のようにしています。

• HTTPリクエストメソッド：GET
• URL：{{url}}/get-temperature

レスポンスサンプル

{
    "sensor": [
        {
            "timestamp": "2024-12-11T13:33:41.369941",
            "temperature": 20.23
        },
        {
            "timestamp": "2024-12-11T13:43:41.369941",
            "temperature": 20.72
        },
        {
            "timestamp": "2024-12-11T13:53:41.369941",
            "temperature": 21.18
        },
        ・
        ・
        ・
        {
            "timestamp": "2024-12-11T16:33:41.369941",
            "temperature": 22.01
        },
        {
            "timestamp": "2024-12-11T16:43:41.369941",
            "temperature": 22.03
        }
    ]
}

レスポンス用のJSONデータについては、10分ごとの温度データが20データ分入っています。
このデータはChatGPTで生成してもらったダミーデータです。

当初はPostman変数を使って、現在日時、現在日時の10分前、20分前、・・・
といった時系列データを作りたかったのですが、うまくいかなかったため、直接日時データを入れています。
$isoTimestamp変数を使うことで、現在時刻の取得はできそうでしたが、そこから足したり引いたりはできないかも？

Postman側の準備ができたら、先ほど同様、Grafana側でビジュアルを追加します。
今回は表示ビジュアル設定はTime seriesを選択し、timestampとtemperatureのColumnを入力しています。

Refreshして折れ線グラフが表示されれば正しくデータの取得が行えています。

◇Postman動的変数を使った可視化テスト

最後に、Postmanモックサーバーで使える動的変数を使ったレスポンスを返してみます。
動的変数については、こちらの記事で非常に詳しく書かれています。

これらの変数からいくつかピックアップし、以下のようにリクエスト設定とレスポンスサンプルを設定しました。

• HTTPリクエストメソッド：GET
• URL：{{url}}/rand-user

レスポンスサンプル

{
    "users":
    [
        {
            "name": "{{$randomUserName}}",
            "mail": "{{$randomEmail}}",
            "title": "{{$randomJobTitle}}",
            "country": "{{$randomCountry}}",
            "number": "{{$randomInt}}"
        },
        {
            "name": "{{$randomUserName}}",
            "mail": "{{$randomEmail}}",
            "title": "{{$randomJobTitle}}",
            "country": "{{$randomCountry}}",
            "number": "{{$randomInt}}"
        },
        {
            "name": "{{$randomUserName}}",
            "mail": "{{$randomEmail}}",
            "title": "{{$randomJobTitle}}",
            "country": "{{$randomCountry}}",
            "number": "{{$randomInt}}"
        },
        {
            "name": "{{$randomUserName}}",
            "mail": "{{$randomEmail}}",
            "title": "{{$randomJobTitle}}",
            "country": "{{$randomCountry}}",
            "number": "{{$randomInt}}"
        },
        {
            "name": "{{$randomUserName}}",
            "mail": "{{$randomEmail}}",
            "title": "{{$randomJobTitle}}",
            "country": "{{$randomCountry}}",
            "number": "{{$randomInt}}"
        },
        {
            "name": "{{$randomUserName}}",
            "mail": "{{$randomEmail}}",
            "title": "{{$randomJobTitle}}",
            "country": "{{$randomCountry}}",
            "number": "{{$randomInt}}"
        },
        {
            "name": "{{$randomUserName}}",
            "mail": "{{$randomEmail}}",
            "title": "{{$randomJobTitle}}",
            "country": "{{$randomCountry}}",
            "number": "{{$randomInt}}"
        }
   ]
}

Username,Emailなどをランダムに返す変数のセットを7セット分並べています。

Grafana側では、Table viewを有効化し、データ全体を確認しています。
Refreshするごとにデータの中身が変わればOKです。

次に、JSONデータの中からUsernameと数値データのみを取り出してバーグラフを表示してみます。
表示ビジュアル設定はBar gaugeを選択し、先ほどと同じようにColumnを設定します。

このままだと、Userごとにゲージが分かれないため、Transformationのタブを開き、Partition by valuesという項目を選択します。

+ Select fieldを選択して、nameを選ぶとname毎のバーゲージが表示されます。

このやり方については、たまたま見つけた海外の方のYoutubeを参考にしています。

こちらもRefreshするたびにNameとゲージの数値が変わればOKです。

◇注意事項

PostmanモックサーバーはFreeプランでも使用可能ですが、リクエスト回数の制限があります。
公式サイトの記載を見る限り、1か月あたり1,000回までとなっています。
頻繁にGrafana側からデータを読み込むと上限に達する恐れがありますので、ご注意ください。

Usage metered on per team, per month basis.
1,000 requests

◇おわりに

前回の記事で構築したGrafanaを使って、Postmanモックサーバーからデータが取得できることを確認できました。
Postmanモックサーバーの一般的な使い方とは少しズレるかもしれませんが、こんな使い方もできるということで参考になれば幸いです。

🔚END