Node の JSON Server とそのサービス My JSON Server が凄く便利だった

こんにちは。エクセルソフトの田淵です。

私は API Management ツールの Kong も担当していて、デモやサンプルの作業をする時には API へのアクセスが必要になります。

今までは httpbin を使っていました。普段使いであればこれで十分なのですが、大量の JSON を参照したい時などに少し困ります。自前で立てるのも大変ですし。

そんな時にたった30秒でREST APIのモックが作れる JSON Serverでフロントエンド開発が捗る - WPJ ← こんな記事を見つけました。

JSON Server とは
My JSON Server とは
1. 使ってみよう
まとめ
API の管理が必要な方は

JSON Server とは

OSS の REST APIのモックが作れる npm package です。（ほぼ上記の記事を読めばすべて書いてあるのですがｗ

GitHub は typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously) です。

インストール

要件として、Node.js と npm が必要です。

Windows であれば、ダウンロード | Node.js から Windows Installer をダウンロード、インストールしましょう。

2019/8/20 現在であれば、以下になっているはずです。

PS C:\> node -v
v10.16.3
PS C:\> npm -v
6.9.0

npm が動けば後は簡単です。JSON Server のインストールは npm から以下のコマンドを入力します。

npm install -g json-server

後は GitHub のドキュメント通りにやってみましょう。

動かしてみよう

任意のフォルダに移動して、以下の内容で db.json を作成します。

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

ファイルを作成したら、json-server --watch db.json のコマンドで動作させます。

PS D:\_dev\json-server> json-server --watch db.json

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/posts
  http://localhost:3000/comments
  http://localhost:3000/profile

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

Localhost の 3000 番ポートで動作して、JSON に書いたそれぞれの配列がエンドポイントとして用意されるようです。

アクセスして GET してみよう

ブラウザで localhost:3000 にアクセスしてみましょう。

いい感じですね～～

先ほど JSON Server を起動した PowerShell でも次のようなログが出力されています。

GET /db 200 3.378 ms - 243
GET /__rules 404 17.086 ms - 2

そのままリンクの /posts をクリックしてみましょう。

ちゃんと JSON を返してくれていますね。

同じアドレスに Postman でもアクセスしてみましょう。Postman については以下でエントリーを書いていますので、ぜひ使ってみてください。便利です。

RESTサービスを触る際の必須ツールPostmanを使ってみました | エクセルソフトブログ

Postman でもちゃんと取れていますね。

macOS や Linux、WSL／WSL2、Cygwin などの方は CURL でも良いですね。

$ curl localhost:3000/posts

[
  {
    "id": 1,
    "title": "json-server",
    "author": "typicode"
  }
]

正しく取得できていると思います。

POST してみよう

GET できることが分かったので、POST してみましょう。

Postman からは「POST」を選択＞「Body」で「raw」を選択して、右側で「JOSN (application/json)」を選択すると、自動的に Header に「Content-Type: application/json」を追加してくれます。下の枠に JSON を記述して POST しましょう。

CURL の場合は、次のコマンドで POST できます。

$ curl -H 'Content-Type:application/json' -d '{"title":"こんにちは！","author":"ytabuchi"}' localhost:3000/posts

{
  "title": "こんにちは！", 
  "author": "ytabuchi",
  "id": 2
}

id が自動インクリメントされて帰ってきました。

ここで面白いのはちゃんとローカルの JSON ファイルも更新されていることです。

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    },
    {
      "title": "こんにちは！",
      "author": "ytabuchi",
      "id": 2
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

面白いサービスだと思います。

その他の使い方

それ以外の使い方は

たった30秒でREST APIのモックが作れる JSON Serverでフロントエンド開発が捗る - WPJ や GitHub の README typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously) を見てみてください。

公開する場合は？

ローカルだけでなく、インターネットでアクセスしたい。という場合は、localhost の TCP サーバーを公開する ngrok などを使うのが一般的だと思います。

JSON Server の localhost:3000 にアクセスしたときに、右上にいくつかメニューがあったのですが、気づきましたか？

My JSON Server というリンクがあったと思います。

これは JSON Server と同じように、db.json を用意すると、インターネットに公開された REST API のサーバーが動かせるステキなサービスでした。

My JSON Server とは

My JSON Server - Fake online REST server for teams

JSON Server と同じ仕組みで、db.json を GitHub に置いてそのリポジトリを指定すると、インターネット上に REST API のモックサーバーを気軽に立てられる。というサービスです。

Beta 版ということで、いくつかの制限があります。post しても JSON をアップデートできない（GitHub の更新が必要になってしまうので）というのは少し不便ですが、さっとテストするには十分かもしれません。

制限は以下の通りです。

Open Source	Sponsor Access ($15/month)
最大 10KB の db.json 最大 5 個の REST エンドポイントエンドポイントあたり最大 30 アイテム	最大 500KB の db.json 最大 25 個の REST エンドポイントエンドポイントあたり最大 200 アイテム

（Free for OSS とあるのが少し気になりますが…）

使ってみよう

これも、サイトにある How to の通り（といっても３ステップですｗ）です。

GitHub にレポジトリを作成します。 ( ＜your-username＞/＜your-repo＞ )
db.json ファイルを作成します。
https://my-json-server.typicode.com/＜your-username＞/＜your-repo＞ にアクセスします。

これだけ。

試しに https://my-json-server.typicode.com/ytabuchi/my-json-server-test で作成してみました。

いい感じですね。

まとめ

REST API を使う、作るにあたり、モックのサービスがあると便利
Node で動作する JSON Server は簡単で面白い
インターネットでの接続を試したい場合は My JSON Server も良いかもしれない

API の管理が必要な方は

私が担当している Kong を触ってみてください。

OSS ベースなので、すぐに皆さんの API サービスに認証機能やログ機能などを追加することができます。

OSS Kong でのハンズオン資料も公開していますので、ぜひご覧ください。

以上です。