helloskynet
EnvManage - 环境管理工具
EnvManage 是一款强大的环境管理工具，专为管理和代理多个开发环境而设计，特别适用于需要同时运行多个开发环境的场景。无论是小型项目还是大型企业级应用，EnvManage 都能极大地提升开发效率，简化环境管理流程。
graph LR
A[前置转发服务1<br>端口 3000] --> B[开发服务器（webpack等）<br>端口 8080]
C[前置转发服务2<br>端口 3001] --> B
B --> D[后置转发服务<br>端口 3099]
D --> E[API 服务器1]
D --> F[API 服务器2]🌟功能特性
动态环境管理
通过简单的配置文件
envm.config.js，您可以轻松定义和管理多个开发环境。在该文件中，您能灵活设置不同环境的名称、端口、目标服务器地址等关键信息，实现对各个开发环境的精准区分与高效管理。请求代理
支持前置和后置代理，确保请求准确无误地转发到指定的开发服务器。代理服务器会依据配置的目标服务器地址，将请求精准转发到对应的 API 服务器，保障数据交互顺畅。
配置文件热更新
无需繁琐的重启服务操作，
EnvManage支持配置文件热更新。当您对配置文件进行修改后，工具会自动检测并应用新的配置，显著提高开发效率，让您的开发过程更加流畅。多服务器管理
轻松实现同时启动和管理多个开发服务器，并通过管理页面查看代理服务运行状态，同时可灵活启动或停止某个环境对应的服务器。
🚀 快速上手
安装
npm i -D env-manage-plugin或者全局安装
npm i -g env-manage-plugin配置
在项目根目录下创建 envm.config.js 文件，根据实际需求定义开发环境和开发服务器列表。
可以使用
npx envm init命令快速初始化配置文件。
配置文件示例
// envm.config.js 支持CommonJS 和 ES Module
export default {
// 管理服务器运行的端口，可根据实际需求修改，确保该端口未被其他程序占用
port: 3099,
// 基础路径，用于构建管理API请求的前缀，如果与业务相关接口冲突可调整此配置
basePath: "/dev-manage-api",
// 环境的索引路径，可作为环境的首页路径或特定的入口路径，可以被 envList 中的覆盖
indexPage: "/Test",
// 是否开启 cookie 的代理
isEnableCookieProxy: true,
// 开发服务器列表
devServerList: [
{
// 为开发服务器命名，便于识别和管理，名称可自定义
// prima key
name: "your_dev_server_1",
// 该开发服务器对应的目标地址，即实际提供服务的地址
target: "http://localhost:5173",
},
// 可以添加更多开发服务器
],
envList: [
{
// 为开发环境命名，如开发环境、测试环境等，方便区分
// prima key
name: "your_env_1",
// 该环境对外暴露的端口，用于访问该环境下的应用
// prima key
port: 3000,
// 该环境请求转发的目标服务器地址，通常是后端 API 服务地址
target: "http://localhost:3010",
// 环境的索引路径，可作为该环境的首页路径或特定的入口路径
indexPage: "/Test",
// 是否开启 cookie 的代理
isEnableCookieProxy: true,
// 关联的开发服务器Name 未设置时 默认为第一个
devServerName: "your_dev_server_1",
// 路由规则函数，根据请求和环境信息，返回请求应转发到的目标地址
// 自定义 目标地址 可以覆盖 target 未提供时，使用target
router: (req, env) => {
return env.target;
},
},
// 可以添加更多环境
],
};router 配置同 http-proxy-middleware 的 router 选项，不过不支持对象形式，函数会额外传递第二个参数，代表当前envItem
envList
envList 的主键组合为 name 和 port 。若数据完全相同，则后一条数据会被忽略。对于 port 相同的情况，系统会自动进行互斥处理，即启动其中一个后，再尝试启动其他相同 port 的实例时，系统会自动关闭已启动的实例，避免冲突。
devServerList
devServerList 的主键为 name，相同则忽略后一个。
开发服务器配置
调整开发服务器，将需要代理到 API 服务器的请求，转发到 后置代理服务器。
webpack-dev-server
// webpack.config.js
module.exports = {
devServer: {
proxy: {
"/two": "http://localhost:3099",
},
},
};vite
// vite.config.js
import { defineConfig } from "vite";
// https://vite.dev/config/
export default defineConfig({
server: {
proxy: {
"/dev-manage-api": {
target: "http://localhost:3099",
changeOrigin: true,
},
"/simple": {
target: "http://localhost:3099",
changeOrigin: true,
},
"/two": {
target: "http://localhost:3099",
changeOrigin: true,
},
},
},
});独立启动
运行以下命令启动管理服务器：
npx envm或者通过命令行参数指定配置文件路径：
npx envm --config ./path/to/envm.config.js未指定 config 时，默认搜索当前文件夹下的
envm.config.[m]js
访问管理页面 http://localhost:3099/ 对各个代理服务进行管理。
作为插件启动
env-manage-plugin 使用 Unplugin 为各种构建工具提供统一插件，作为插件启动。
webpack
// webpack.config.js
import { envmWebpackPlugin } from "env-manage-plugin";
export default {
plugins: [
envmWebpackPlugin({
config: "./envm.config.mjs",
}),
],
// .... 其它配置
};vite
// vite.config.js
import { defineConfig } from "vite";
import { envmVitePlugin } from "env-manage-plugin";
// https://vite.dev/config/
export default defineConfig({
plugins: [envmVitePlugin()],
// ... 其它配置
});支持工具 vite,rollup,rolldown,webpack,rspack,esbuild,farm
配置文件热更新
如果需要修改环境配置，直接修改 envm.config.js 文件，工具支持热更新，修改后无需重启服务即可生效。
Cookie 代理
由于 Cookie 在同主机的不同端口会进行共享，从而导致不同环境的登录失效，故支持 Cookie 代理功能。
例如： 在 localhost:3001 端口登录 环境A，然后在 localhost:3002 登录 环境B；第二次登录的 set-cookie 操作，会覆盖 环境A 的登录操作设置的 Cookie。导致 3001 端口对 环境A 的登录失效。故设置此功能，将不同端口的登录 Cookie 分开存储，并在请求时替换成对应环境的 Cookie。
其它：
- 通过配置项
isEnableCookieProxy可以控制此功能的是否开启，默认开启； - 通过管理页面的
清除所有代理 Cookie按钮可以清除所有保存的代理Cookie。
依赖
express: Web 框架，用于创建和管理服务器。http-proxy-middleware: 用于创建代理中间件，转发请求到目标服务器。chokidar: 用于监听配置文件的变化，实现热更新。commander: 用于解析命令行参数。
许可证
本项目采用 MIT 许可证。详情请参阅 LICENSE 文件。
贡献
欢迎提交 Issue 和 Pull Request。请在提交之前阅读 贡献指南。
作者
感谢使用 EnvManage！如果你有任何问题或建议，请随时联系我们。