Nginx配置可视化工具

这是一个基于Web的Nginx配置可视化工具，可以帮助你快速理解和分析Nginx配置文件结构。通过直观的图表展示Nginx的代理规则、服务器配置和整体网络拓扑，即使不熟悉Nginx配置的人也能轻松理解系统架构。

功能特点

• 直接拖放或选择上传nginx.conf文件
• 多种可视化视图：
  • 服务拓扑图：展示客户端、Nginx和后端服务器之间的连接关系
  • 路由规则图：可视化HTTP请求路径与代理目标之间的映射
  • 服务器配置图：树形结构展示服务器监听端口和位置规则
  • 树形结构：传统方式展示完整配置结构
• 使用ECharts实现交互式图表，支持缩放、平移和节点选择
• 点击指令查看详细配置信息
• 纯前端实现，无需服务器支持

使用方法

1. 在浏览器中打开index.html文件
2. 将nginx.conf文件拖放到指定区域，或点击"选择文件"按钮上传
3. 应用将自动解析配置文件并生成多种可视化视图
4. 使用顶部选项卡切换不同的可视化视图
5. 在图表中可以：
   • 拖拽移动整个图表
   • 鼠标滚轮缩放
   • 悬停在节点上查看提示信息
   • 点击节点查看详细信息
6. 在树形结构选项卡中，可以点击展开/折叠配置块

可视化视图说明

服务拓扑图

展示系统整体结构，包括客户端、Nginx服务器、虚拟主机和上游服务器组之间的连接关系。不同颜色表示不同类型的节点。

路由规则图

可视化HTTP请求路径与代理目标之间的映射关系，清晰展示Nginx如何将不同URL路径的请求转发到不同的后端服务。

服务器配置图

树形结构展示各个虚拟主机的配置，包括监听端口和位置规则，以及对应的根目录或代理目标。

树形结构

传统方式展示完整配置结构，可以点击展开/折叠各个配置块，并查看每个指令的详细信息。

支持的Nginx功能

该工具可视化展示以下Nginx核心功能：

• 虚拟主机配置（server块）
• 监听端口设置（listen指令）
• 位置规则（location块）
• 上游服务器组（upstream块）
• 代理配置（proxy_pass指令）
• 静态文件服务（root指令）
• 重定向设置（return指令）

浏览器兼容性

支持所有现代浏览器，包括：

• Chrome
• Firefox
• Safari
• Edge

限制

• 当前版本不支持解析包含的外部配置文件
• 复杂的正则表达式可能无法正确解析