json-serverでエンドポイント毎にjsonファイルを分割する

json-serverとは

WebAPIを利用したアプリケーションを開発している時に、APIをモックで置き換えたい事があると思います。json-serverはJSON形式のレスポンスを返すモックサーバを、簡単に構築できるライブラリです。

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

インストール・起動方法

インストール方法

インストールにはnodejsが必要です。npmを使ったインストール方法は以下の通りです。

npm install —-save-dev json-server


起動方法

あらかじめ、以下のようなjsonファイルを準備しておきます。
作成したjsonファイルを指定してjson-serverを実行すると、キー名をエンドポイントとしてjsonを返却するサーバがlocalhostに起動します。

// end-point-name.json
{
  "end-point-name": {
    "items": [
      {
        "name": "hoge"
      }
    ]
  }
}

上記jsonファイルを指定してjson-serverを実行します。

json-server end-point-name.json

http://localhost:3000/end-point-nameにアクセスすると、以下のようなjsonが返ってきます。

{
  "items": [
    {
      "name": "hoge"
    }
  ]
}

エンドポイント毎にjsonファイルを分割する方法

開発を進めるうちにモック用のjsonファイルは肥大化するため、エンドポイント毎にjsonファイルを分割したくなるのですが、json-serverには1つのファイルしか渡すことができません。

そこで、複数のjsonファイルを結合するスクリプトを自前で組む必要があります。
jsonファイルを監視してmock.jsonという名前の巨大なjsonを生成し、それをjson-serverに渡します。

以下のディレクトリ構成でファイルを配置します。

/
  /api - エンドポイント毎のjsonファイルを格納
    - end-point-name-1.json
    - end-point-name-2.json
    - end-point-name-3.json
    - ...
  /scripts
    - merge_mock_json.js - mock.jsonファイルを生成する
mock.json

// merge_mock_json.js

const fs = require('fs');
const path = require('path');

// ルートパスを設定
const root = path.resolve('./', 'api');

fs.watch(root, function(event, filename) {
  if (api === undefined) { api= {} };

  // jsonファイルのみ処理する
  if (path.extname(file) == '.json') {

    // /api/mock配下にあるjsonファイルの名前をエンドポイントとして読み込む
    const api = fs.readdirSync(root).reduce((api, file) => {
      const endpoint = path.basename(file, path.extname(file));
      api[endpoint] = JSON.parse(fs.readFileSync(root + '/' + file, 'utf-8'));

      return api;
  }
  }, {});
  fs.writeFile(root + '/../mock.json', JSON.stringify(api), function(err) {
    if (err) throw err;
    console.log('mock file updated.');
  });
});

上記スクリプトとjson-serverを並列実行するため、npm-run-allというライブラリをインストールします。

npm install --save-dev npm-run-all

package.jsonにnpm scriptsを記載します。

{
  ...
  "scripts": {
    "serve": "npm-run-all -p create-mock boot-mock",
    "create-mock": "node ./scripts/merge_mock_json.js",
    "boot-mock": "json-server --watch ./mock.json",
    ...
  },
  ...
}

npm run serveでモックが起動します。

json-serverはその他にも検索やルーティング、POSTでデータを保存するなど、WebAPIのモックとしては充分な機能が揃っており、とても便利です。
ぜひ使ってみてください。