フロントの開発をする上で、先行的にリクエスト・レスポンス周りの挙動確認をしたい時に結構使えたので使う時用メモ。

Nvmなどを使ってNode.js環境を構築。

モックサーバーに使用するフォルダ作成

$ mkdir [folder name]

フォルダ内でnpm初期化・json-serverインストール

$ cd [folder name]
$ npm init --yes
$ npm install json-server --save-dev

package.jsonにコマンド追加

"scripts": {
+ "serve": "json-server --watch db.json --port 3333",
+ "serve:js": "json-server index.js",
+ "deploy": "node deploy.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

ローカルサーバ起動

$ npm run serve

db.jsonにモデル名をキーとして設定

// 
{
  "users": []
}

index.jsを初期値にローカルサーバ起動

db.jsonがあるとそっちが優先されるので削除しておく。
以下の変数dataがそのままJSONのDBになると考えておっけー。

// index.js
module.exports = () => {
  const data = { users: [] }
  for (let i = 0; i < 100000; i++) {
    data.users.push({ id: i, name: `user${i}` })
  }
  return data
}
$ npm run serve:js

(おまけ)事前にdb.jsonへ反映

同じくdataがそのままJSONのDBになる。

// deploy.js
const fs = require("fs")

const data = { users: [] }
for (let i = 0; i < 100000; i++) {
  data.users.push({ id: i, name: `user${i}` })
}

try {
  fs.writeFileSync("db.json", JSON.stringify(data))
} catch (e) {
  console.log(e.message)
}
$ npm run deploy

curlコマンドでも操作可能。

$ curl -X [リクエストメソッド] -H "Content-Type: application/json" -d '[リクエストボディ]' [リクエストパス]

アプリケーションからリクエストすることがほとんどだと思うので以下は例として構築時の各メソッド確認用。

# POST
$ curl -X POST -H "Content-Type: application/json" -d '{"name":"Tom", "age":20}' localhost:3333/users

# GET
$ curl -X GET localhost:3333/users/1

# PUT
$ curl -X PUT -H "Content-Type: application/json" -d '{"name":"Tom", "age":30}' localhost:3333/users/1

# DELETE
$ curl -X DELETE localhost:3333/users/1

基本的にはREST構成になっているので直感的にわかりやすいと思う。

OWARI。

プロフィール画像

ふじわら

よくわからないもので戯れてたら自分のことすらよくわからない人間になってしまいました。

ひっそりYouTubeしてます。