はじめに

決済系のバックエンドエンジニアをしている、かがの（@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 も大歓迎です。フィードバックいただけると嬉しいです！