JSON serverをモックサーバーとして使う時の小ネタ

はじめに

今回は、JSON serverをモックサーバーとして使う時の小ネタを紹介します。

想定しているシーンとしては、フロントエンドの開発を行う際に、バックエンドのAPIがまだ完成していない場合に仮の値を返すためだけに使う場合です。

JSON serverをモックサーバーとして使う時の小ネタ

• すべてのリクエストをGETメソッドとして受け付ける

すべてのリクエストをGETメソッドとして受け付けるようにすることで、POSTやPUTなどのリクエストをしても常に一定の値を返すようにすることができます。
たとえば、以下のようなdb.jsonがあるとして、POSTを送信するとpostsは増えていきます。

{
  "posts": [{ "id": 1, "title": "title", "author": "john" }]
}

{ "id": 2, "title": "title2", "author": "john" }をPOSTで追加すると、以下のようになります。

{
  "posts": [
    { "id": 1, "title": "title", "author": "john" },
    { "id": 2, "title": "title2", "author": "john" }
  ]
}

これは不要な差分ですし、仮の値を返すためだけに使いたいのでpostsが増えていくのは避けたいです。

これに対処するため、すべてのリクエストをGETメソッドとして受け付けるようにしましょう。

index.js

server.use((req, res, next) => {
  req.method = 'GET'; // すべてのリクエストをGETと解釈させる
  next();
});

こうすることで、POSTやPUTなどのリクエストをしても常に一定の値を返すようにすることができます。

• クエリパラメーターを無視する

こちらも、「すべてのリクエストをGETメソッドとして受け付ける」と同じようにクエリパラメーターを無視することで、本来クエリパラメーターによって結果がブレるところを返す値が変わらないようにすることができます。

index.js

server.use((req, res, next) => {
  req.url = req.url.split('?')[0];
  next();
});

クエリパラメーターは?以降の文字列なので、それを削除することでクエリパラメーターを無視することができます。

• JSON serverのログを出力しない

JSON serverはリクエストごとにログを出力しますが、それを出力しないようにすることもできます。
私の開発環境では、フロントエンドと同じターミナルでJSON serverを起動しているので、ログが出力されると見づらくなってしまいます。

そこで以下の方法を使ってログを出力しないようにしています。

index.js

const middlewares = jsonServer.defaults({ logger: false });

server.use(middlewares);

jsonServer.defaultsにlogger: falseを渡すことで、ログを出力しないようにすることができます。

これでログが多少減るので、見やすくなると思います。

• サーバーが正常に起動したことを知らせる

通常、JSON serverはサーバーが起動したことを知らせるログを出力しますが、JSON serverのログは出力しないようにしてしまっているのでその点は不便になってしまっています。
そこで以下の方法を使ってサーバーが正常に起動したことを知らせるようにしています。

index.js

server.listen(3001, () => {
  console.log('json-server: running on server !');
});

server.listenの第二引数にコールバック関数を渡すことができるので、console.logを用いてサーバーが正常に起動したことを知らせるようにしています。

• リクエスト受け取り時にその情報を出力する

ログが多すぎると困りますが、全く出ないのも困ります。
リクエスト受け取り時にその情報を出力するようにしておくと、リクエストがちゃんと来ていることがわかったり、リクエストの内容を確認することができるので便利です。

index.js

server.use((req, res, next) => {
  res.on('finish', () => {
    const log = `json-server:  ${req.method} ${req.originalUrl} ${res.statusCode}`;
    console.log(log);
  });

  next();
});

このようにすることで、リクエスト受け取り時にその情報を出力することができます。
reqにはリクエストの情報が、resにはレスポンスの情報が入っているので、それを使ってログを出力しています。

必要に応じて、欲しい情報をログに出力するようにできるのでとても便利です。
また、「json-server: 」という文字列をつけていることで、JSON serverのログだと区別しやすくするようにしています。

• CORSエラーを回避する

JSON serverを使っていると、CORSエラーが発生することがあります。
以下のようにすることで、CORSエラーを回避することができます。

index.js

server.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Headers', '*');

  next();
});

res.headerを使って、Access-Control-Allow-OriginとAccess-Control-Allow-Headersを設定することでCORSエラーを回避することができます。
http://localhost:3000の部分は、適切なURLに置き換えてください。

おわりに

いかがだったでしょうか？
１つでもお役に立てるものがあれば嬉しいです。

最後まで読んでいただき、ありがとうございました！