Featured image of post nginxWebUI 可视化配置：图形化管理 Nginx 反向代理与证书
操作系统

nginxWebUI 可视化配置：图形化管理 Nginx 反向代理与证书

cym1102/nginxWebUI 4.x 安装、systemd 守护、Web 登录初始化、反向代理配置模板、阿里云 DNS 申请证书、主机集群同步 .acme.sh

背景

直接编辑 nginx.conf 对老手不是问题，但对多机器、多域名、多证书的场景：

  • 10 台机器的 Nginx 配置逐个 scp + reload，效率低
  • Let’s Encrypt 证书 90 天过期，每次手动续期累
  • 反代配置改一行，要 grep + vim + nginx -t + reload 反复验证
  • 团队里新人不会写 nginx.conf

nginxWebUI（cym1102/nginxWebUI）是国产开源的Nginx 图形化管理工具：

  • Web 界面配置 server、location、upstream、SSL
  • 可视化反向代理、负载均衡、HTTPS、HTTP/2
  • 证书申请支持 Let’s Encrypt（DNS 验证）+ 自有证书
  • 集群同步多台 Nginx 配置一致
  • 参数模板常用片段（WebSocket、HTTPS、限流）

适用场景：

  • 中小企业多机器统一配置
  • 不熟悉 nginx.conf 的运维新人
  • 大量多域名业务（虚拟主机）
  • 证书自动续期 + 同步

前置知识：

  • Nginx 基础
  • 一台已装 Nginx 1.16+ 的 Linux 机器
  • JDK 1.8（运行 Spring Boot）

重要原则：nginxWebUI 直接修改nginx.conf 并 reload，所有手工编辑的注释必须用 # nginxWebUI 标记（避免被覆盖）。

一、架构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

                        ┌──────────────────┐
                        │  nginxWebUI Web  │ ← 用户浏览器
                        │   (Spring Boot)  │
                        │   :8080/:8082    │
                        └────────┬─────────┘
                                 │
                          ┌──────┴──────┐
                          │             │
                     ┌────▼─────┐  ┌────▼─────┐
                     │  Nginx   │  │ 配置文件  │ ← /home/nginxWebUI/
                     │  :80/443 │  │ 模板、    │
                     │  reload  │  │ 证书、    │
                     └──────────┘  │ 集群配置  │
                                  └──────────┘

关键路径：

  • Web UI：http://<ip>:8080（默认）
  • 项目目录：/home/nginxWebUI/
  • 配置文件：/home/nginxWebUI/conf/
  • 证书目录：/home/nginxWebUI/.acme.sh/

二、前置工作

2.1 安装 JDK 1.8

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

# 下载并解压
curl -O https://example.com/jdk-8u381-linux-x64.tar.gz
tar -xzvf jdk-8u381-linux-x64.tar.gz -C /usr/local

# 配置环境变量
cat << "EOF" >> /etc/profile
export JAVA_HOME=/usr/local/jdk1.8.0_381
export CLASSPATH=$JAVA_HOME/bin:$JAVA_HOME/lib:$JAVA_HOME/jre/lib
export PATH=.:$JAVA_HOME/bin:$JAVA_HOME/jre/bin:$PATH
EOF

# 生效
source /etc/profile

# 验证
java -version
# java version "1.8.0_381"

2.2 准备 Nginx

编译选项必须包含（缺哪个就重编）：

1
2
3
4
5
6
7
8

nginx -V
# 关键参数：
# --with-http_ssl_module        HTTPS 必备
# --with-http_stub_status_module 状态监控
# --with-pcre                    正则
# --with-http_gzip_static_module 静态压缩
# --with-stream                  TCP/UDP 四层代理
# --with-stream_ssl_module       TCP SSL

如果没有 --with-stream，重编译：

1
2
3
4
5
6
7
8

./configure --prefix=/usr/local/nginx \
  --with-http_ssl_module \
  --with-http_stub_status_module \
  --with-pcre \
  --with-http_gzip_static_module \
  --with-stream \
  --with-stream_ssl_module
make && make install

把 nginx 加入 PATH：

1
2
3
4
5
6

