はじめに
決済系のバックエンドエンジニアをしている、かがの（@ykagano）です。
今回WireMock をブラウザから操作できる GUI クライアント WireMock Hub を自作し、OSS として公開したのでその話をさせてください。
WireMockとは
皆さん、WireMockを知っていますか？
スタブを登録すると、登録したURLパスへのリクエストを決まったレスポンスで応答してくれるOSSです。
このWireMockは開発時に非常に便利です。
- backendのAPIが出来ていなくても代替してテストできる
- 外部接続先のAPIがまだ提供されていなくても、代替して接続先になれる
- APIの異常系テストをする際に容易に異常系レスポンスを返せる
WireMockは以前から使っていたのですが、このWireMockを継続的な負荷テストにも使えないかと調査したところ、いくつか課題がありました。
継続的な負荷テスト環境でのWireMockの課題
継続的な負荷テストには以下が必要と考えていました。
- WebUIがある
- 分散環境に一括同期可能
しかし、WireMockにWebUIを提供するOSSを調査しましたが、分散環境への一括同期に対応したものは見当たりませんでした。
継続的にメンテナンスされている WireMock用のWebUIはあります。
しかし、負荷テストには向いていません。
負荷テストでは複数台のWireMockを利用しますし、できればUIから変更したスタブデータを全てのWireMockインスタンスに即時反映する機能が欲しいです。
公式のWireMockにはCloud環境もあり、Enterpriseでの利用は有料のSaaSを利用するという棲み分けになっていそうです。
OSSのWireMockだけでも負荷テストは可能です。
ロードバランサに同じスタブが登録されたWireMockをぶら下げれば負荷に耐えられるようにスケールできます。
ですが、複数のテストシナリオがありますし、外部APIに変更が入ってもモックのスタブデータを容易に追随させるには、やはりWireMockへの一括同期が可能なWeb UIが欲しい・・・という課題を解決するために生まれたのが WireMock Hub です。
WireMock Hub とは
WireMock Hub は、複数のWireMockインスタンスを一元管理できるGUIクライアントです。
単体のWireMockを置き換えるものではなく、既存の WireMock に寄り添う管理 UI という立ち位置で設計しています。
主な特徴
-
プロジェクト管理
- プロジェクト単位で環境、チーム、機能等に分けて登録データを管理できます
-
スタブデータを管理
- WireMockに登録するためのスタブデータをWireMock Hubに登録することができます
-
分散 WireMock 対応
- 複数のWireMockインスタンスに対して、登録したスタブを一括で同期できます
-
リクエストログを表示
- WireMockに保存されたリクエストログの一致・不一致の結果をUIから確認できます
-
データ永続化
- スタブや設定はSQLiteに保存するため、外部DBは不要です
-
英語 / 日本語両対応
- 表示言語の切り替えが可能です
図1：プロジェクトの一覧画面
クイックスタート
Docker で簡単に試せます。
docker run -d -p 3000:3000 yukagano/wiremock-hub:latest
open http://localhost:3000/hub/
起動後のアクセス先： http://localhost/hub/
アーキテクチャ
┌──────────────────────────────────────────────────────────────┐
│ WireMock Hub │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Frontend │ → │ Backend │ → │ SQLite │ │
│ │ (Vue 3) │ │ (Fastify) │ │ (Persistence)│ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
└──────────────────────────────────────────────────────────────┘
│
│ WireMock Admin APIに同期
▼
┌──────────────────────┼──────────────────────┐
│ │ │
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
│ WireMock │ │ WireMock │ │ WireMock │
│ Instance │ │ Instance │ │ Instance │
│ #1 │ │ #2 │ │ #3 │
└──────────┘ └──────────┘ └──────────┘
WireMock Hub 自体は 状態を持つ管理サーバー で、各WireMockインスタンスにはWireMockの持つ管理API経由で同期します。
図2：プロジェクトの詳細画面
技術スタック
| レイヤー | 技術 |
|---|---|
| Frontend | Vue 3 + TypeScript |
| Backend | Fastify, Prisma, SQLite |
| インフラ | Docker（All-in-One イメージ）, nginx |
UI 上で Stub の JSON を直接編集できるよう、エディタには Monaco Editor を採用しています。
図3：スタブの編集画面
AIとの共同開発
今回は開発の多くの場面で Claude Code を活用しました。
良かった点
- 最初の構想から壁打ち相手になってもらえる
- 0 → 1の開発はAIがとにかく速かったです（プロトタイプは3日で出来ました）
- エラーメッセージの解析から修正まで任せられました
- 方針に迷った時も気軽に相談できました
工夫した点
- まず最初に全体の設計をしてもらい、ドキュメント化してから実装を進めました
- 1タスクごとに計画を立ててもらい、問題ないことを確認してからタスクを開始しました
- 生成されたコードのコアな部分は必ず自分で理解してからマージしていました
- 開発のナレッジとして残したい情報はCLAUDE.mdに書いてもらうようにしました
おわりに
現在、負荷テスト環境の構築を進めていますので、実運用で使いながら、少しずつ育てていこうと思います。
WireMockのインスタンス単体でも使えますので、ぜひ使ってみてください。
Issue や PR も大歓迎です。フィードバックいただけると嬉しいです！