# nginxweb

**Repository Path**: yabipi/nginxweb

## Basic Information

- **Project Name**: nginxweb
- **Description**: nginx配置可视化
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-12
- **Last Updated**: 2026-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 说明
- 解决一个nginx包含多个域名配置，直接vim编辑繁琐的痛点。
- 采用Go+React开发前后端合体的应用，也就是最后web资源嵌入到可执行文件里。
- 实现对nginx配置文件的可视化编辑：能导入一个nginx.conf文件，解析出域名列表，能编辑每个域名的内容，无需对每个域名的配置做进一步的解析，只需要区分http和https配置即可。也就是说，每个域名的配置内容完全交给用户。能在界面上增加和删除域名即可。
- 编辑完毕能导出nginx.conf到指定路径
- 支持命令行参数指定nginx.conf文件路径。缺省路径为/etc/nginx/nginx.conf

## 功能特性

✨ **核心功能**
- 🔍 解析 nginx.conf 文件，自动提取所有域名配置
- 📝 可视化编辑每个域名的完整 server 配置块
- 🔐 自动识别 HTTP/HTTPS 配置
- ➕ 添加新域名配置
- ✏️ 编辑现有域名配置
- 🗑️ 删除域名配置
- 📥 导入 nginx.conf 文件
- 📤 导出配置到指定路径
- 💾 配置完全由用户控制，不做深度解析

## 技术栈

- **后端**: Go 1.21+ (Gin框架)
- **前端**: React 18 + Vite
- **打包**: Go embed（前端资源嵌入到可执行文件）

## 项目结构

```
nginxweb/
├── main.go                  # 主程序入口
├── go.mod                   # Go 依赖管理
├── build.bat               # Windows 构建脚本
├── internal/
│   ├── model/
│   │   └── domain.go       # 数据模型
│   ├── service/
│   │   └── nginx_service.go # 业务逻辑
│   └── handler/
│       └── nginx_handler.go # API 处理器
└── web/                     # React 前端项目
    ├── package.json
    ├── vite.config.js
    ├── index.html
    └── src/
        ├── main.jsx
        ├── App.jsx
        ├── App.css
        ├── index.css
        └── api.js
```

## 快速开始

### 前置要求

- Go 1.21 或更高版本
- Node.js 16 或更高版本
- npm 或 yarn

### 构建步骤

**Windows 系统：**

```bash
# 运行构建脚本（会自动安装依赖、构建前端、编译后端）
build.bat
```

**手动构建：**

```bash
# 1. 安装前端依赖
cd web
npm install

# 2. 构建前端
npm run build

# 3. 返回根目录
cd ..

# 4. 下载 Go 依赖
go mod tidy

# 5. 编译 Go 程序
go build -o nginxweb.exe .
```

### 运行程序

```bash
# 使用默认配置路径 (/etc/nginx/nginx.conf)
nginxweb.exe

# 指定配置文件路径
ninxweb.exe -config="C:\nginx\conf\nginx.conf"

# 指定端口
ninxweb.exe -port=9000

# 同时指定配置文件和端口
ninxweb.exe -config="./nginx.conf" -port=9000
```

### 访问界面

程序启动后，在浏览器中访问：
```
http://localhost:8080
```

## 使用说明

### 1. 导入配置

在页面顶部的"导入配置"区域：
- 输入 nginx.conf 文件的完整路径
- 点击"导入配置"按钮
- 系统会自动解析并显示所有域名配置

### 2. 查看域名列表

- 左侧边栏显示所有已配置的域名
- 每个域名显示其类型（HTTP/HTTPS）和端口号
- 点击域名可以查看详细配置

### 3. 编辑域名

- 选择一个域名后，点击右上角的"编辑"按钮
- 可以修改域名名称、端口、HTTPS设置等
- 配置内容区域可以直接编辑完整的 server 配置块
- 点击"保存"确认修改，"取消"放弃修改

### 4. 添加新域名

- 点击左侧边栏顶部的"+ 添加域名"按钮
- 填写域名信息和配置内容
- 点击"保存"添加新域名

### 5. 删除域名

- 鼠标悬停在域名列表项上
- 点击右侧出现的"删除"按钮
- 确认删除操作

### 6. 导出配置

在页面顶部的"导出配置"区域：
- 输入要导出的目标路径（可以是相对路径或绝对路径）
- 点击"导出配置"按钮
- 系统会生成完整的 nginx.conf 文件

## 命令行参数

| 参数 | 说明 | 默认值 |
|------|------|--------|
| `-config` | nginx.conf 文件路径 | `/etc/nginx/nginx.conf` |
| `-port` | Web 服务器端口 | `8080` |

## API 接口

程序提供以下 REST API：

- `GET /api/domains` - 获取所有域名列表
- `POST /api/domains` - 添加新域名
- `PUT /api/domains/:name` - 更新域名配置
- `DELETE /api/domains/:name` - 删除域名
- `POST /api/import` - 导入配置文件
- `POST /api/export` - 导出配置文件

## 开发模式

如果需要开发或调试：

```bash
# 终端 1: 启动后端
go run main.go -config="./test_nginx.conf"

# 终端 2: 启动前端开发服务器
cd web
npm run dev
```

前端开发服务器会自动代理 API 请求到后端服务器。

## 注意事项

⚠️ **重要提示**

1. 本程序不会验证 nginx 配置的正确性，请确保手动编辑的配置语法正确
2. 建议在编辑前备份原始配置文件
3. 导出配置后，建议使用 `nginx -t` 命令验证配置文件
4. 程序只负责管理 `http {}` 块中的 `server {}` 配置
5. Windows 系统路径请使用双反斜杠或正斜杠（如 `C:\\nginx\\nginx.conf` 或 `C:/nginx/nginx.conf`）

## 配置文件示例

程序能够解析和管理如下格式的 nginx 配置：

```nginx
http {
    # HTTP 前缀配置（如 upstream、gzip 等）
    upstream backend {
        server 127.0.0.1:3000;
    }
    
    # HTTP 域名配置
    server {
        listen 80;
        server_name example.com;
        
        location / {
            proxy_pass http://backend;
        }
    }
    
    # HTTPS 域名配置
    server {
        listen 443 ssl;
        server_name secure.example.com;
        
        ssl_certificate /etc/ssl/certs/cert.pem;
        ssl_certificate_key /etc/ssl/private/key.pem;
        
        location / {
            root /var/www/html;
        }
    }
}
```

## 常见问题

**Q: 为什么导入配置后域名列表为空？**
A: 请检查配置文件路径是否正确，以及配置文件中是否包含有效的 server 块。

**Q: 导出的配置文件在哪里？**
A: 如果使用相对路径，文件会保存在程序运行目录；如果使用绝对路径，则保存在指定位置。导出成功后界面会显示完整路径。

**Q: 修改配置后需要重启 nginx 吗？**
A: 是的，导出新配置文件后，需要使用 `nginx -s reload` 或重启 nginx 服务来应用更改。

## License

MIT License