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

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

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

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

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

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

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

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

f:id:morinco25:20180619160824p:plain

・・・どうしよう?
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を入手します。他の環境のインストール方法については記載を省略します。 f:id:morinco25:20180619154544p:plain
英語ですが、特に悩むことなく「Next」連打でインストール完了するかと思います。
次のコマンドを試して、バージョンが表示されればインストール成功です。

> node --version
> npm --version

f:id:morinco25:20180619155240p:plain

②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

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

⑤GETを投げてみる

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

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

POSTを投げてみる

流れで同じURLにPOSTも投げてみます。
f:id:morinco25:20180620161000p:plain んん?期待した値が返らない。
どうやら、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');
});

ディレクトリはこんな感じ。
f:id:morinco25:20180620162703p:plain

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

> node server.js

f:id:morinco25:20180620162445p:plain さっきみたいな起動画面ではありませんが、これで起動OKです。

POSTを投げてみる(再)

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

 

まとめ

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

f:id:morinco25:20180619160335p:plain

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

もくテクvol.14「ゼロから始める自動テスト~10日で実践!自動テスト開発 製品開発での活用方法もお話しします~」を開催しました

勉強会を開催しました

2018/05/24(木)に第14回もくテク 「ゼロから始める自動テスト~10日で実践!自動テスト開発 製品開発での活用方法もお話しします~」を開催しました。

f:id:yayoiTech:20180531180348j:plain

今回は入社2~3年目の若手社員で構成される「テスト自動化チーム」から、
簡単な自動テストの作成方法やプロセスへの取り入れ方をご紹介しました。

前回のテスト自動化チームがもくテクで登壇した時(http://tech.yayoi-kk.co.jp/entry/2017/07/19/140734)以上に多くの方にご来場頂くことができ、自動化に興味を持たれている方が多いことを実感しました。

f:id:yayoiTech:20180531180425j:plain

セッション後にご参加いただいた方々とお話してみて、まだまだ自動化は手探りで進める方が多い分野のように感じました。
ご参加いただいた方々にとって少しでも参考になれば幸いです。

f:id:yayoiTech:20180531180409j:plain

また、今回はLT枠として@nihonbuson様に「ほどよく自動テストする」と題して、
自動テストのメリットと陥りがちな問題についてお話していただきました。
ご協力いただき誠にありがとうございました!



次回のもくテクは06/14(木)を予定しています。
近日中にconnpassに公開予定ですので、ご興味のある方は、connpassよりお申し込みください。

詳細はこちら▼▼▼
https://mokuteku.connpass.com/



「Toolsの杜」に登壇します

2018/07/10(火)にグレープシティ株式会社様主催の「Toolsの杜」に弊社社員が登壇します。
ご興味のある方は是非ご参加ください!
www.grapecity.co.jp

もくテク「品質について悩める人の会 vol.2」を開催しました

弥生ではもくテクと題した勉強会を開催しており、 2018/3/15(木)には第11回目となる「品質について悩める人の会 vol.2」を開催しました。

品質をテーマとしたもくテクは2017年10月以来の2回目です。

今回は講義型ではなく、ワークショップ形式で参加者同士でのディスカッションを行いました。

f:id:yayoi_kusaka:20180322182127j:plain

ワークショップではグループを作り、お題(品質に関するデータ)に対して、 企業文化やプロジェクトにおける役割、品質に対する見方が異なる方同士で積極的に意見を交わしていただきました。

f:id:yayoi_kusaka:20180322182156j:plain

ご参加いただいた方のご協力によって予想以上に盛り上がり、 休憩時間やもくテク終了後も会話が止まらない状態でした。

ご参加いただいた皆様、ご協力ありがとうございました!

次回は04/12(木)に「技術、品質担当が考えるモノづくりのポイント」のテーマで、 弥生の開発プロジェクトのリーダー陣から各ポジションで意識していることや取り組みをご紹介する予定です。

ご興味のある方は、connpassよりお申し込みをお願いします。

詳細はこちら▼▼▼ https://mokuteku.connpass.com/event/82349/