【Node.js】json-server導入【Mock API】

概要

APIのモック用にjson-serverを導入したので主な処理をざっくりとまとめた

json-serverについて

簡単にモックAPIを作成できるnodeのライブラリ
主にテスト作成時に使われるもの

導入

$ yarn add json-server

または

$ npm install –save-dev json-server

実際に使ってみる

次の内容のmock.jsonを作成する

{
  "test": {
     "id": "mock_id",
     "text": "mock json desu"
  }
}

ターミナルで次のコマンドを実行

$ json-server mock.json

リクエストメソッドGET、エンドポイントhttp://localhost:3000/testを叩くと次の内容のレスポンスを取得できる

{
   "id": "mock_id",
   "text": "mock json desu"
}

解説

mock.jsonの第一階層のキー名がそのままエンドポイントになる
例えば次のようにmock.jsonを作成すればエンドポイントが/testと/sampleのAPIのモックを作れる

{
  "test": {
     "id": "mock_id_1",
     "text": "mock json test"
  },
  "sample": {
     "id": "mock_id_2",
     "text": "mock json sample"
  }
}

リクエストメソッドは全てGETになる(仕様)
portの指定がなければ3000が割り振られる

オプションについて

-m {{ jsファイルのパス }}

APIモックが叩かれたらデータを取得する前に指定したjsファイルを実行してくれる
GET以外のリクエストメソッドのAPIのモックを作成したい時やトークンでの認証をする時などに使う

例

mock.json

{
  "test": {
     "id": "mock_id_1",
     "text": "mock json test"
  },
  "test_patch": {}
}

次の内容のmiddleware.jsを作成

module.exports = async function (req, _res, next) {
  // リクエストメソッドが PATCH の場合、リクエストURLに _patch をつけ、リクエストメソッドを GET に直す
  if (req.method === 'PATCH') {
    req.method = 'GET'
    req.url += '_patch'
  }
  next()
}

ターミナルで次のコマンドを実行

$ json-server mock.json -m middleware.js

リクエストメソッドPATCH、http://localhost:3000/testを叩くと次のレスポンスを取得する

{}

--routes {{ jsonファイルのパス }}

エンドポイントが/test/sampleのような形になる場合やエンドポイントにクエリパラメータが含まれる場合に使う

例

mock.json

{
  "mock_1": {
     "id": "mock_id_1",
     "text": "mock json test"
  }
}

次の内容のroutes.jsonを作成

{
  "/test/sample": "/mock_1"
}

ターミナルで次のコマンドを実行

$ json-server mock.json --routes routes.json

http://localhost:3000/test/sampleを叩くと次のレスポンスを取得する

{
   "id": "mock_id_1",
   "text": "mock json test"
}

--host {{ host名 }}, -p {{ port番号 }}

ホスト名とポート番号を指定できる

おまけ

モックの数が増えるとmock.jsonの中身が煩雑になってくると思います
それの対策として他のファイルでjsonを作成して立ち上げ時にmock.jsonにまとめるという形にしました

次の内容のjsファイルを用意

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

const root = path.resolve('./', 'mocks')

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
}, {})

// 作成したjsonをmock.jsonに書き込む
fs.writeFile('./mock.json', JSON.stringify(api), err => {
  if (err) throw err
})

mocksフォルダを作成し、その中にファイル名がパスになるjsonファイルを作成する
エンドポイントごとにファイルを分けられるのでmock.jsonだけの状態よりはかなり見やすくなります
最後にサンプル用に作成したリポジトリを置いておきます