webpack dev serverでのプロキシ設定方法

1. プロキシの設定方法: Webpack Dev Serverのプロキシを設定するには、webpack.config.jsファイルに以下のような設定を追加します。

module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        pathRewrite: { '^/api': '' },
        changeOrigin: true,
        secure: false,
      },
    },
  },
};

上記の設定では、ローカルの/apiパスへのリクエストはhttp://api.example.comにプロキシされます。pathRewriteオプションを使用することで、リクエストのパスを変更することもできます。

2. プロキシのコード例: 以下は、Webpack Dev Serverでのプロキシ設定のコード例です。

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
app.use(
  '/api',
  createProxyMiddleware({
    target: 'http://api.example.com',
    changeOrigin: true,
    secure: false,
  })
);
app.listen(3000, () => {
  console.log('Dev server is running on port 3000');
});

上記の例では、expressとhttp-proxy-middlewareパッケージを使用してプロキシを設定しています。/apiへのリクエストはhttp://api.example.comにプロキシされます。

以上がWebpack Dev Serverでのプロキシ設定方法とコード例です。これにより、開発中に別のサーバーへのリクエストを簡単に転送することができます。