🐈

json-serverを使って爆速でモックサーバーを作成する

lightkun2022/05/18に公開

背景

負荷試験の勉強をしていて,負荷試験ツールLocustを使ってみるか〜と思いきや,負荷をかけるサーバーをまず作成する必要がありました.
(負荷試験に使えるのかは知らないけれど)手軽にREST APIのモックサーバーを作成できるjson-serverというものを使ってみました.
(後述にある通り少しハマりましたが)READMEに

Get a full fake REST API with zero coding in less than 30 seconds (seriously)

とあるようにサクッとモックサーバーを作れました

https://github.com/typicode/json-server

環境

OS : MacOS(intel)
npm version : 8.5.5
node version : v16.15.0(nodebrewでインストール)

インストール

公式にある通りやっていきます

$ npm install -g json-server

db.jsonというファイルを作成して,以下のように編集します.

db.json
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

起動

起動は1コマンドで完了です.

$ json-server --watch db.json

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/posts
  http://localhost:3000/comments
  http://localhost:3000/profile

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

※ポート番号を3000以外に変更したい場合は json-server --watch db.json --port 3004 のように --port で指定します.

ブラウザで http://localhost:3000/ にアクセスすると次のようなページが表示されます.

db.jsonで設定したエンドポイントへのアクセスはブラウザでURLを開くかcurlコマンドでも可能です.

$ curl http://localhost:3000/posts/1
{
  "id": 1,
  "title": "json-server",
  "author": "typicode"
}
$ curl http://localhost:3000/comments/1
{
  "id": 1,
  "body": "some comment",
  "postId": 1
}
$ curl http://localhost:3000/profile
{
  "name": "typicode"
}

db.jsonを変更してみる

postsにid=2を追記してみます.

db.json
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" },
    { "id": 2, "title": "new title", "author": "lightkun" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

REST APIなので,エンドポイント/posts/の後ろにidを指定しない場合はpostsというリソース全てを返してくれます.凄い

$ curl http://localhost:3000/posts
[
  {
    "id": 1,
    "title": "json-server",
    "author": "typicode"
  },
  {
    "id": 2,
    "title": "new title",
    "author": "lightkun"
  }
]

POST, PUTメソッドで実行してみる

json-serverではGETメソッド以外も実行可能ですが,POSTやPUTをするとリソースも変更してしまうようです.

まずはPOSTメソッドで実行してみます.

$ curl -XPOST http://localhost:3000/posts -d '{"title": "new title 2022.05.17", "author": "lightkun@v2"}' -H "Content-Type: application/json
{
  "title": "new title 2022.05.17",
  "author": "lightkun@v2",
  "id": 3
}

実行後にdb.jsonをみるとid=3の新規リソースが作成されていることが分かります.

PUTメソッドで作成したid=3を更新してみます.

$ curl -XPUT http://localhost:3000/posts/3 -d '{"title": "change by put method 2022.05.17", "author": "lightkun@v3"}' -H "Content-Type: application/json"
{
  "title": "change by put method 2022.05.17",
  "author": "lightkun@v3",
  "id": 3
}

実行後にdb.jsonをみるとid=3の新規リソースが変更されていることが分かります.

POSTやPUTメソッドが実行できるのは嬉しいですが,リソースは変更しないようにしたい場合もあります(どちらかというと変更したくない用途のほうが多い気はする).
試してはいないですが,以下の記事のようにミドルウェアを使って,GET以外のメソッドもGETメソッドに置き換える処理を入れると実現可能なようです.

https://rightcode.co.jp/blog/information-technology/json-server-rest-api-mock-server-syain

ハマったこと

自分の環境でしか発生しないかもしれませんが, http://localhost:3000/ へアクセスしてもエラーになりました.原因は単純にポート番号3000でdockerコンテナを起動していたためです.
ポート番号を何に使っているかは

$ lsof -i:3000

で確認可能です.
という感じでjson-serverを起動したときにAlready Usedなどのエラーが出なかったので,少しハマってしまいました.

株式会社ゆめみ

みんな知ってるあのサービスも、ゆめみが一緒に作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用の内製化支援。Swift,Kotlin,Rust,Go,Flutter,ML,React,AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中

Discussion

ログインするとコメントできます