JSON ServerでRestAPIのモックを作成した話

こんにちは。弥生の森です。
最近の悩みは、家のGoogleHomeが"話しかけた備忘録をSlackに送るだけのマシン"になってしまっていることです。
早く彼女に新しい仕事を振らなければなりません。

さて、今日は、JSON Serverを使用してRestAPIのモックを作成した話を書きたいと思います。

APIできあがっていないとフロントエンドの開発滞る問題

現在業務で、"社内のAPIをまとめて呼ぶAPI"の開発を行っています。
しかし、新規開発なので利用するAPIのほとんどは、開発時に完成していません。
新規でフロントエンド等の開発を行う際のあるあるだと思います。
でも、APIできあがっていないので開発できませんという訳にもいきません。
では、うちのチームはどうしていたのか。

EC2にApacheでモックサーバーをたてていた

今までは、開発者が自分ひとりということもあり、AWSのEC2上にApacheでモックサーバーをたてていました。
jsonファイルを置き、任意のURIに紐付けて、固定でjsonを返すようにしていたのです。
しかし、開発が盛り上がるにつれてチームに一人、二人と人がやってきて、モックサーバーは混雑するようになりました。

モックがネックでテストはウェイト、yeah。

・・・どうしよう？
EC2をコピーして各人使う？（お金かかるし・・・）
ローカルにApacheたてる？（各自やるの？手順書つくるの？めんどくさい・・・）
何か、楽で簡単なやり方はないかと探しておりました。

JSON Server

見つけました。

JSON Server。 github.com

　
「30秒以内にRestAPIのモックサーバーを作るで、コーディング不要で（いやほんまに）」 ※意訳

これや。こういうの探しとったんや└|∵|┐
アイコンが可愛いですね。
　
JSON Serverは、Node.jsベースのライブラリです。
本当に簡単に、モックサーバーを作ることができます。そう、30秒で。(ほんまに。)
それではその手順をみていきましょう。

JSON Serverをつかってみる

①Node.jsを入れる

JSON ServerはNode.jsベースのライブラリですので、まずNode.jsを入れなければいけません。※Node.jsが入っている場合は飛ばして次の手順に進んでください。
ここでWindows向けのNode.jsを入手します。他の環境のインストール方法については記載を省略します。
英語ですが、特に悩むことなく「Next」連打でインストール完了するかと思います。
次のコマンドを試して、バージョンが表示されればインストール成功です。

> node --version
> npm --version

②Json-serverをインストール

下記のコマンドでJson-serverをインストールします。

 > npm install -g json-server

エラーなく終了すれば成功です。

③リソースを作成する

インストールしたら、次はリソースを作成しましょう。
呼んだときに返すJson形式のレスポンスです。
サンプルとしてこのようなものを作成します。

db.json

{
  "get_users": 
                         {
                           "name": "弥生もりこ", 
                           "age": "30", 
                           "tel": "080-0000-1111"
                          }

  ,"get_company": 
                          {
                           "name": "弥生商店", 
                           "address": "秋葉原1丁目", 
                           "tel": "03-0000-1111"
                          }
}

route.json

{
   "/api/test/mock/v1/get_users": "/get_users"
  ,"/api/test/mock/v1/get_company": "/get_company"
}

json-serverの制約としてリソースパスにスラッシュを含めることが出来ないのですが、スラッシュを含むAPIのモックを作成したかったため、route.jsonでパスを書き換えました。

④起動する

リソースができたら起動します。

> json-server db.json --routes route.json -p 3000

起動も簡単。ポート番号も変えることができます。 当たり前ですが、ポート番号を変えれば多重起動が可能です。

⑤GETを投げてみる

いよいよ確認！
Postmanで http://localhost:3000/api/test/mock/v1/get_users にGETを投げてみます。 やったー！無事、かえってきました。
ほんとこれだけ。ラクダに乗って飛び回っている私にだって、30秒+αで出来ました。

POSTするとリソースが書き換わってしまう問題

POSTを投げてみる

流れで同じURLにPOSTも投げてみます。
んん？期待した値が返らない。
どうやら、POSTするとリソースファイルが書き換えられるようです。
ツールとしては便利なんだけど、POST型のAPIもモック化したい私にとっては不都合。
POSTでも書き換えられないよう、ほんの少しコーディングします。

コーディングして再起動

下記のようなserver.jsを、route.jsonの代わりに配置します。
POSTリクエストをGETリクエストに偽装します。
route.jsonの内容もここに記載します。

server.js

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

// routes.jsonの内容をここに記載
server.use(jsonServer.rewriter({
   "/api/test/mock/v1/get_users": "/get_users"
  ,"/api/test/mock/v1/get_company": "/get_company"
}))

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

server.use(function (req, res, next) {
  if (req.method === 'POST') {
    // POST送信を受ける場合、受けたPOSTレスポンスをGETに変更する
    req.method = 'GET';
    // req.query = req.body;
  }
  // Continue to JSON Server router
  next()
})

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

ディレクトリはこんな感じ。

ほれ└|∵|┐再起動。
今度はserver.jsの中に起動情報が書かれているので、server.jsを叩きます。

> node server.js

さっきみたいな起動画面ではありませんが、これで起動OKです。

POSTを投げてみる(再)

無事、かえってきました。
リソースファイルも書き換えられていません。

まとめ

いかがでしたでしょうか。
コーディング不要で30秒以内に、RestAPIのモックサーバーを作ることができました。
また、少しのコーディングは必要でしたが、POST形式のAPIについてもモック化することができました。
JSON Serverのおかげで、我がチームは全員快適にテストすることができ、みんな幸せに過ごしました、とさ。

弥生では様々なサービス・ツールを使って、サービス改善やシステム運用改善に取り組んでいます。 そういった情報をこれからも発信できればと思っておりますので、引き続き宜しくお願い致します。