slim入門：k6のレポートをhtml出力する

今日は、k6のレポートをhtml形式に出力する方法についてご紹介します。

背景

k6でのレポートをhtml形式で出力する方法を備忘として残しました。

開発環境のソースは下記のリポジトリにあります。

修正ファイル

下記のファイルを修正もしくは作成しました。

        modified:   app/compose.yml
        new file:   app/k6/.gitignore
        new file:   app/k6/Dockerfile
        new file:   app/k6/scripts/http_get.js

app/compose.yml

@@ -118,6 +118,20 @@ services:
     networks:
       - net
 
+  k6-cmd:
+    build: ./k6
+    container_name: k6
+    platform: linux/x86_64
+    ports:
+      - "6565:6565"
+    working_dir: /work
+    volumes:
+      - ./k6/work:/work
+    networks:
+      - net
+    profiles:
+      - tools
+
 networks:
   net:

app/k6/Dockerfile

FROM grafana/k6:latest

app/k6/.gitignore

# work
work/*.html

app/k6/scripts/http_get.js

import http from 'k6/http';
import { htmlReport } from "https://raw.githubusercontent.com/benc-uk/k6-reporter/main/dist/bundle.js";
import { textSummary } from "https://jslib.k6.io/k6-summary/0.0.1/index.js";

export const options = {
  stages: [
    { target:  5, duration: '30s' },
    { target: 15, duration: '30s' },
    { target:  5, duration: '30s' },
  ],
};

export default function () {
  http.get('http://host.docker.internal:8080/');
};

export function handleSummary(data) {
  let returnData = {
     stdout: textSummary(data, { indent: " ", enableColors: true })
  };

  let outputDatetime = formatDate(new Date(), 'yyyyMMdd_HHmmss');
  let outputHtml = outputDatetime + "_summary.html";
  returnData[outputHtml]=htmlReport(data);

  return returnData;
}

function formatDate (date, format) {
  format = format.replace(/yyyy/g, date.getFullYear());
  format = format.replace(/MM/g, ('0' + (date.getMonth() + 1)).slice(-2));
  format = format.replace(/dd/g, ('0' + date.getDate()).slice(-2));
  format = format.replace(/HH/g, ('0' + date.getHours()).slice(-2));
  format = format.replace(/mm/g, ('0' + date.getMinutes()).slice(-2));
  format = format.replace(/ss/g, ('0' + date.getSeconds()).slice(-2));
  format = format.replace(/SSS/g, ('00' + date.getMilliseconds()).slice(-3));
  return format;
};

検証環境の起動

下記のコマンドを実施します。

# ビルド
make build

# 起動
make up

# 起動確認
make test_req

下記のような出力になっていればOKです。

% make test_req 
curl -k https://localhost
Hello world!

k6の実行

下記のコマンドを実施します。

# 作業ディレクトリに移動
cd app
＃ k6コマンドの実行
docker compose --profile tools run --rm -T k6-cmd run - < k6/scripts/http_get.js

下記のようなhtmlファイルが出力されていれば成功です。

% tree k6/work
k6/work
└── 20230903_073647_summary.html

解説

app/k6/scripts/http_get.js

このコードは、k6というロードテストツールを使用して、ウェブアプリケーションの性能テストを行うためのスクリプトです。以下に、このコードの各部分の解説を提供します。

1. モジュールのインポート:

import http from 'k6/http';
import { htmlReport } from "https://raw.githubusercontent.com/benc-uk/k6-reporter/main/dist/bundle.js";
import { textSummary } from "https://jslib.k6.io/k6-summary/0.0.1/index.js";

この部分では、k6のhttpモジュールをインポートし、HTMLレポートとテキストサマリーレポートの生成に使用する外部モジュールもインポートしています。

2. テストオプションの定義:

export const options = {
  stages: [
    { target:  5, duration: '30s' },
    { target: 15, duration: '30s' },
    { target:  5, duration: '30s' },
  ],

このセクションでは、テストのオプションを設定しています。テストは3つのステージから成り、それぞれが異なる仮想ユーザー数と持続時間を持っています。例えば、最初のステージでは5つの仮想ユーザーを30秒間実行します。

3. デフォルトのテスト関数の定義:

export default function () {
  http.get('http://host.docker.internal:8080/');
};

デフォルトのテスト関数は、指定したURL（http://host.docker.internal:8080/）に対してHTTP GETリクエストを送信します。この部分が実際のテストロジックを含んでいます。

4. カスタムのhandleSummary関数の定義:

export function handleSummary(data) {
  let returnData = {
     stdout: textSummary(data, { indent: " ", enableColors: true })
  };

  let outputDatetime = formatDate(new Date(), 'yyyyMMdd_HHmmss');
  let outputHtml = outputDatetime + "_summary.html";
  returnData[outputHtml]=htmlReport(data);

  return returnData;
}

この関数は、テスト結果のカスタムサマリーデータを生成します。textSummary関数を使用してテキストフォーマットのサマリーを生成し、htmlReport関数を使用してHTMLレポートを生成します。また、ファイル名にタイムスタンプを付けています。生成したデータはオブジェクトとして返されます。

5. formatDate関数の定義:

function formatDate (date, format) {
  format = format.replace(/yyyy/g, date.getFullYear());
  format = format.replace(/MM/g, ('0' + (date.getMonth() + 1)).slice(-2));
  format = format.replace(/dd/g, ('0' + date.getDate()).slice(-2));
  format = format.replace(/HH/g, ('0' + date.getHours()).slice(-2));
  format = format.replace(/mm/g, ('0' + date.getMinutes()).slice(-2));
  format = format.replace(/ss/g, ('0' + date.getSeconds()).slice(-2));
  format = format.replace(/SSS/g, ('00' + date.getMilliseconds()).slice(-3));
  return format;
};

この関数は、指定したフォーマットに従って日付をフォーマットするために使用されます。たとえば、”yyyyMMdd_HHmmss”フォーマットでは、年、月、日、時、分、秒、ミリ秒がそれぞれ対応する部分に置き換えられます。

このスクリプトはk6でロードテストを実行し、テスト結果のテキストサマリーとHTMLレポートを生成します。 HTMLレポートのファイル名にはタイムスタンプが含まれており、テストごとに一意の名前が生成されます。

おわりに

今日は、k6のレポートをhtml形式に出力する方法についてご紹介しました。