zukucode
主にWEB関連の情報を技術メモとして発信しています。

webpack-dev-serverからASP.NETの開発サーバーにアクセスする

webpack-dev-serverからASP.NETの開発サーバーにアクセスする方法を紹介します。

クライアントの開発サーバー(webpack-dev-server)はHot Module Replacement(hmr)が有効になっているため、開発時はクライアントの開発サーバーをメインで使用したいことが多いです。

クライアントの開発サーバーからASP.NETの開発サーバーにアクセスするには以下のようにwebpack-dev-serverの設定でproxyを設定します。

URLはASP.NETで起動する開発サーバーのURLを設定します。

これにより、すべてのリクエストはASP.NETの開発サーバーを見に行くようになります。

webpack.config.js
devServer: {
  proxy: {
      '/': {
        target: 'https://localhost:5001',
      },
  },
},

vue-cliの場合

vue-cliを使用している場合はvue.config.jsに以下を追記します。(vue.config.jsのファイルがない場合は作成してください)

vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/': {
        target: 'https://localhost:5001',
      },
    },
  },
};

関連記事