Zenn
🎏

テストサーバー建てるの面倒くさいからモックサーバーツールを作った

2021/09/24に公開
Go
TypeScript
モックサーバー
idea

なぜ作ったか

最近フロントが面白くてNext.jsだのReact.jsを書いていたんですが、サーバーを作るまでモックを内部コードに抱えながら書いていました。
しかしそうすると、API通信周りが軒並みTODOになってしまい、最終的なコード改修が割と多くなってしまいます ↓。

hoge.ts
import * as mock from "./data.json"

// データを全権取得
const getDataList = (): Data[] => {
   const list =  mock.list;
   // TODO: API通信を後から頑張る！！！！
   ...
}

そこでJSONサーバーなどでモックサーバーを建てれば良さそう、となったのですが、どうせなら作るかと私の中の悪魔が囁いたので以下の条件に合うようにモックサーバーツールを作成しました！

  • JSONに対応するエンドポイントのレスポンスのみを記述する
  • 設定をファイル形式で管理できる(.yml, .conf ...etc)
  • コマンドラインで簡単にサーバーを建てられる

ゴニョゴニョっとして、できたのがこちらです
https://github.com/gari8/sub-server

手元に設定ファイルと、JSONファイル(レスポンス用)を用意するだけで使えるコマンドラインツールです
ディレクトリなどに設定ファイルとJSONをまとめておけば、チームで共有して同じ環境を再現できます！

READMEにはゴチャゴチャと書いた気がするのですが、割とシンプルに使えます！以下手順です

手順

1. インストール

まずインストールですが、Goがあればとりあえず簡単にインストールできます

ターミナル
$ go install github.com/gari8/sub-server@latest

2. ディレクトリ作成

次に作業用のディレクトリを作ってその中に入ります

ターミナル
$ mkdir fuga && cd fuga

3. 返却用データ準備

2で作ったディレクトリの中にレスポンス用のJSONを用意します。今回は以下の２点を用意します

index.json
[
  {
    "id": 1,
    "title": "hoge"
  },
  {
    "id": 2,
    "title": "hogehoge"
  },
  {
    "id": 3,
    "title": "hogehogehoge"
  },
  {
    "id": 4,
    "title": "hogehogehogehoge"
  }
]
post.json
{
  "id": 5,
  "title": "hogehogehogehogehoge"
}

4. 設定ファイルの生成・記述

こんな感じのツールは設定ファイルが少しめんどくさいなーと思うかもしれないですが今回はsub-server initコマンドで設定ファイルであるconfig.tomlを生成できますのでこれをいじるだけです！

ターミナル
$ sub-server init
config.toml (生成直後)
[app]
server_name = "server name"
port = "8080"
[routing]
root_path = "."
origin_root = "/app/v1"
[[routing.origins]]
id = 0
uri = "/start"
file_path = "index.json"
method = "GET"
[[routing.origins]]
id = 1
uri = "/start/1"
file_path = "1/index.json"
method = "GET"
[[routing.origins]]
id = 2
uri = "/start"
file_path = "post.json"
method = "POST"

↑ こんな感じで生成されるのですが、いらない部分も多いので、今回に合わせて最小限で設定すると以下のようになります。

config.toml
[app]
port = "8000"

[routing]
root_path = "."
origin_root = "/api/v1/hoge"

[[routing.origins]]
file_path = "index.json"
method = "GET"

[[routing.origins]]
file_path = "post.json"
method = "POST"

5. サーバー起動

今までの手順に沿って進めていくとこのような構成になっているかと思います。

fuga
├── config.toml
├── index.json
└── post.json

いよいよサーバーを立ち上げる時です！sub-server serveコマンドを打ちましょう！以下のようにアスキーアートとURLが表示されればうまくいっています！

ターミナル
$ sub-server serve


░██████╗██╗░░░██╗██████╗░  ░██████╗███████╗██████╗░██╗░░░██╗███████╗██████╗░
██╔════╝██║░░░██║██╔══██╗  ██╔════╝██╔════╝██╔══██╗██║░░░██║██╔════╝██╔══██╗
╚█████╗░██║░░░██║██████╦╝  ╚█████╗░█████╗░░██████╔╝╚██╗░██╔╝█████╗░░██████╔╝
░╚═══██╗██║░░░██║██╔══██╗  ░╚═══██╗██╔══╝░░██╔══██╗░╚████╔╝░██╔══╝░░██╔══██╗
██████╔╝╚██████╔╝██████╦╝  ██████╔╝███████╗██║░░██║░░╚██╔╝░░███████╗██║░░██║
╚═════╝░░╚═════╝░╚═════╝░  ╚═════╝░╚══════╝╚═╝░░╚═╝░░░╚═╝░░░╚══════╝╚═╝░░╚═╝

GET >> http://localhost:8000/api/v1/hoge
POST >> http://localhost:8000/api/v1/hoge

表示されたエンドポイントに実際にアクセスしてみるとTomlで指定したJSONの値が返されてくることがわかります！
これで完了です！
Githubなどに上げておけば最後のコマンドだけでサーバー起動できるので便利かな〜と思っておりますのでぜひご活用ください〜

それではまた次回の記事で！

Discussion