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

初投稿です。
仕事の関係でモックサーバーを構築したので、今後のために詰まったところややり方を整理しておきたいと思います。
ちなみに、今回作成したコードは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を追加することができます。

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

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

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


```javascript: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等)に対応させたい場合、ここに追加
                }
            }

        }
    }
};
```

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

```json:sample1.json
{
    "response": "sample1"
}
```

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

```javascript:webpack.config.js
module.exports = {
    devServer: {
        port: 9000, // ここでportを指定
        before: function (app, server) {

            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);
                        });
                }
            }

        }
    }
};
```

参考サイト：
https://blog.hysakhr.com/2020/03/29/webpack-dev-server%E3%81%A7api%E3%82%92mock%E5%8C%96%E3%81%99%E3%82%8B/
https://webpack.js.org/configuration/dev-server/