zcf0508/unplugin-https-reverse-proxy

👻 Add a reverse proxy for your dev service, support `https`.

unplugin-https-reverse-proxy

A plugin for https reverse proxy, support vite、webpack and rspack.

Install

Support set caddy file path by environment variable UHRP_CADDY_PATH, default is system cache folder.

#.env.local
UHRP_CADDY_PATH=~/tmp/.uhrp

# not auto install caddy when postinstall
npm i unplugin-https-reverse-proxy --save-dev

# auto install
UHRP_AUTO_INSTALL_CADDY=true npm i unplugin-https-reverse-proxy --save-dev

interface Options {
  /** default: true */
  enable?: boolean
  /** target hostname */
  target: string
  /** default: false */
  showCaddyLog?: boolean
  /** default: false */
  https?: boolean
}

Vite

// vite.config.ts
import HttpsReverseProxy from 'unplugin-https-reverse-proxy/vite'

export default defineConfig({
  plugins: [
    HttpsReverseProxy({ /* options */ }),
  ],
})

Example: playground/

Webpack 5

// webpack.config.js

/** @type {Parameters<import('unplugin-https-reverse-proxy/webpack')['default']>[0]} */
const reverseProxyOptions = {
  enable: false,
  target: 'xxx',
  https: false,
}

module.exports = {
  /* ... */
  devServer: {
    client: {
      // ↓ for HMR
      webSocketURL: {
        ...(reverseProxyOptions.enable
          ? {
              hostname: reverseProxyOptions.target,
            }
          : {}),
        ...(reverseProxyOptions.enable && reverseProxyOptions.https
          ? {
              protocol: 'wss',
              port: 443,
            }
          : {})
      }
    },
    setupExitSignals: true,
    allowedHosts: 'all',
  },
  plugins: [
    require('unplugin-https-reverse-proxy/webpack')(reverseProxyOptions)
  ]
}

Webpack 4

// webpack.config.js

/** @type {Parameters<import('unplugin-https-reverse-proxy/webpack')['default']>[0]} */
const reverseProxyOptions = {
  enable: false,
  target: 'xxx',
  // https: false, // not support yet
}

module.exports = {
  /* ... */
  devServer: {
    host: '0.0.0.0',
    disableHostCheck: true,
  },
  plugins: [
    require('unplugin-https-reverse-proxy/webpack')(reverseProxyOptions)
  ]
}

Rspack

// rspack.config.js

/** @type {Parameters<import('unplugin-https-reverse-proxy/webpack')['default']>[0]} */
const reverseProxyOptions = {
  enable: false,
  target: 'xxx',
  https: false,
}

module.exports = {
  /* ... */
  devServer: {
    client: {
      // ↓ for HMR
      webSocketURL: {
        ...(reverseProxyOptions.enable
          ? {
              hostname: reverseProxyOptions.target,
            }
          : {}),
        ...(reverseProxyOptions.enable && reverseProxyOptions.https
          ? {
              protocol: 'wss',
              port: 443,
            }
          : {})
      }
    },
  },
  plugins: [
    require('unplugin-https-reverse-proxy/rspack')(reverseProxyOptions)
  ]
}

Rsbuild

// rsbuild.config.js

/** @type {Parameters<import('unplugin-https-reverse-proxy/webpack')['default']>[0]} */
const reverseProxyOptions = {
  enable: false,
  target: 'xxx',
  https: false,
}

module.exports = {
  /* ... */
  dev: {
    client: {
      // ↓ for HMR
      ...(reverseProxyOptions.enable
        ? {
            host: reverseProxyOptions.target,
          }
        : {}),
      ...(reverseProxyOptions.enable && reverseProxyOptions.https
        ? {
            protocol: 'wss',
            port: '443',
          }
        : {})
    },
  },
  tools: {
    rspack: {
      plugins: [
        require('unplugin-https-reverse-proxy/rspack')(reverseProxyOptions)
      ]
    },
  },
}

Nuxt

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    ['unplugin-https-reverse-proxy/nuxt', { /* options */ }],
  ],
})

This module works for both Nuxt 2 and Nuxt Vite

Vue CLI 5

// vue.config.js

/** @type {Parameters<import('unplugin-https-reverse-proxy/webpack')['default']>[0]} */
const reverseProxyOptions = {
  enable: false,
  target: 'xxx',
  https: false,
}

module.exports = {
  devServer: {
    client: {
      // ↓ for HMR
      webSocketURL: {
        ...(reverseProxyOptions.enable
          ? {
              hostname: reverseProxyOptions.target,
            }
          : {}),
        ...(reverseProxyOptions.enable && reverseProxyOptions.https
          ? {
              protocol: 'wss',
              port: 443,
            }
          : {})
      }
    },
    setupExitSignals: true,
    allowedHosts: 'all',
  },
  configureWebpack: {
    plugins: [
      require('unplugin-https-reverse-proxy/webpack')(reverseProxyOptions),
    ],
  },
}

Vue CLI 4

// vue.config.js

/** @type {Parameters<import('unplugin-https-reverse-proxy/webpack')['default']>[0]} */
const reverseProxyOptions = {
  enable: false,
  target: 'xxx',
  // https: false, // not support yet
}

module.exports = {
  devServer: {
    host: '0.0.0.0',
    disableHostCheck: true,
  },
  configureWebpack: {
    plugins: [
      require('unplugin-https-reverse-proxy/webpack')(reverseProxyOptions),
    ],
  },
}

Usage

# macOS
sudo -E npm run dev # your dev script
#    ^ `-E` is important

# windows
# use powershell as administrator
npm run dev # your dev script

If your broswer shows a not trusted certificate warning, please check the keychain.

More info, you can check caddy about CA Root.