cat << "EOF" >> /etc/profile
PATH=$PATH:/usr/local/nginx/sbin
export PATH
EOF
source /etc/profile
nginx -V

三、安装 nginxWebUI

3.1 下载 jar

1
2
3

mkdir -p /home/nginxWebUI/
wget -O /home/nginxWebUI/nginxWebUI.jar \
  https://gitee.com/cym1102/nginxWebUI/releases/download/4.3.0/nginxWebUI-4.3.0.jar

版本选择：4.x 需要 JDK 11+，4.2.x 兼容 JDK 1.8。

3.2 启动（测试）

1
2
3
4

nohup java -jar -Dfile.encoding=UTF-8 \
  /home/nginxWebUI/nginxWebUI.jar \
  --server.port=8080 \
  --project.home=/home/nginxWebUI/ > /dev/null &

3.3 systemd 守护（生产推荐）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

cat << "EOF" > /etc/systemd/system/nginxwebui.service
[Unit]
Description=NginxWebUI
After=syslog.target
After=network.target

[Service]
Type=simple
User=root
Group=root
WorkingDirectory=/home/nginxWebUI
ExecStart=/usr/local/jdk1.8.0_381/bin/java -jar -Dfile.encoding=UTF-8 \
  /home/nginxWebUI/nginxWebUI.jar --server.port=8082
Restart=always
ReStartSec=600

[Install]
WantedBy=multi-user.target
EOF

systemctl daemon-reload
systemctl enable --now nginxwebui.service
systemctl status nginxwebui.service

四、首次登录

4.1 访问

1

http://<server-ip>:8082

4.2 修改默认密码

第一次登录会要求修改默认账号（默认 admin / nginxWebUI 或类似，取决于版本）。

必须改强密码——这个 Web 界面一旦被破，攻击者直接控制你的 Nginx。

4.3 主界面

登录后看到 5 大模块：

  1. 反向代理：可视化配置 server/location/upstream
  2. 证书管理：Let’s Encrypt 申请 + 续期
  3. 参数模板：常用片段（WebSocket、HTTPS、限流）
  4. 集群管理：多机器同步
  5. 系统设置：日志、备份、安全

五、反向代理实战

5.1 创建一个 HTTP 反代

反向代理 → 创建：

1
2
3
4

名称：blog-app
监听端口：80
域名：blog.example.com
上游地址：127.0.0.1:3000

nginxWebUI 自动生成：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

server {
    listen 80;
    server_name blog.example.com;
    
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

5.2 HTTPS + WebSocket 模板

反向代理 → 编辑 → 启用 SSL：

1
2
3

证书：选择 let's encrypt 自动申请
强制 HTTPS：是
模板：WebSocket

自动生成：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

server {
    listen 443 ssl http2;
    server_name blog.example.com;
    
    ssl_certificate /home/nginxWebUI/.acme.sh/blog.example.com/fullchain.cer;
    ssl_certificate_key /home/nginxWebUI/.acme.sh/blog.example.com/blog.example.com.key;
    
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # WebSocket 超时
        proxy_read_timeout 600s;
    }
}

5.3 负载均衡

上游 → 创建：

1
2
3
4
5
6

名称：api-pool
负载策略：ip_hash（会话保持）
节点：
  - 10.0.1.10:8080
  - 10.0.1.11:8080
  - 10.0.1.12:8080

在反代 location 选 api-pool，自动生成：

1
2
3
4
5
6

upstream api-pool {
    ip_hash;
    server 10.0.1.10:8080;
    server 10.0.1.11:8080;
    server 10.0.1.12:8080;
}

5.4 重载配置

右上角 → 替换文件 → 验证配置 → 重新加载 nginx

1
2

nginx -t
nginx -s reload

nginxWebUI 自动执行这两步。

六、证书自动申请

6.1 阿里云 DNS 验证

证书管理 → 申请证书 → DNS 验证 → 阿里云：

需要阿里云 AccessKey（最小权限：AliyunDNSFullAccess）：

1
2

AccessKey ID:    LTAI5txxxxxxxxxxx
AccessKey Secret: h8Q4xxxxxxxxxxxx

