, ,

[Front-End General] JSON Server で fake REST API を立てる

公開日: 2016/12/16
更新日: 2018/12/26

フロントの実装時に API ができていることはまれなので、モックがあると良いですね。

Contents

Installation

ここではグローバルインストールしておく。

% sudo npm install -g json-server

Usage

db.json を作成。

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 でサーバを起動する。

% 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...

http://localhost:3000 をブラウザで表示すると、定義されたメソッドやデータベースの状態を確認できる。

GET する

かんたんに動作を確認してみます。
ちなみに POST もできます。

curl

curl で GET すると以下を確認できる。
整形済みの情報が返ってきますね。

% curl -X GET "http://localhost:3000/posts"
[
  {
    "id": 1,
    "title": "json-server",
    "author": "typicode"
  }
]

今回は不要ですが、curl の返値を整形表示する方法については、以下が詳しい。

% curl -X GET "http://weather.livedoor.com/forecast/webservice/json/v1?city=170010" | python -m json.tool

jq

jq というツールは brew でインストールできる。

% brew install jq

こんな形で実行すると、色つきで整形して日本語もうまい事扱えますね。

% curl -X GET "http://weather.livedoor.com/forecast/webservice/json/v1?city=170010" | jq '.' -C | less -R

補遺

SSL(HTTPS) について。