テストに使える簡易 API サーバがサクッと立てられる「json-server」

テスト用の API サーバを用意する時に、「json-server」という npm パッケージを使ったら簡単便利だったので紹介。

• GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

複雑な環境構築などが必要なく、テストデータや設定情報を JSON ファイルで管理できるのが特徴。必要であれば JavaScript で凝った設定もできる。

インストールと最小構成

まずは npm で json-server をグローバルインストールする。

$ npm install -g json-server

次に適当な作業ディレクトリに設定ファイルの類を置いていく。

# 適当な作業ディレクトリを作り移動する
$ mkdir JsonServer && cd $_

# データを保持する「db.json」を生成する
$ touch db.json

データを保持する db.json は公式のサンプルをパクって以下のような内容を入れておく。

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

そしたら json-server を起動する。

# db.json を参照して json-server を起動する
$ json-server 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

これでサーバが起動した。試しに http://localhost:3000 にアクセスしてみると、JSON Server のページが開いている。

次に、http://localhost:3000/posts/1 という URL にアクセスしてみると、posts の中にある、id が 1 のデータが JSON 形式で返される。これが API サーバの GET メソッドにあたる。

他にも ? によるフィルタ、オブジェクト全体を文字列検索する ?q、ソートが可能な &_sort・&_order など、豊富なオプションが用意されている。このあたりは公式の README.md などを参照してほしい。

プログラムから json-server を利用する際は、http://localhost:3000/ ではなく http://127.0.0.1:3000/ という URL で参照すること。

json-server の面白いところは、プログラムから指定の URL に POST 送信すると、実際に db.json のファイルの中身を書き換えてくれるところ。さながら JSON 形式の SQLite といったように db.json が更新されるのだ。

独自のルーティングを設定する

json-server は db.json のプロパティに応じて URL を自動生成してくれる。しかし実際の API サーバだと http://example.com/blog/posts/ という URL でアクセスする必要があって、開発環境ではドメイン部分のみ変更できる、といった作りの場合は、http://localhost:3000/blog/posts/ でアクセスして http://localhost:3000/posts/ と同じデータを受け取れるようにルーティングを設定してやる必要がある。

まずはルーティングを設定するための routes.json を作成する。

$ touch routes.json

routes.json を開いて、以下のようにルーティングを設定していく。

{
  "/blog/posts": "/posts"
}

複数増やす場合はカンマでプロパティを区切って指定していけば良い。

そして起動する時に routes.json を使用してルーティングするよう、オプション指定すれば OK。

$ json-server db.json --routes routes.json

これで http://localhost:3000/blog/posts/ という URL が出来ていて、中身としては http://localhost:3000/posts/ と同じデータを返すように設定できた。

• 参考：テスト用REST-APIサーバーをコマンド一発で！「json-server」 | cupOF Interests … テストデータの作成に faker というパッケージも紹介している。

より細かくレスポンスを作るには

API サーバとしては、POST 通信の場合はデータの書き込みだけで返却値がなかったりするが、何かを POST 送信した時に値を返却したい、という場合は、以下の要領で JavaScript を書くことで、独自のレスポンスを定義できる。

まず作業ディレクトリに json-server をローカルインストールする。

$ npm install -D json-server

次に API サーバの設定を定義する server.js を作成する。

$ touch server.js

server.js の中には以下のように書いていく。

const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();

// ミドルウェアの設定 (コンソール出力するロガーやキャッシュの設定など)
server.use(middlewares);

// 独自のルーティングを追加する
server.post('/tasks', (req, res) => {
  const tasks = router.db
    .get('tasks')
    .filter((task) => {
      return new RegExp(req.body.id).test(task);
    })
    .value();
  // 返却値を設定する
  res.jsonp(tasks);
});

// db.json を基にデフォルトのルーティングを設定する
server.use(router);
// サーバをポート 3000 で起動する
server.listen(3000, () => {
  console.log('JSON Server is running');
});

server.json ができたら、Node.js を使って server.json を実行する。

$ node server.js
JSON Server is running

これでできあがり。http://localhost:3000/tasks に POST 送信すれば、独自に定義したレスポンスを受け取ることができるようになった。

• 参考：Json post response body · Issue #296 · typicode/json-server · GitHub

実際に POST 通信してみたい場合は、以下のようなサイトで試すことができる。

• 参考：POSTメソッドのテストツール

とりあえず何か返答してくれる API サーバをサクッと立ち上げるにはうってつけだし、凝った設定もできそうで、かつ使いやすくてオススメ。