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

投稿日:

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

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

 

目次

 

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のインストール(グローバル)

 

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

 

npm初期化

package.jsonが作成される。

 

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

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

 

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

ディレクトリ構造

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

 

2, ファイル中身の編集

mockAPI/api/users.json

 

mockAPI/api/blogs.json

 

mockAPI/scripts/merge_mock_json.js

 

db.json

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

 

package.json

scriptsの部分に

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

 

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

 

コマンドを打つと、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, 任意のディレクトリでクローン

ディレクトリ構造

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

 

2, db.jsonの編集

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

 

3, herokuの設定

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

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

めっちゃラク。

 

参考

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

 

まとめ

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

-プログラミング学習
-,

Copyright© s u p ? , 2020 All Rights Reserved.