More than 3 years have passed since last update.

webpack-dev-server でモックAPI用のサーバーを構築してみた

Posted at 2020-12-30

初投稿です。
仕事の関係でモックサーバーを構築したので、今後のために詰まったところややり方を整理しておきたいと思います。
ちなみに、今回作成したコードはgitにあげています。
https://github.com/TakeUCom/mock-server

構築手順

webpack-dev-serverを動かすベースを構築する

npm init 等を使用して、1から構築することも可能かとは思うのですが、
簡単に構築するために、vueの環境構築を利用しました。

vue crate

環境を構築することが主なので、その後のオプションは特に制限はないです。

必要なライブラリをインストールする

webpack-dev-serverを使用する上で必要なライブラリをインストールします。

npm i --save-dev webpack webpack-cli webpack-dev-server

最近、webpack-dev-serverの起動方法が変わったらしく、以下のコマンドで対応すれば、うまく起動します。
起動をしやすくするために、package.jsonにコマンドを登録しておくことがおすすめです。

./node_modules/.bin/webpack serve

※ なお、このまま起動すると、以下のエラーが生じます。
これは、entryポイントのデフォルト設定である index.jsが存在していないことが要因であるので、　./srcに index.js を追加すれば、エラーは解消されます。

ERROR in main
Module not found: Error: Can't resolve './src' in '/xxxxxxx'

APIの追加

以下のようにwebpack.config.js を作成することによって、apiを追加することができます。

module.exports = {
    devServer: {
        before: function (app, server) {
            app.get('/path', function (req, res) {
                res.json({ response: 'sample' });
            });
        }
    }
};

補足

以下、実用性を考えて追加した機能や詰まったところの工夫となります。

複数のAPIを追加できるようにする

複数のAPIを扱うため、その度にjsファイルをいじるの面倒なので、別ファイルを追加、修正するだけで対応できるようにしました。

webpack.config.js


module.exports = {
    devServer: {
        before: function (app, server) {

            // ./mock-data/api.jsonファイルにapi定義を追加し、responseを別ファイルに定義することでモック化するAPIを追加できるように修正
            const apis = require('./mock-data/api.json');
            
            for(const api of apis) {
                const path = api.path;
                const method = api.method;
                const data = require('./mock-data/json/' + api.file);
                console.log('add mocked api. path: ' + path + '. method: ');
                switch(method) {
                    case 'GET' :
                        app.get(path, function (req, res) {
                            res.json(data);
                        });
                    // ...他メソッド(POST等)に対応させたい場合、ここに追加
                }
            }

        }
    }
};

api.json

[
    {
        "name" : "サンプル用",
        "path" : "/sample1",
        "method":"GET",
        "file" : "sample1.json"
    }
]

sample1.json

{
    "response": "sample1"
}

portの変更

webpack.config.js にて、設定することで、portを変更することが可能です。