强烈建议用 RAM 子账号 AccessKey，不要用主账号。

6.2 申请流程

  1. 选择 DNS 厂商（阿里云 / 腾讯云 / Cloudflare / 华为云）
  2. 填 AccessKey
  3. 输入要申请证书的域名
  4. nginxWebUI 自动：
    • 在 DNS 添加 _acme-challenge TXT 记录
    • 等 Let’s Encrypt 验证
    • 保存证书到 /home/nginxWebUI/.acme.sh/
  5. 在反代配置中选这个证书

6.3 自动续期

Let’s Encrypt 证书 90 天过期。nginxWebUI 内置 cron 任务：

  • 每天检查 30 天内过期的证书
  • 自动调用 acme.sh 续期
  • 自动 reload nginx

无需人工干预。

6.4 多域名（SAN 证书）

1
2
3

example.com
www.example.com
api.example.com

一次申请，3 个域名共用 1 张证书。

七、集群同步

7.1 场景

N 台 Nginx 机器（机房 A 3 台 + 机房 B 2 台），配置要完全一致。

7.2 配置主从

集群管理 → 添加节点：

1
2
3
4
5

节点名：nginx-slave-01
IP：10.0.1.21
SSH 端口：22
SSH 用户：root
认证方式：SSH 私钥

主节点（你这台）配置变更后，点"同步"会自动 scp 配置 + reload 到所有从节点。

7.3 同步内容

  • 反代配置
  • 证书
  • 模板
  • 不同步：日志、本地统计

7.4 同步失败的常见原因

  1. SSH 免密没配：ssh-keygen + ssh-copy-id 先打通
  2. nginx 路径不同：从节点 /usr/local/nginx/sbin/nginx 不存在
  3. JDK 没装：从节点没 java，nginxWebUI 跑不起来
  4. 防火墙：从节点没开放 22 给主节点

八、参数模板

把常用配置片段做成模板，一处维护，到处使用。

8.1 内置模板

  • WebSocket 反代：Upgrade + Connection "upgrade" + 长超时
  • HTTPS 优化：ssl_protocols / ssl_ciphers / session cache
  • 静态资源：gzip / expires / cache-control
  • 限流：limit_req_zone 限 IP / URI
  • 防盗链：referer 白名单

8.2 自定义模板

1
2
3
4
5

# 我的限流模板
location / {
    limit_req zone=one burst=10 nodelay;
    proxy_pass http://backend;
}

保存后，在反代编辑界面可以一键插入。

九、备份与恢复

9.1 自动备份

系统设置 → 自动备份：

  • 备份目录：/home/nginxWebUI/backup/
  • 备份内容：所有反代配置 + 证书
  • 备份频率：每天 / 每周
  • 保留份数：30 份

9.2 手动备份

1
2
3
4
5
6
7

# 备份项目目录
tar -czf nginxWebUI_$(date +%F).tar.gz /home/nginxWebUI/

# 排除 .acme.sh（可重新申请）
tar -czf nginxWebUI_config_$(date +%F).tar.gz \
  --exclude='*.acme.sh' \
  /home/nginxWebUI/

9.3 跨机迁移

1
2
3
4
5
6

# 旧机器打包
tar -czf nginxWebUI.tar.gz /home/nginxWebUI/

# 新机器恢复
tar -xzf nginxWebUI.tar.gz -C /
# 然后启动 systemd 即可

记得修改 --project.home 指向新路径。

十、安全加固

10.1 Web UI 端口保护

1
2
3
4
5
6

# 用 Nginx 反代 nginxWebUI，加 basic auth
location / {
    auth_basic "NginxWebUI Admin";
    auth_basic_user_file /etc/nginx/.htpasswd;
    proxy_pass http://127.0.0.1:8082;
}

10.2 HTTPS for Web UI

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# 生成自签证书（内网用）
openssl req -x509 -nodes -days 3650 -newkey rsa:2048 \
  -keyout /home/nginxWebUI/ssl.key \
  -out /home/nginxWebUI/ssl.crt \
  -subj "/CN=nginxwebui.internal"

