Docker & Nginx 配置编辑器 📋

一个现代化的 Web 应用，用于可视化编辑 Docker Compose、Dockerfile 和 Nginx 配置文件，通过丰富的模板和参数化配置快速生成专业的容器化部署配置。

🌟 项目特点

多配置类型支持：完整支持 Docker Compose、Dockerfile 和 Nginx 三种配置类型
丰富的模板库：内置多种常用场景的配置模板，一键应用
可视化参数编辑：通过点击按钮快速添加配置参数，无需记忆复杂语法
实时预览：模板内容预览功能，确认无误后再应用
主题切换：支持深色/浅色双主题模式，适应不同使用环境
响应式设计：完美适配桌面和移动设备
本地存储：自动保存编辑内容，防止意外丢失
开屏动画：专业的加载动画，提升用户体验

📁 项目结构

.
├── docker-compose.yml # 项目本身的 Docker 部署配置
├── html/ # 前端资源目录
│ ├── docker-compose-mould.js # Docker Compose 模板数据
│ ├── docker-compose-parameter.js # Docker Compose 参数配置
│ ├── dockerfile-mould.js # Dockerfile 模板数据
│ ├── dockerfile-parameter.js # Dockerfile 参数配置
│ ├── img/
│ │ └── favicon.ico # 网站图标
│ ├── index.html # 主页面
│ ├── nginx-mould.js # Nginx 模板数据
│ ├── nginx-parameter.js # Nginx 参数配置
│ ├── script.js # 主逻辑脚本
│ └── styles.css # 样式文件
└── README.md # 项目说明文档

🛠️ 功能模块

1. Docker Compose 编辑器

服务配置（镜像、容器名称、重启策略等）
网络配置（网络模式、驱动设置）
存储卷配置
环境变量管理
依赖关系配置

2. Dockerfile 编辑器

基础镜像选择（Node.js, Python, Java, Nginx等）
常用指令（WORKDIR, COPY, RUN, EXPOSE, CMD等）
环境变量配置
用户管理
元数据设置

3. Nginx 配置编辑器

服务器块配置
位置块和路由规则
反向代理设置
SSL/HTTPS 配置
负载均衡配置
缓存控制和访问控制

🚀 快速开始

使用 Docker 部署

1
2
3
4
5
6
7
8


# 克隆项目  
git clone git@gitee.com:meimolihan/nginx-dock-builder.git  
​  
# 进入项目目录  
cd nginx-dock-builder  
​  
# 启动服务  
docker-compose up -d

访问 http://localhost:8286 即可使用编辑器。

直接使用

直接打开 html/index.html 文件即可在浏览器中使用编辑器。

📋 使用方法

选择配置类型：通过顶部标签切换 Docker Compose、Dockerfile 或 Nginx 编辑器
浏览模板：在左侧模板栏中选择适合的模板类别和具体模板
预览模板：点击模板按钮预览内容，确认后点击"应用模板"
自定义配置：使用右侧参数栏快速添加配置项，或直接在编辑器中修改
保存导出：使用编辑器顶部按钮进行清除、保存或复制操作

🎨 自定义配置

更换壁纸

点击右上角"更换壁纸"按钮可以循环切换预设的背景样式。

主题切换

点击"亮色/暗色模式"按钮可以在两种主题间切换，偏好设置会自动保存。

添加自定义模板

编辑对应的 *-mould.js 文件，按照现有格式添加新的模板配置。

🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来完善这个项目：

Fork 本项目
创建特性分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
开启 Pull Request

🙏 致谢

感谢 CodeMirror 提供优秀的代码编辑器组件
感谢 Font Awesome 提供精美的图标
感谢 Docker 和 Nginx 社区提供的文档和示例