unplugin-https-reverse-proxy v1.0.0-beta.18
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.
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago