webpack-dev-serverとjson-server

backbone.js の開発をするにあたって、CORS に引っかからないように API サーバーを用意する必要がありました。
webpack-dev-server の機能と json-server を組み合わせて、webpack 側から API を叩けるようにしてみます。

目次

参考

環境準備

今回は、実際にアプリを作成するディレクトリと、api にする json-server を稼働させるディレクトリを別に用意します。

json-server 用意

適当なディレクトリで以下の通り実行します。

1
2
3
4
5
6
7
npm init -y
npm install --save-dev json-server

# db.jsonとroutes.jsonを作成

# json-server開始
npx json-server --watch db.json  --routes routes.json

db.json と routes.json は次のようにしました。

db.json
1
2
3
4
5
6
7
{
  "memos": [
    { "id": 1, "text": "memo1" },
    { "id": 2, "text": "memo2" },
    { "id": 3, "text": "memo3" }
  ]
}
routes.json
1
2
3
{
  "/api/*": "/$1"
}

ブラウザで、http://localhost:3000/api/memosにアクセスすると、次のように表示されます。

http://localhost:3000/api/memos のレスポンス
1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
  {
    "id": 1,
    "text": "memo1"
  },
  {
    "id": 2,
    "text": "memo2"
  },
  {
    "id": 3,
    "text": "memo3"
  }
]
http://localhost:3000/api/memos/1 のレスポンス
1
2
3
4
{
  "id": 1,
  "text": "memo1"
}

簡単に API の動作が確認できます。
REST クライアントなど使えれば、データベースになっているdb.jsonの更新もできます。

webpack-dev-server 用意

API サーバーの変わりは作れたので、こちらにプロキシする環境を整えます。
後々、backbone.js の環境にする見込みで以下の package.json を用意しました。

package.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
{
  "name": "backbone-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "serve": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "backbone": "^1.4.0",
    "jquery": "^3.5.0",
    "underscore": "^1.10.2"
  }
}

webpack.config.jsは以下の様にしました。

webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
  mode: "development",
  // エントリーポイントの.jsファイル
  entry: `./src/index.js`,
  // ファイルの出力設定
  output: {
    // 出力ファイルのディレクトリ名
    path: `${__dirname}/dist`,
    // 出力ファイル名
    filename: "app.js",
  },
  //webpack-dev-server設定
  devServer: {
    contentBase: "dist",
    //open: true,
    proxy: {
      "/api": {
        target: "http://localhost:3000",
      },
    },
  },
  devtool: "inline-source-map",
};

ここまで用意できたら、任意のディレクトリで以下のコマンドを実行します。

1
2
3
4
5
6
7
8
9
# package.json と webpack.config.js は設置済み
npm install

mkdir dist
mkdir src

# src/index.js を作成　空でOK webpack-dev-serverのエラー回避のためにファイルは置いておく

npm run serve

json-server と、webpack-dev-server を開始します。

ポート 3000 番で json-server が起動し、ポート 8080 番で webpack-dev-server が起動しています。
ブラウザで、http://localhost:8080/api/memosにアクセスすると、次のように表示されます。

http://localhost:8080/api/memos のレスポンス
1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
  {
    "id": 1,
    "text": "memo1"
  },
  {
    "id": 2,
    "text": "memo2"
  },
  {
    "id": 3,
    "text": "memo3"
  }
]
http://localhost:8080/api/memos/1 のレスポンス
1
2
3
4
{
  "id": 1,
  "text": "memo1"
}

webpack-dev-server を介して、json-server にアクセスできました。

フロント開発する上で必要な、API へのアクセスをフロントの配信元のサーバーを介することで CORS を回避できました。
今回は、json-server を用いましたが、express でサーバーを立てることもできますね。
昔、Vue.js の開発していた時はどうやっていたのかは忘れてしまっていますが、今回ほどうまくなかった気がします。

ではでは。