ViteでDevサーバーのProxyオプションを高度に操作する方法

            //...

export interface ProxyOptions extends HttpProxy.ServerOptions {
  /**
   * rewrite path
   */
  rewrite?: (path: string) => string
  /**
   * configure the proxy server (e.g. listen to events)
   */
  configure?: (proxy: HttpProxy.Server, options: ProxyOptions) => void
  /**
   * webpack-dev-server style bypass function
   */
  bypass?: (
    req: http.IncomingMessage,
    /** undefined for WebSocket upgrade requests */
    res: http.ServerResponse | undefined,
    options: ProxyOptions,
  ) => void | null | undefined | false | string
  /**
   * rewrite the Origin header of a WebSocket request to match the target
   *
   * **Exercise caution as rewriting the Origin can leave the proxying open to [CSRF attacks](https://owasp.org/www-community/attacks/csrf).**
   */
  rewriteWsOrigin?: boolean | undefined
}

        

            //...

// Listen for the `error` event on `proxy`.
proxy.on('error', function (err, req, res) {
    res.writeHead(500, {
      'Content-Type': 'text/plain'
    });
    res.end('Something went wrong. And we are reporting a custom error message.');
});


// Listen for the `proxyRes` event on `proxy`.
proxy.on('proxyRes', function (proxyRes, req, res) {
    console.log('RAW Response from the target', JSON.stringify(proxyRes.headers, true, 2));
});

// Listen for the `open` event on `proxy`.
proxy.on('open', function (proxySocket) {
    // listen for messages coming FROM the target here
    proxySocket.on('data', hybiParseAndLogMessage);
});

// Listen for the `close` event on `proxy`.
proxy.on('close', function (res, socket, head) {
    // view disconnected websocket connections
    console.log('Client disconnected');
});

        

            import { defineConfig } from 'vite';

//...

export default defineConfig({
    //...
    server: {
        proxy: {
            '^/s3/.*': {
                changeOrigin: true,
                configure: (proxy, options) => {
                    //👇プロキシサーバーへイベントリスナー追加
                    proxy.on('proxyRes', (proxyRes, req, res) => {
                        console.log('RAW Response from the target:', JSON.stringify(proxyRes.headers));
                    });
                    //👇rewriteメソッドを再定義
                    options.rewrite = (path) => {
                        const _match = path.match(/^\/s3\/(.+)\/(.+)\/.*/m);
                        let _region = '', _bucket = '';
                        if (_match) {
                            _region = _match[1]??'';
                            _bucket = _match[2]??'';
                        }
                        //👇アクセス先となるターゲット自体を書き換え
                        options.target = `https://${_bucket}.s3.${_region}.amazonaws.com`;
                        return path.replace(`/s3/${_region}/${_bucket}`, '')
                    }
                }
            }
        }
    },
    //...
})

        

            import { defineConfig } from 'vite';

//...

export default defineConfig({
    //...
    server: {
        proxy: {
            '^/s3/.*': {
                changeOrigin: true,
                bypass: (req, res, proxyOptions) => {
                    const _match = req.url.match(/^\/s3\/(.+)\/(.+)\/.*/m);
                    let _region = '', _bucket = '';
                    if (_match) {
                        _region = _match[1]??'';
                        _bucket = _match[2]??'';
                    }
                    proxyOptions.target = req.headers['host'] = `https://${_bucket}.s3.${_region}.amazonaws.com`;
                    req.headers['date'] = (new Date()).toUTCString();
                }
            }
        }
    },
    //...
})