NginxWebUI单机和集群版Nginx部署管理

项目介绍

实现原理

nginxWebUI采用Java+Vue技术栈开发，其核心原理如下：

1. 配置解析层

• 使用自研的解析器将nginx.conf转换为对象模型
• 支持复杂配置的双向转换
• 实现了配置文件的语法检查

1. 业务逻辑层

• 采用SpringBoot框架，提供RESTful API
• 实现了配置管理、证书管理等核心功能
• 使用WebSocket实现实时日志查看

1. 展示层

• 基于Vue开发的前端界面
• 响应式设计，支持多端适配
• 提供丰富的可视化组件

使用注意事项

1. 权限问题

• 需要确保运行用户对nginx配置目录有读写权限
• Docker部署时注意挂载目录权限

1. 安全性

• 建议修改默认管理员密码
• 限制管理界面的访问IP
• 开启操作日志记录

1. 性能考虑

• 大量配置文件时可能影响界面响应速度
• 建议定期清理不用的配置备份

安装

Docker安装

1、安装Docker容器环境

• Ubuntu：

apt install docker.io

• Centos：

yum install docker

2、拉取镜像：

docker pull cym1102/nginxwebui:latest
docker pull cym1102/nginx-web-ui:latest

3、启动容器：

docker run -itd \
  -v /home/nginxWebUI:/home/nginxWebUI \
  -e BOOT_OPTIONS="--server.port=8080" \
  --privileged=true \
  --net=host \
  cym1102/nginxwebui:latest
# 启动容器
docker run -d \
    -p 8080:8080 \
    -v /home/nginx/conf:/home/nginx/conf \
    -v /home/nginx/html:/home/nginx/html \
    -v /home/nginx/logs:/home/nginx/logs \
    -v /home/nginxWebUI:/home/nginxWebUI \
    --name nginxWebUI \
    cym1102/nginx-web-ui:latest

注意：启动容器时请使用--net=host参数，直接映射本机端口，因为内部Nginx可能使用任意一个端口，所以必须映射本机所有端口。

容器需要映射路径/home/nginxWebUI:/home/nginxWebUI，此路径下存放项目所有数据文件，包括数据库，Nginx配置文件，日志，证书等，升级镜像时，此目录可保证项目数据不丢失，请注意备份。

-e BOOT_OPTIONS 参数可填充java启动参数，可以靠此项参数修改端口号

--server.port 占用端口，不填默认以8080端口启动

日志默认存放在/home/nginxWebUI/log/nginxWebUI.log 另：使用docker-compose时配置文件如下

version: "3.2"
services:
  nginxWebUi-server:
    image: cym1102/nginxwebui:latest
    volumes:
      - type: bind
        source: "/home/nginxWebUI"
        target: "/home/nginxWebUI"
    environment:
      BOOT_OPTIONS: "--server.port=8080"
    privileged: true
    network_mode: "host"

Linux直接安装

# 下载最新版本
wget https://github.com/cym1102/nginxWebUI/releases/download/latest/nginxWebUI.jar
# 启动服务
nohup java -jar -Xmx64m nginxWebUI.jar --server.port=8080 --project.home=/home/nginx

功能说明

本项目是基于 solon 的 web 系统，数据库使用 h2，因此服务器上不需要安装任何数据库。

系统运行状态

基本参数配置

基本使用示例

# 示例:配置一个简单的反向代理
server {
  listen 80;
  server_name example.com;
  location / {
    proxy_pass http://backend:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

通过nginxWebUI的界面操作即可完成上述配置：

1. 点击”服务器管理” -> “添加服务器”
2. 填写域名example.com
3. 添加反向代理规则,填写目标地址
4. 点击保存并重载配置

http 参数配置

反向代理

• 支持多种代理模式
• 内置常用Header配置
• 支持WebSocket代理

# WebSocket代理配置
location /websocket {
  proxy_pass http://backend:8080;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
}

Stream参数配置

负载均衡(upstream)配置

• 支持多种负载算法
• 实时健康检查
• 动态权重调整

upstream backend {
  server 192.168.1.10:8080 weight=5;
  server 192.168.1.11:8080 weight=5;
  server 192.168.1.12:8080 backup;
}

配置管理

• 语法实时检查
• 配置文件备份
• 修改历史记录
• 配置模板功能

SSL证书管理

• 自动申请Let’s Encrypt证书
• 到期自动续期
• 支持泛域名证书
• 支持自定义证书导入

使用场景

场景一：快速部署HTTPS站点

问题：手动配置HTTPS既繁琐又容易出错

解决方案：使用nginxWebUI的证书管理功能

1. 自动申请证书

# 传统方式需要手动执行
certbot certonly --webroot -w /var/www/html -d example.com
# nginxWebUI只需点击"申请证书"按钮

1. 自动配置HTTPS

# nginxWebUI自动生成以下配置
server {
  listen 443 ssl;
  server_name example.com;
  ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
  ssl_protocols TLSv1.2 TLSv1.3;
}

场景二：微服务架构中的网关配置

问题：微服务架构中需要配置大量路由规则

解决方案：使用nginxWebUI的批量管理功能

1. 服务发现集成

# 自动生成服务路由
location /api/user {
  proxy_pass http://user-service;
}
location /api/order {
  proxy_pass http://order-service;
}

1. 负载均衡配置

upstream user-service {
  server 10.0.0.1:8080 max_fails=3 fail_timeout=30s;
  server 10.0.0.2:8080 max_fails=3 fail_timeout=30s;
}

场景三：多环境配置管理

问题：测试、预发、生产环境配置维护困难

解决方案：使用nginxWebUI的环境管理功能

环境隔离

# 开发环境
server {
  listen 80;
  server_name dev.example.com;
  location / {
    proxy_pass http://dev-backend;
  }
}
# 生产环境
server {
  listen 80;
  server_name example.com;
  location / {
    proxy_pass http://prod-backend;
  }
}

详细文档

官方资源

• 项目地址：https://github.com/cym1102/nginxWebUI
• 在线文档：https://gitee.com/cym1102/nginxWebUI/wikis
• API文档：项目内置Swagger文档

相关资源

• Nginx官方文档：http://nginx.org/en/docs/
• Let’s Encrypt：https://letsencrypt.org/docs/