cnbugs
d80d33e6f6
系统服务: NTP, DHCP, BIND, NFS, SAMBA, RSYNC, Sersync, vsftpd, Subversion 数据库中间件: Mycat CI/CD: GitLab, Jenkins 高可用: Keepalived, HAProxy, LVS 新增 4 个分类: 系统服务、数据库中间件、CI/CD、高可用
288 lines
13 KiB
Markdown
288 lines
13 KiB
Markdown
# ⚙️ ConfTemplate — 云原生配置文件生成器
|
||
|
||
> 一站式可视化生成 NGINX、Redis、MySQL、Kubernetes 等主流中间件的标准配置文件，告别手写配置的语法烦恼。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
## 📸 界面预览
|
||
|
||
三栏布局：**左侧边栏导航** → **中间表单配置** → **右侧代码预览**
|
||
|
||
- 侧边栏支持搜索过滤，快速定位目标中间件
|
||
- 表单支持下拉框、输入框、开关、数字输入等多种组件
|
||
- 代码预览基于 Monaco Editor（VS Code 内核），支持语法高亮
|
||
- 一键复制、一键下载、一键重置
|
||
|
||
---
|
||
|
||
## ✨ 核心特性
|
||
|
||
| 特性 | 说明 |
|
||
|------|------|
|
||
| 🔍 搜索过滤 | 侧边栏支持关键字搜索，输入 `k8s` 即可过滤出 Kubernetes 相关模板 |
|
||
| 📋 动态表单 | 基于 JSON Schema 驱动，自动渲染专属配置表单 |
|
||
| 🔗 联动逻辑 | 选项变更时动态展示/隐藏关联参数（如开启 HTTPS 后显示证书路径） |
|
||
| 💡 最佳实践预设 | 所有参数内置生产环境推荐默认值 |
|
||
| 📝 实时预览 | 表单修改即时反映到右侧代码，Monaco Editor 专业语法高亮 |
|
||
| 📋 一键复制 | 生成的配置一键复制到系统剪贴板 |
|
||
| 💾 一键下载 | 直接保存为 `.conf` / `.cnf` / `.yaml` 本地文件 |
|
||
| 🔄 一键重置 | 快速恢复当前组件的默认模板状态 |
|
||
| 💾 状态持久化 | 表单数据自动保存到 localStorage，刷新页面不丢失 |
|
||
| 🚫 零后端 | 纯前端静态页面，无需 API、无需数据库、无需登录 |
|
||
|
||
---
|
||
|
||
## 🧩 支持组件（59 个）
|
||
|
||
| 分类 | 组件 | 输出格式 | 核心配置项 |
|
||
|------|------|----------|------------|
|
||
| 代理与 Web | **NGINX** | `.conf` | HTTP/HTTPS 端口、域名、SSL 证书、反向代理、Gzip、CORS |
|
||
| 代理与 Web | **Apache** | `.conf` | MPM 模型(event/worker/prefork)、SSL、反向代理、模块管理 |
|
||
| 代理与 Web | **Tomcat** | `.xml` | 连接器、线程池、AJP、SSL、JVM 内存、GC 策略 |
|
||
| 缓存 | **Redis** | `.conf` | 单机/哨兵/集群模式、端口、内存限制、RDB/AOF 持久化、密码 |
|
||
| 数据库 | **MySQL** | `.cnf` | 版本(5.7/8.0)、Buffer Pool 自动计算、字符集、慢查询、主从复制 |
|
||
| 数据库 | **PostgreSQL** | `.conf` | 共享缓冲区、WAL 配置、SSL、连接数、慢查询阈值 |
|
||
| 数据库 | **MongoDB** | `.conf` | 端口、WiredTiger 引擎、认证、TLS、副本集、Oplog、压缩算法 |
|
||
| 数据库 | **Oracle** | `.ora` | SGA/PGA 内存、进程数、字符集、归档日志、审计 |
|
||
| 搜索引擎 | **Elasticsearch** | `.yml` | 集群名称、节点角色、发现方式、堆内存、安全、慢日志 |
|
||
| 消息队列 | **RocketMQ** | `.conf` | Broker 名称、NameServer 地址、刷盘策略、消息大小 |
|
||
| 消息队列 | **Kafka** | `.properties` | Broker ID、分区数、副本因子、ZooKeeper、日志保留 |
|
||
| K8S 工作负载 | **Pod** | `.yaml` | 容器镜像、端口、资源限制、环境变量、重启策略 |
|
||
| K8S 工作负载 | **Deployment** | `.yaml` | 镜像、副本数、资源限制、健康检查、滚动更新策略 |
|
||
| K8S 工作负载 | **StatefulSet** | `.yaml` | 有状态应用、稳定网络标识、PVC 模板、滚动更新 |
|
||
| K8S 工作负载 | **DaemonSet** | `.yaml` | 节点级守护进程、主机网络、容忍度配置 |
|
||
| K8S 工作负载 | **Job** | `.yaml` | 一次性任务、完成策略、重试限制、TTL 清理 |
|
||
| K8S 工作负载 | **CronJob** | `.yaml` | Cron 表达式、并发策略、历史保留、暂停开关 |
|
||
| K8S 服务发现 | **Service** | `.yaml` | ClusterIP/NodePort/LoadBalancer、端口映射、会话保持 |
|
||
| K8S 服务发现 | **Ingress** | `.yaml` | 主机路由、路径匹配、TLS 终止、IngressClass |
|
||
| K8S 存储 | **PersistentVolume** | `.yaml` | 容量、访问模式、回收策略、HostPath/NFS |
|
||
| K8S 存储 | **PersistentVolumeClaim** | `.yaml` | 存储请求、StorageClass、访问模式 |
|
||
| K8S 存储 | **StorageClass** | `.yaml` | Provisioner、回收策略、延迟绑定、卷扩展 |
|
||
| K8S 配置与密钥 | **ConfigMap** | `.yaml` | 键值对配置、挂载为卷或环境变量 |
|
||
| K8S 配置与密钥 | **Secret** | `.yaml` | Opaque/TLS/Docker Registry、Base64 编码 |
|
||
| K8S 安全与权限 | **ServiceAccount** | `.yaml` | 自动挂载 Token、镜像拉取密钥 |
|
||
| K8S 安全与权限 | **Role** | `.yaml` | 命名空间级 RBAC、资源+动词组合 |
|
||
| K8S 安全与权限 | **ClusterRole** | `.yaml` | 集群级 RBAC、跨命名空间权限 |
|
||
| K8S 安全与权限 | **RoleBinding** | `.yaml` | 将 Role 绑定到 User/Group/ServiceAccount |
|
||
| K8S 安全与权限 | **ClusterRoleBinding** | `.yaml` | 将 ClusterRole 绑定到集群级主体 |
|
||
| K8S 安全与权限 | **NetworkPolicy** | `.yaml` | 入站/出站流量控制、Pod 选择器、CIDR 规则 |
|
||
| K8S 集群管理 | **Namespace** | `.yaml` | 命名空间创建、标签管理 |
|
||
| 服务治理 | **Nacos** | `.properties` | 端口、数据源、认证、集群模式、日志级别 |
|
||
| 分布式协调 | **ZooKeeper** | `.cfg` | 端口、数据目录、集群配置、四字命令、自动清理 |
|
||
| 分布式协调 | **Etcd** | `.yml` | 节点名称、监听地址、集群配置、TLS、自动压缩 |
|
||
| 容器化 | **Docker** | `.json` | 数据目录、存储驱动、日志配置、镜像加速、网络 |
|
||
| 容器化 | **Docker Compose** | `.yml` | 服务定义、端口映射、卷挂载、环境变量、资源限制 |
|
||
| 日志监控 | **Logstash** | `.conf` | 输入源、Grok 过滤、GeoIP、输出目标、管道配置 |
|
||
| 日志监控 | **Kibana** | `.yml` | 端口、Elasticsearch 连接、SSL、国际化、安全 |
|
||
| 日志监控 | **Prometheus** | `.yml` | 采集间隔、告警管理器、采集任务、远程读写、保留策略 |
|
||
| 日志监控 | **Grafana** | `.ini` | 端口、数据库、SMTP、匿名访问、日志级别 |
|
||
| 日志监控 | **Zabbix** | `.conf` | 端口、数据库、缓存、轮询器、清理频率 |
|
||
| 日志监控 | **Syslog** | `.conf` | UDP/TCP/RELP 协议、远程日志、按主机分目录、速率限制 |
|
||
| 自动化运维 | **Ansible** | `.cfg` | SSH 连接、Pipelining、Become 提权、Forks、事实缓存 |
|
||
| 自动化运维 | **Ansible Playbook** | `.yaml` | 变量、包管理、服务管理、文件复制、模板渲染、Handlers |
|
||
| 系统服务 | **NTP** | `.conf` | NTP 服务器、认证、轮询间隔、drift 文件 |
|
||
| 系统服务 | **DHCP** | `.conf` | 子网、地址范围、租约时间、网关、静态绑定 |
|
||
| 系统服务 | **BIND (DNS)** | `.conf` | 监听地址、转发器、递归、DNSSEC、Zone 配置 |
|
||
| 系统服务 | **NFS** | `.exports` | 共享路径、客户端地址、权限、root_squash、NFSv4 |
|
||
| 系统服务 | **SAMBA** | `.conf` | 工作组、共享目录、权限、用户认证、日志 |
|
||
| 系统服务 | **RSYNC** | `.conf` | 模块、路径、认证、主机白名单 |
|
||
| 系统服务 | **Sersync** | `.xml` | 监控目录、远程同步目标、过滤规则、定时触发 |
|
||
| 系统服务 | **vsftpd** | `.conf` | 被动模式、TLS、用户限制、chroot、日志 |
|
||
| 系统服务 | **Subversion** | `.conf` | 匿名访问、认证、SASL、Hook 脚本 |
|
||
| 数据库中间件 | **Mycat** | `.xml` | 端口、字符集、连接数、事务隔离、认证 |
|
||
| CI/CD | **GitLab** | `.rb` | 外部 URL、SSL、数据库、Redis、Registry、SMTP |
|
||
| CI/CD | **Jenkins** | `.yaml` | 端口、执行器、LDAP、Casc、Git 配置 |
|
||
| 高可用 | **Keepalived** | `.conf` | VRRP 实例、VIP、优先级、健康检查、通知脚本 |
|
||
| 高可用 | **HAProxy** | `.cfg` | 全局配置、前后端、负载均衡算法、SSL、统计页面 |
|
||
| 高可用 | **LVS** | `.conf` | 调度算法、VIP、Real Server、DR/NAT/TUN 模式 |
|
||
|
||
---
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 环境要求
|
||
|
||
- Node.js >= 18
|
||
- npm >= 9
|
||
|
||
### 安装与运行
|
||
|
||
```bash
|
||
# 克隆项目
|
||
git clone <your-repo-url>
|
||
cd conf-template
|
||
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 启动开发服务器
|
||
npm run dev
|
||
```
|
||
|
||
浏览器访问 `http://localhost:3000`
|
||
|
||
### 生产构建
|
||
|
||
```bash
|
||
# 构建产物输出到 dist/ 目录
|
||
npm run build
|
||
|
||
# 预览构建产物
|
||
npm run preview
|
||
```
|
||
|
||
构建产物为纯静态文件，可直接部署到 Nginx、GitHub Pages、Vercel、Cloudflare Pages 等任意静态托管服务。
|
||
|
||
---
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
conf-template/
|
||
├── index.html # 入口 HTML
|
||
├── package.json # 项目依赖与脚本
|
||
├── vite.config.js # Vite 构建配置
|
||
├── src/
|
||
│ ├── main.js # Vue 应用入口
|
||
│ ├── App.vue # 主布局（三栏）
|
||
│ ├── components/
|
||
│ │ ├── Sidebar.vue # 侧边栏导航 + 搜索过滤
|
||
│ │ ├── ConfigForm.vue # 左侧动态表单面板
|
||
│ │ └── CodePreview.vue # 右侧 Monaco Editor 代码预览
|
||
│ └── schemas/
|
||
│ ├── index.js # Schema 注册中心 + 工具函数
|
||
│ ├── nginx.js # NGINX
|
||
│ ├── redis.js # Redis
|
||
│ ├── mysql.js # MySQL
|
||
│ ├── mongodb.js # MongoDB
|
||
│ ├── k8s-pod.js # K8s Pod
|
||
│ ├── k8s-deployment.js # K8s Deployment
|
||
│ ├── k8s-statefulset.js # K8s StatefulSet
|
||
│ ├── k8s-daemonset.js # K8s DaemonSet
|
||
│ ├── k8s-job.js # K8s Job
|
||
│ ├── k8s-cronjob.js # K8s CronJob
|
||
│ ├── k8s-service.js # K8s Service
|
||
│ ├── k8s-ingress.js # K8s Ingress
|
||
│ ├── k8s-pv.js # K8s PersistentVolume
|
||
│ ├── k8s-pvc.js # K8s PersistentVolumeClaim
|
||
│ ├── k8s-storageclass.js # K8s StorageClass
|
||
│ ├── k8s-configmap.js # K8s ConfigMap
|
||
│ ├── k8s-secret.js # K8s Secret
|
||
│ ├── k8s-serviceaccount.js # K8s ServiceAccount
|
||
│ ├── k8s-role.js # K8s Role
|
||
│ ├── k8s-clusterrole.js # K8s ClusterRole
|
||
│ ├── k8s-rolebinding.js # K8s RoleBinding
|
||
│ ├── k8s-clusterrolebinding.js # K8s ClusterRoleBinding
|
||
│ ├── k8s-networkpolicy.js # K8s NetworkPolicy
|
||
│ ├── k8s-namespace.js # K8s Namespace
|
||
│ ├── ansible.js # Ansible
|
||
│ └── ansible-playbook.js # Ansible Playbook
|
||
└── dist/ # 生产构建产物（gitignore）
|
||
```
|
||
|
||
---
|
||
|
||
## 🔧 如何扩展新组件
|
||
|
||
每个中间件由两部分组成：**Schema 定义** + **模板生成函数**。
|
||
|
||
### 1. 创建 Schema 文件
|
||
|
||
在 `src/schemas/` 下新建文件，如 `postgresql.js`：
|
||
|
||
```js
|
||
export const postgresqlSchema = {
|
||
id: 'postgresql',
|
||
name: 'PostgreSQL',
|
||
icon: 'Coin',
|
||
category: '数据库',
|
||
description: '世界上最先进的开源关系型数据库',
|
||
format: 'conf',
|
||
fileName: 'postgresql.conf',
|
||
groups: [
|
||
{
|
||
title: '基础配置',
|
||
fields: [
|
||
{
|
||
key: 'port',
|
||
label: '监听端口',
|
||
type: 'number', // number | text | select | switch
|
||
min: 1,
|
||
max: 65535,
|
||
default: 5432,
|
||
},
|
||
// ...更多字段
|
||
],
|
||
},
|
||
],
|
||
}
|
||
|
||
export function generatePostgresqlConf(config) {
|
||
// 根据 config 对象生成配置文件文本
|
||
return `port = ${config.port}\n...`
|
||
}
|
||
```
|
||
|
||
### 2. 字段类型说明
|
||
|
||
| type | 渲染组件 | 额外属性 |
|
||
|------|----------|----------|
|
||
| `select` | 下拉框 | `options: [{label, value}]` |
|
||
| `number` | 数字输入 | `min`, `max`, `step` |
|
||
| `text` | 文本输入 | `placeholder` |
|
||
| `switch` | 开关 | — |
|
||
|
||
### 3. 联动字段
|
||
|
||
通过 `dependsOn` 实现条件显示：
|
||
|
||
```js
|
||
{
|
||
key: 'sslCert',
|
||
label: 'SSL 证书路径',
|
||
type: 'text',
|
||
dependsOn: { key: 'enableSsl', value: true }, // 仅当 enableSsl === true 时显示
|
||
}
|
||
```
|
||
|
||
### 4. 注册到 Schema 中心
|
||
|
||
在 `src/schemas/index.js` 中导入并注册：
|
||
|
||
```js
|
||
import { postgresqlSchema, generatePostgresqlConf } from './postgresql'
|
||
|
||
export const schemas = {
|
||
// ...已有组件
|
||
postgresql: postgresqlSchema,
|
||
}
|
||
|
||
export const generators = {
|
||
// ...已有生成器
|
||
postgresql: generatePostgresqlConf,
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🛠 技术栈
|
||
|
||
| 技术 | 用途 |
|
||
|------|------|
|
||
| [Vue 3](https://vuejs.org/) | 核心视图框架，原生双向绑定 |
|
||
| [Element Plus](https://element-plus.org/) | UI 组件库（表单、按钮、提示等） |
|
||
| [Monaco Editor](https://microsoft.github.io/monaco-editor/) | 代码编辑器（VS Code 内核） |
|
||
| [Vite](https://vitejs.dev/) | 构建工具，秒级 HMR |
|
||
| localStorage | 用户配置本地持久化 |
|
||
|
||
---
|
||
|
||
## 📄 License
|
||
|
||
[MIT](LICENSE)
|