JSON Server試してみた。 - もがき系プログラマの日常

参考サイト

コードを書かずにJSONを出力するAPIモックを構築できるJSON Serverを試してみた

概要

こんにちは。Twitterをチラチラ見ていた時に、参考サイトの記事を拝見して、これは面白そうだなと思い、自分も試してみました。

json_serverの設定

下準備

# 作業ディレクトリ作成 & 移動
$ mkdir json_server_test
$ cd json_server_test

# インストールコマンド
$ npm install json-server

# jsonファイル保存場所を作成 & 移動
$ mkdir public

# API用jsonファイルを作成
$ touch public/test.json

test.jsonを記述

{
  "users": [
    {"id": 1, "name": "test1"},
    {"id": 2, "name": "test2"},
    {"id": 3, "name": "test3"}
  ]
}

json_server実行

$ ./node_modules/.bin/json-server public/test.json 
  \{^_^}/ hi!

  Loading public/test.json
  Done

  Resources
  http://localhost:3000/users

  Home
  http://localhost:3000

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

何やら実行しています。

http://localhost:3000/users へアクセスしてみます。

f:id:kojirooooocks:20180204025445p:plain

ちゃんと狙ったjsonが帰ってきてます。

ターミナルを見ると

GET /users/ 200 5.170 ms - 128

追加されてました。

ちなみに今回のjsonでいうと、id3番の要素だけを返すようにアクセスすることも出来ます。

http://localhost:3000/users/3 へアクセスしてみます。

f:id:kojirooooocks:20180204025456p:plain

すばらしい！

中々使えそうです。

ngrokと連携

PCから接続するにはこれで問題ないんですが、端末チェックを行いたいときは、localhostではアクセスできません。

なので、ngrokで外部アクセスを許可します。

ngrokのインストールはコチラの記事に詳しく書いていましたので、未インストールの場合は確認してください。

json_serverはデフォルトでポート3000番で起動するので、3000番ポートを指定してngrokを起動します。

$ cd json_server_test/public
$ ngrok http 3000
ngrok by @inconshreveable                                                                                                                                                                                                                                                                                     (Ctrl+C to quit)
                                                                                                                                                                                                                                                                                                                              
Session Status                online                                                                                                                                                                                                                                                                                          
Account                       アカウント名                                                                                                                                                                                                                                                                    
Version                       2.2.8                                                                                                                                                                                                                                                                                           
Region                        United States (us)                                                                                                                                                                                                                                                                              
Web Interface                 http://127.0.0.1:4040                                                                                                                                                                                                                                                                           
Forwarding                    http://7cf0f7c7.ngrok.io -> localhost:3000                                                                                                                                                                                                                                                      
Forwarding                    https://7cf0f7c7.ngrok.io -> localhost:3000                                                                                                                                                                                                                                                     
                                                                                                                                                                                                                                                                                                                              
Connections                   ttl     opn     rt1     rt5     p50     p90                                                                                                                                                                                                                                                     
                              0       0       0.00    0.00    0.00    0.00

Forwarding に表示されている http://7cf0f7c7.ngrok.io に端末からアクセスしてみましょう。

test.jsonの中身が表示されるはずです。

個人での開発であればこれで全く問題ないですね！