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

Thu, 15 Mar 2018 00:00:00 +0800

背景

直接编辑 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 大模块：

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

五、反向代理实战

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 申请流程

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

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 同步失败的常见原因

SSH 免密没配：ssh-keygen + ssh-copy-id 先打通
nginx 路径不同：从节点 /usr/local/nginx/sbin/nginx 不存在
JDK 没装：从节点没 java，nginxWebUI 跑不起来
防火墙：从节点没开放 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 可视化工具：

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

生产使用三原则：

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 主流"最易用"工具

Nginx Proxy Manager（NginxProxyManager/nginx-proxy-manager）：Docker 一行命令 起 UI。

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 / Nginx	Caddy（自动 HTTPS）
小团队 1-3 台 Nginx	nginxWebUI	NPM（UI 现代）
中小企业多 Nginx	nginxWebUI + rsync	NPM 或 APISIX
K8s 集群 Ingress	（K8s 还没普及）	Traefik / Nginx Ingress / APISIX Ingress
API 网关 / 限流	（没普及）	APISIX / Kong
信创 / 国密	nginxWebUI	nginxWebUI 4.x
跨境 / 外企	nginxWebUI	Nginx 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 守护、证书申请）

证书管理 on Liangweidong's blog