# 启动加 --server.ssl.key-store
nohup java -jar nginxWebUI.jar \
  --server.port=8443 \
  --server.ssl.key-store=/home/nginxWebUI/ssl.jks \
  --server.ssl.key-store-password=changeit &

10.3 操作审计

审计台 → 操作日志：所有 Web UI 操作都记录（谁在什么时间改了什么）。

十一、常见问题

11.1 配置替换后 nginx -t 报错

原因：上游地址不可达 + nginx -t 不检查 upstream 通断。

对策：

  • 在 nginxWebUI 启用"测试"模式（不直接 reload）
  • 手工 nginx -t 验证语法

11.2 证书申请失败

  • DNS 验证失败：阿里云 AccessKey 没 AliyunDNSFullAccess
  • 速率限制：Let’s Encrypt 一周 5 张同域名证书，用 staging 环境测
  • 端口 80 被占：HTTP 验证需要 80 端口，改用 DNS 验证

11.3 Web UI 502 Bad Gateway

  • 8080 端口被占：lsof -i :8080
  • Java 进程没起来：systemctl status nginxwebui
  • 磁盘满：证书申请要写临时文件

11.4 集群同步后从节点 nginx 起不来

  • 检查从节点 nginx 编译参数一致
  • 检查从节点 /etc/nginx 是否被覆盖（nginxWebUI 默认只动 conf.d）

十二、卸载

1
2
3
4
5

systemctl stop nginxwebui.service
systemctl disable nginxwebui.service
rm -rf /etc/systemd/system/nginxwebui.service
rm -rf /home/nginxWebUI
systemctl daemon-reload

小结

nginxWebUI 是国产最易用的 Nginx 可视化工具：

  1. 图形化反代——不用手写 nginx.conf
  2. 证书自动续期——Let’s Encrypt 90 天焦虑解除
  3. 集群同步——多机器配置一致性
  4. 模板复用——常用片段一处维护

生产使用三原则：

  • Web UI 加 basic auth + HTTPS
  • 手写配置必须带 # nginxWebUI 标记避免被覆盖
  • 定期备份 /home/nginxWebUI/

替代方案对比：

  • nginxWebUI（本篇）：Spring Boot + Web，集群同步
  • Nginx Proxy Manager：Docker 化，UI 更现代
  • Caddy：自带 HTTPS，但生态小
  • APISIX：企业级网关，APISIX Ingress

下一步：

  • 用 Nginx Proxy Manager 做内网穿透入口
  • 用 APISIX 做 API 网关（限流、鉴权、灰度）
  • 自建证书监控（certspotter / cert-expiry-monitor）

2024 视角：Web UI 类工具已"百花齐放"

2018 那篇只有 nginxWebUI 一个国产工具。2024 视角下，Web UI 类 Nginx 工具已经"百花齐放"。

一、nginxWebUI 4.x（2024 现状）

  • 当前版本 4.3.x（2024 持续更新）。
  • 新特性：
    • JDK 17+ 兼容（不再强依赖 JDK 8）
    • 国密 SM2/SM3/SM4（国内信创环境）
    • 集群同步 增强：支持灰度发布
    • OpenAPI：用 REST API 自动化配置
1
2
3
4
5
6

# 2024 装
wget -O /home/nginxWebUI/nginxWebUI.jar \
  https://gitee.com/cym1102/nginxWebUI/releases/download/4.3.0/nginxWebUI-4.3.0.jar

# 启动（要求 JDK 17+）
java -jar nginxWebUI.jar --server.port=8080 --project.home=/home/nginxWebUI/

二、Nginx Proxy Manager（NPM）—— 2024 主流"最易用"工具

1
2
3
4
5
6
7

# 装
docker run -d \
  --name nginx-proxy-manager \
  -p 80:80 -p 443:443 -p 81:81 \
  -v /data/npm/data:/data \
  -v /data/npm/letsencrypt:/etc/letsencrypt \
  jc21/nginx-proxy-manager:latest
  • 优势：
    • UI 极其现代（Vue 3 + Element Plus）
    • Let’s Encrypt 自动续期（内置）
    • Access List（HTTP Basic Auth 访问控制）
    • Audit Log（所有操作记录）
  • 2024 主流：NPM 在个人 / 小团队 / 自托管场景已经超过 nginxWebUI。

