unplugin-https-reverse-proxy
v1.0.0-beta.20
Published
[![NPM version](https://img.shields.io/npm/v/unplugin-https-reverse-proxy?color=a1b858&label=)](https://www.npmjs.com/package/unplugin-https-reverse-proxy)
Downloads
80
Maintainers
Readme
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.config.ts
import HttpsReverseProxy from 'unplugin-https-reverse-proxy/vite'
export default defineConfig({
plugins: [
HttpsReverseProxy({ /* options */ }),
],
})
Example: playground/
// 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.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.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.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.config.js
export default defineNuxtConfig({
modules: [
['unplugin-https-reverse-proxy/nuxt', { /* options */ }],
],
})
!important: You need to update the nuxt dev
script by adding --fork=false
to enable host restoration.
// package.json
{
"scripts": {
"dev": "nuxt dev --fork=false"
}
}
// 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.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.