投稿日：
2019年6月14日
最終更新日：
【簡単オススメMockAPI】Mockoonを使って爆速でMacやWindowsマシンのローカル環境にStubサーバーを作ってみよう【Node.js】
YouTubeも見てね♪
Anker PowerCor
旅行には必須の大容量モバイルバッテリー！
【最新機種】GoPro hero11 Black
最新機種でVlogの思い出を撮影しよう！
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
モンスターエナジー 355ml×24本 [エナジードリンク]
脳を活性化させるにはこれ！
Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK
メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！
サンディスク microSD 128GB
スマホからSwitchまで使える大容量MicroSDカード！
目次
爆速でMockサーバーを構築しよう
簡単なStubを用意したいだけなのに・・・
技術調査や初期開発フェーズでは、自由にリクエストを投げれるサーバーが存在しない事が多く、そのためにMockサーバーを用意するという事は少なく無いと思います。
しかし、そのためにサーバーを借りたり、Mockサーバー構築のためのプログラムを構築したりと、やりたい事に対する作業ボリュームが多いですよね。orz
そんな時は、今回紹介するMockoonを使って爆速でローカルマシンにMockサーバーを構築しちゃいましょう！
Mockoon
What’s?
Mockoonとは、GUIベースのモックサーバーを構築するためのアプリケーションとなっています。
Mock API in secondsMockoon is the easiest and quickest way to run mock APIs locally.
No remote deployment, no account required, open source.Mock API in seconds – Mockoon
要約すると、「Mockoonを使えばMockAPIをローカルで構築する事が出来るよ！」との事です！
すごい自信ですね！！！笑
しかし、実際にそのくらい簡単爆速でローカルにMockAPIを構築する事が出来たので、あながち間違いでは無いですね。
また、内部的にはNode.jsを使ってElectronで作成しているようですね。
サーバーは同じくNode.jsのExpressです。
また、ネーミングはRaccoon(たぬき)から来ているようです。
意味は特になさそうなのであくまで語感で名前をつけた感じですかね？ロゴもたぬきの顔っぽくて可愛い！笑
GUIなので分かりやすい
GUIアプリケーションからサーバーを立てたりエンドポイントを追加編集出来るので、とても直感的で簡単です。
小難しいところはアプリケーション内部がよしなにやってくれるので、簡単に導入出来てしまうところが便利ですよね♪
また、GUIのため作成したエンドポイントの一覧や詳細がとても見やすくなっています。
HttpMethodやHttpStatusも選択式なのでポチポチで設定変更出来ちゃうのも楽ですよね♪
ホットリロード機能
モックサーバーを起動した状態でレスポンスを編集すると、再起動すること無く変更が反映されます。
再起動する手間がないのはとても便利ですよね♪
ただ、エンドポイントを変える場合はリロードが必須なので注意です。
手順
インストール
Homebrew
定番のHomebrewからのインストールにも対応しています。
|
1
2
3
4
5
6
7
8
|
==> Satisfying dependencies
==> Downloading https://github.com/mockoon/mockoon/releases/download/v1.4.0/mockoon.setup.1.4.0.dmg
==> Downloading from https://github-production-release-asset-2e65be.s3.amazonaws.com/97478419/b3611c00-765e-11e9-9c45-264f028d28b3?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20190702%2Fus-east-1%2Fs3%2Faws4_r
######################################################################## 100.0%
==> Verifying SHA-256 checksum for Cask 'mockoon'.
==> Installing Cask mockoon
==> Moving App 'Mockoon.app' to '/Applications/Mockoon.app'.
🍺 mockoon was successfully installed!
|
インストーラー
Homebrewが使えない場合は、公式サイト からOSに合わせたインストーラーをダウンロードしましょう。
ダウンロードしたインストーラーを実行する事で設定等をする必要なくインストールは完了します。
起動
インストールが完了したらアプリケーションを起動してみましょう。
小難しい初期設定等もなくアプリケーションが起動したと思います。
サーバー起動
では、試しにMockサーバーを起動してみましょう。緑の実行ボタンをクリックする事でサーバーが起動します。
この状態でリクエストを投げてみましょう。
デフォルトではportが3000で/anserが有効になっています。
|
1
2
3
4
5
6
7
8
9
|
< HTTP/1.1 200 OK
< X-Powered-By: Express
< Content-Type: text/plain; charset=utf-8
< Content-Length: 0
< ETag: W/"0-2jmj7l5rSw0yVb/vlWAYkK/YBwk"
< Date: Wed, 12 Jun 2019 09:00:17 GMT
< Connection: keep-alive
<
* Connection #0 to host localhost left intact
|
はい、爆速で完成です。
機能紹介
動的なレスポンスを生成可能
Stubサーバーの場合、基本的にはある程度固定のレスポンスしか返せないのが普通ですが、Mockoonであればある程度動的なレスポンスを返却する仕組みが備わっています。
具体的には、リクエストの情報をレスポンスに含めたり簡単なケース文を指定出来るのでリクエスト/レスポンスのリアルに近い動きが見えやすくなるというメリットがあります。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
{
"userId": "{{ urlParam 'id'}}",
"name": "{{ queryParam 'name' 'John' }}",
"lang": "{{{header 'Accept-Language' 'en'}}}",
"elementTitle": "{{ body 'elements.0.title' 'default' }}",
"ip": "{{ ip }}",
"method": "{{ method }}",
"hostname": "{{ hostname }}",
"friends": [
{{#repeat 2}}
{
"id": {{@index}},
"name": "{{ firstName }} {{ lastName }}"
}
{{/ repeat}}
],
"oneItem": "{{ oneOf(array 'item1' 'item2' 'item3') }}",
"someItems": "{{ someOf(array 'item1' 'item2' 'item3') 1 2 }}",
"userName":
{{#switch (urlParam 'id')}}
{{#case "1"}}"John"{{/case}}
{{#case "2"}}"Jack"{{/case}}
{{#default}}"Peter"{{/default }}
{{/switch}}
}
|
もちろん複雑な動的レスポンスの生成は厳しそうですが、これだけでも十分Stubサーバーとしては便利な機能となっています。
レスポンスヘッダーもカスタム可能
モックAPIのレスポンスヘッダーも簡単にカスタム可能です。
|
1
2
3
4
5
6
7
8
|
< HTTP/1.1 200 OK
< X-Powered-By: Express
< Content-Type: application/json; charset=utf-8
< HOGE: FUGA # 追加されている
< Content-Length: 121
< ETag: W/"79-NunjB3DzdDmDDPMzc1O3Wx2nv10"
< Date: Fri, 14 Jun 2019 13:06:34 GMT
< Connection: keep-alive
|
レスポンスヘッダーにMockoonで定義した項目が追加されていますね♪
設定ファイル管理が可能
このMockoonの設定については、設定ファイルでの管理が可能です。
export
現在の設定をすべて出力する場合はTools > Export all environmentsでファイル出力可能です。
これでJsonファイルが生成されます。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
{
"id": "mockoon_export",
"appVersion": "1.4.0",
"checksum": "7f2a84418b3d15e583fd9925a5f7830a",
"subject": "full",
"data": [
{
"uuid": "d6fb1690-8cf0-11e9-8ffc-611e08794da7",
"name": "LocalMock",
"endpointPrefix": "",
"latency": 0,
"port": 3001,
"routes": [
{
"uuid": "",
"documentation": "",
"method": "get",
"endpoint": "accounts",
"body": "{\n \"accounts\": [\n {\n \"id\": 1001,\n \"name\" : \"Taro\",\n \"age\": 20\n },{\n \"id\": 1002,\n \"name\" : \"Jiro\",\n \"age\": 19\n },{\n \"id\": 1003,\n \"name\" : \"Hanako\",\n \"age\": 18\n }\n ]\n}",
"latency": 0,
"statusCode": "200",
"headers": [
{
"key": "HOGE",
"value": "FUGA"
}
],
"filePath": "",
"sendFileAsBody": false
},
{
"uuid": "7f4942c0-8cf3-11e9-8ffc-611e08794da7",
"documentation": "",
"method": "get",
"endpoint": "blogs",
"body": "{\n \"blogs\": [\n {\n \"id\": 2001,\n \"title\" : \"爆速\",\n \"author\": \"Taro\"\n },{\n \"id\": 2002,\n \"name\" : \"モック\",\n \"author\": \"Jiro\"\n },{\n \"id\": 2003,\n \"name\" : \"サーバー\",\n \"author\": \"Hanako\"\n }\n ]\n}",
"latency": 0,
"statusCode": "200",
"headers": [
{
"key": "",
"value": ""
}
],
"filePath": "",
"sendFileAsBody": false
}
],
"proxyMode": false,
"proxyHost": "",
"https": false,
"cors": true,
"headers": [
{
"key": "Content-Type",
"value": "application/json"
}
]
}
]
}
|
import
では、exportした設定ファイルをTools > Import all environments fro fileから読み込んでみましょう。
これで正常に同じ設定のモックが再現されると思います。
設定をjsonファイルで管理出来るのでGitなどで管理すれば、開発者間で同じ設定でMockを取り扱えるので開発がスムーズになりますね♪
アクセスログが出力される
Mockoonで立てたサーバーにリクエストが走ると、リクエストヘッダーなどの情報がログとして蓄積されていきます。
何も設定せずにリクエストログを確認出来るのはかなり便利だと思います！
終わりに
以上のように、爆速でMockサーバーを用意することが出来ました。
技術調査や勉強、初期開発フェーズにて毎回Mockサーバーの構築に手間がかかっている場合は是非試してみてはいかがでしょうか♪