三、Caddy —— “自动 HTTPS"的魅力

  • Caddy（Go 写）自动申请 Let’s Encrypt 证书 + 自动续期——配置极简：
1
2
3
4
5
6
7
8
9

# /etc/caddy/Caddyfile
myapp.example.com {
    reverse_proxy localhost:3000
}

blog.example.com {
    reverse_proxy localhost:8080
    encode gzip
}

1
2
3
4

# 装
apt install caddy
caddy run
# 自动 HTTPS + 自动续期
  • 2024 趋势：Caddy 在静态博客 / 个人网站 / 内部工具场景全面替代 Nginx。
  • 劣势：插件生态远不如 Nginx（没有 stream 四层、不能编译第三方模块）。

四、APISIX / Kong —— “API 网关"路线

  • APISIX（Apache 顶级项目，国产）：云原生 API 网关——支持动态路由、限流、鉴权、灰度、gRPC：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# APISIX Route
upstreams:
  - id: "1"
    nodes:
      - host: "10.0.1.10"
        port: 8080
        weight: 1
      - host: "10.0.1.11"
        port: 8080
        weight: 1
    type: roundrobin
  • Kong（基于 Nginx + Lua）：商业 API 网关老牌，2024 仍是外企主流。

五、Traefik —— K8s 时代的"动态反代”

  • Traefik（Go 写）自动发现 K8s 资源（Ingress / Service）——几乎零配置：
1
2
3
4
5
6

# Helm 装
helm repo add traefik https://traefik.github.io/charts
helm install traefik traefik/traefik

# 自动发现所有 Ingress
kubectl apply -f myapp-ingress.yaml
  • 自动 HTTPS（Let’s Encrypt + cert-manager 集成）。
  • 2024 K8s 项目默认 Ingress Controller 之一（与 Nginx Ingress Controller 并列）。

六、acme.sh —— 命令行证书申请的事实标准

2018 那篇的 nginxWebUI 内置 acme.sh。2024 视角：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

# 装
curl https://get.acme.sh | sh
source ~/.bashrc

# 申请证书（DNS 验证）
export Ali_Key="xxx"
export Ali_Secret="yyy"
acme.sh --issue -d example.com --dns dns_ali

# 复制到 Nginx
acme.sh --install-cert -d example.com \
  --key-file /etc/nginx/ssl/example.com.key \
  --fullchain-file /etc/nginx/ssl/example.com.crt \
  --reloadcmd "systemctl reload nginx"
  • acme.sh 2024 仍是 80+ DNS 厂商支持的"证书神器”——比 certbot 简单、比 nginxWebUI 灵活。

七、Web UI 工具选型 2024 决策表

场景2018 选择2024 推荐
个人博客 / 静态站Caddy / NginxCaddy（自动 HTTPS）
小团队 1-3 台 NginxnginxWebUINPM（UI 现代）
中小企业多 NginxnginxWebUI + rsyncNPM 或 APISIX
K8s 集群 Ingress（K8s 还没普及）Traefik / Nginx Ingress / APISIX Ingress
API 网关 / 限流（没普及）APISIX / Kong
信创 / 国密nginxWebUInginxWebUI 4.x
跨境 / 外企nginxWebUINginx Plus 或 Kong Enterprise

八、Web UI 工具的"未来趋势"

  • AI 辅助配置（2024 萌芽）：自然语言生成 Nginx 配置
  • GitOps 化：Web UI 改动自动 commit 到 Git
  • 多集群联邦：一个 UI 管多 K8s 集群的 Ingress
  • 安全扫描：Web UI 内置配置审计（防止错误配置）

源文档：os/linux/第三方tools/net/nginx/nginxwebUI.md（JDK 安装、Nginx 编译、jar 启动、systemd 守护、证书申请）

© 2006 - 2026 Liangweidong's blog
使用 Hugo 构建
主题 Stack 由 Jimmy 设计