快適なフロントエンド開発のための時間をかけないモックAPI作成方法【node.js】

#147 時間のかからない簡易的なAPIを作成したい

サーバーサイドと疎結合なアーキテクチャでフロントエンド開発をする場合、モックデータを取り扱うための簡易的なAPIをあまり時間をかけず作りたいと思ったのがきっかけ。node.jsの「json-server」を利用してみた話。

 

目次

[toc]

 

json-serverについて

json-server

json-server

Get a full fake REST API with zero coding in less than 30 seconds (seriously)

Created with <3 for front-end developers who need a quick back-end for prototyping and mocking.

30秒でREST APIが作れてしまう。これだ、と思い早速使うことに。

しかもherokuに簡単にデプロイできる用の「json-server-heroku」というツールも用意してくれている。簡易的REST APIを作る場合超便利。しかも保存もしてくれるという。仕組みは単純で、jsonファイルにレスポンスとして返却したデータ構造体を定義してデプロイするだけ。

今回はこのjson-serverとherokuを使用して、ローカルでなくリモートで動くREST APIを作成した。

 

環境

  • node v10.15.3
  • npm 6.4.1
  • yarn 1.9.4

 

実装

1, インストール & ディレクトリ作成

json-serverのインストール(グローバル)

yarn global add json-server

 

ルートとするディレクトリ作成(今回はtest_mock_api で作成)

mkdir test_mock_api

 

npm初期化

yarn init

package.jsonが作成される。

 

npm-run-allのインストール

yarn add npm-run-all --dev

npm-run-allは、npm run コマンドを管理するもので、まとめて複数のコマンドを実行できる。今回利用するためあらかじめインストールする。

 

ルートディレクトリ下に以下のようにmockAPIディレクトリを作成する。

ディレクトリ構造

今回は簡易的に「users」と「blogs」の2つのリソースで行う。

 

2, ファイル中身の編集

mockAPI/api/users.json

[
  {
    "id": 1,
    "name": "たけのうちゆたか",
    "email": "taketake@taketake.com",
    "password": "secret",
    "created_at": "2020-01-10T08:19:48.039Z",
    "updated_at": "2020-01-10T08:19:48.039Z"
  },
  {
    "id": 2,
    "name": "鈴木一郎",
    "email": "suzuki@suzuki.com",
    "password": "suzuki",
    "created_at": "2020-01-10T08:19:48.039Z",
    "updated_at": "2020-01-10T08:19:48.039Z"
  }
]

 

mockAPI/api/blogs.json

[
  {
    "id": 1,
    "title": "今日はラーメンを食べました",
    "content": "text text text text text text text text text text",
    "userId": 1,
    "created_at": "2020-01-10T08:19:48.039Z",
    "updated_at": "2020-01-10T08:19:48.039Z"
  },
  {
    "id": 2,
    "name": "おすすめの銭湯",
    "content": "text text text text text text text text text text",
    "userId": 2,
    "created_at": "2020-01-10T08:19:48.039Z",
    "updated_at": "2020-01-10T08:19:48.039Z"
  },
  {
    "id": 3,
    "name": "インスタ始めました!",
    "content": "text text text text text text text text text text",
    "userId": 1,
    "created_at": "2020-01-10T08:19:48.039Z",
    "updated_at": "2020-01-10T08:19:48.039Z"
  }
]

 

mockAPI/scripts/merge_mock_json.js

const fs = require('fs')
const path = require('path')
const root = path.resolve('./', 'mockAPI/api')

const writeMockJSON = () => {
  const api = fs.readdirSync(root).reduce((api, file) => {
    if (api === undefined) { api = {} }
  
    if (path.extname(file) === '.json') {
      const endpoint = path.basename(file, path.extname(file))
  
      if (api[endpoint] === undefined) { api[endpoint] = {} }
  
      api[endpoint] = JSON.parse(fs.readFileSync(root + '/' + file, 'utf-8'))
  
      return api;
    }
  }, {})
  
  fs.writeFileSync(root + '/../db.json', JSON.stringify(api), (err) => {
    if (err) throw err
  })
}

fs.watch(root, () => {
  writeMockJSON()
})

writeMockJSON()

 

db.json

merge_mock_json.jsによって、users.jsonblogs.jsonを合体したJSONの保存先となるので、空で大丈夫。

 

package.json

{
  "name": "test_mock_api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "mockapi": "run-p create-mock run-mock",
    "create-mock": "node ./mockAPI/scripts/merge_mock_json.js",
    "run-mock": "json-server --watch ./mockAPI/db.json --port 3004"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "npm-run-all": "^4.1.5"
  }
}

scriptsの部分に

"mockapi": "run-p create-mock run-mock",
"create-mock": "node ./mockAPI/scripts/merge_mock_json.js",
"run-mock": "json-server --watch ./mockAPI/db.json --port 3004"

の3つのコマンドを追加しておく。create-mockでdb.jsonを生成、run-mockでjson-serverがlocalhost:3004で立ち上がる。mockapiはcreate-mockとrun-mockコマンドを同時に起動させる。

 

3, ターミナルでコマンド実行

yarn mockapi

 

コマンドを打つと、db.jsonが更新される。そして、そのjson構造体を元にlocalhost:3004でサーバーが立ち上がる。ブラウザで開くと、

 

localhost:3004

ブラウザ表示

このようにResourcesとしてusersとblogsが表示される。

 

localhost:3004/users

usersのブラウザ表示

 

localhost:3004/blogs

blogsのブラウザ表示

 

localhost:3004/users/1/blogs

ネストもできる

blogsの「userId」に反応して、ネストで特定のユーザーに紐づいたブログを取得することも可能。

 

しかもリソースはそれぞれREST APIになっており、postmanなどのツールでpostやput、deleteメソッドでリクエストを投げれば、 新規作成、更新、削除もできる。

 

herokuにデプロイ

json-server-herokuを使用してリモートにデプロイする。

1, 任意のディレクトリでクローン

git clone https://github.com/jesperorb/json-server-heroku.git

ディレクトリ構造

このようなファイル群がcloneされる。

 

2, db.jsonの編集

このdb.jsonに先ほど生成したdb.jsonの内容をコピペする。

 

3, herokuの設定

以下のリンクのままやっていくとデプロイ完了。

https://github.com/jesperorb/json-server-heroku#install-heroku

めっちゃラク。

 

参考

json-serverでエンドポイント毎にjsonファイルを分割する – Qiita

 

まとめ

reactやりたい。でもその前にラムダダイナモやりたい。何か作りたいサービス見つけたい。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA