投稿日： 2019年6月14日
最終更新日： 2023年3月28日

【簡単オススメMockAPI】Mockoonを使って爆速でMacやWindowsマシンのローカル環境にStubサーバーを作ってみよう【Node.js】

YouTubeも見てね♪

【最新機種】GoPro hero11 Black

【日本国内正規品】 GoPro hero11 Black

created by Rinker

GoPro(ゴープロ)

¥62,000 (2024/04/03 21:42:08時点 Amazon調べ-詳細)

最新機種でVlogの思い出を撮影しよう！

[ノースフェイス] THE NORTH FACE メンズアウターマウンテンライトジャケット

created by Rinker

THE NORTH FACE(ザノースフェイス)

¥33,430 (2024/04/03 21:42:09時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です！

ペヤングソースやきそば 120g×18個

created by Rinker

ペヤング

¥2,600 (2024/04/03 21:42:16時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし！

レッドブルエナジードリンク 250ml×24本

created by Rinker

Red Bull(レッドブル)

¥4,000 (2024/04/03 21:42:12時点 Amazon調べ-詳細)

翼を授けよう！

ドラゴンクエストメタリックモンスターズギャラリーメタルキング

created by Rinker

スクウェア・エニックス(SQUARE ENIX)

¥3,250 (2024/04/03 21:42:09時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう！

BANDAI SPIRITS ULTIMAGEAR 遊戯王千年パズル 1/1スケール

created by Rinker

BANDAI SPIRITS(バンダイスピリッツ)

¥7,500 (2024/04/03 21:42:14時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ！！

MOFT X 【新型ミニマム版】 iPhone対応スマホスタンド

created by Rinker

MOFT

¥2,880 (2024/04/03 21:42:18時点 Amazon調べ-詳細)

Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！

爆速でMockサーバーを構築しよう

簡単なStubを用意したいだけなのに・・・

技術調査や初期開発フェーズでは、自由にリクエストを投げれるサーバーが存在しない事が多く、そのためにMockサーバーを用意するという事は少なく無いと思います。

しかし、そのためにサーバーを借りたり、Mockサーバー構築のためのプログラムを構築したりと、やりたい事に対する作業ボリュームが多いですよね。orz

そんな時は、今回紹介するMockoonを使って爆速でローカルマシンにMockサーバーを構築しちゃいましょう！

Mockoon

What’s?

Mockoonとは、GUIベースのモックサーバーを構築するためのアプリケーションとなっています。

Mock API in seconds

Mockoon 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からのインストールにも対応しています。

==> 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!

==> 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が有効になっています。

< 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

< 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であればある程度動的なレスポンスを返却する仕組みが備わっています。

具体的には、リクエストの情報をレスポンスに含めたり簡単なケース文を指定出来るのでリクエスト/レスポンスのリアルに近い動きが見えやすくなるというメリットがあります。

{
   "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}}
}

{

"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": [

{

"id": {{@index}},

"name": "{{ firstName }} {{ lastName }}"

}

"oneItem": "{{ oneOf(array 'item1' 'item2' 'item3') }}",

"someItems": "{{ someOf(array 'item1' 'item2' 'item3') 1 2 }}",

"userName":

{{#case "1"}}"John"{{/case}}

{{#case "2"}}"Jack"{{/case}}

{{#default}}"Peter"{{/default }}

}

もちろん複雑な動的レスポンスの生成は厳しそうですが、これだけでも十分Stubサーバーとしては便利な機能となっています。

レスポンスヘッダーもカスタム可能

モックAPIのレスポンスヘッダーも簡単にカスタム可能です。

< 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

< 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ファイルが生成されます。

{
    "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"
                }
            ]
        }
    ]
}

{

"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": "",