不管作为前端还是后端，我们工作中或多或少得接触反向代理，比如代理静态页面或者文件，代理接口解决跨域，配置https，缓存，负载等等。而这些需要的满足，我们肯定能接触到Nginx，即使我们使用Caddy等等其它方式，也肯定知道Nginx的存在。如果喜欢命令行，并且熟悉Nginx语法的大牛，可能直接编辑配置文件没什么问题，但是毕竟还是有一些人在命令行里面操作有点麻烦。所以，为什么不试试界面化的Nginx项目nginxWebUI呢?

nginxWebUI常用功能

  • Nginx代理：Nginx最基本的反向代理等等
  • https证书管理：管理https证书，自动续签
  • 负载：Nginx负载
  • 静态网页上传管理：一键上传静态网页，然后配置部署
  • 远程服务器：可以管理同样部署nginxWebUI的其它机器的代理配置
  • 开发接口：支持通过接口进行nginx配置，适合一些第三方开发

搭建

1. 配置文件

第一步，我们还是先利用docker-compose进行搭建。

在我们选定的nginxWebUI数据存储目录，例如我在/docker/nginxWebUI目录下，创建docker-compose.yml文件，并编写脚本：

1
2
3
4
5
6
7
8
9
10
11
12
version: "3.2"
services:
  nginxWebUi-server:
    container_name: nginxwebui
    image: cym1102/nginxwebui:latest
    volumes:
      - /docker/nginxWebUI/data:/home/nginxWebUI  #nginxWebUI数据持久化目录
    environment:
      BOOT_OPTIONS: "--server.port=8080"
    privileged: true
    restart: always
    network_mode: "host"

  • network_mode： 请使用host参数, 直接映射本机端口, 因为内部nginx可能使用任意一个端口, 所以必须映射本机所有端口.

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

  • BOOT_OPTIONS： 参数可填充java启动参数, 可以靠此项参数修改端口号，--server.port 占用端口, 不填默认以8080端口启动

  • privileged： privileged 参数是 Docker Compose 配置文件中一个用于设置容器特权模式的选项。将容器设置为特权模式意味着容器内的进程将具有更高的权限，能够执行一些特权操作，例如访问主机的设备或其他系统资源。

  • 日志： 日志默认存放在/docker/nginxWebUI/data/log/nginxWebUI.log

2. 启动

1
docker-compose up -d

注意：如果只想利用docker搭建，则可以使用以下步骤：

1
2
3
4
5
6
7
8
9
#1.拉取镜像
docker pull cym1102/nginxwebui:latest

#2.启动容器
docker run -itd \
  -v /docker/nginxWebUI/data:/home/nginxWebUI \
  -e BOOT_OPTIONS="--server.port=8080" \
  --net=host \
  cym1102/nginxwebui:latest

使用

使用文档

完成上面步骤后，等待检查到服务正常启动后访问IP:8080

输入图片说明

登录页面, 第一次打开会要求初始化管理员账号

输入图片说明

进入系统后, 可在管理员管理里面添加修改管理员账号

代理配置

http参数配置

在http参数配置中可以配置nginx的http项目,进行http转发,文件大小限制等等， 默认会给出几个常用配置, 其他需要的配置可自由增删改查. 可以勾选开启日志跟踪, 生成日志文件。

image-20240331144814686

代理配置

在反向代理中可配置nginx的反向代理即server项功能, 可开启ssl功能, 可以直接从网页上上传pem文件和key文件, 或者使用系统内申请的证书, 可以直接开启http转跳https功能，也可开启http2协议。

image-20240331144955421

如果有附加额外参数，可以点击设置额外参数，进行添加，但是注意不要加；,因为这个项目会自动给你加。也可以将这些额外参数设置为模版，然后直接使用。

image-20240331145317484

负载

在负载均衡中可配置nginx的负载均衡即upstream项功能, 在反向代理管理中可选择代理目标为配置好的负载均衡

输入图片说明

启用配置

上边我们修改的配置，是不会立即生效的，需要我们自己去检测激活。进入启用配置。

我们可以进行配置校验，通过后然后点击替换替换文件最后重新装载即可。

我们也可以看到，其实这个项目还有一个好处，它对于每次修改都有一个历史记录，相当于临时建立一个nginx配置文件，然后校验通过后替换真实配置文件，但是会留下历史记录，这样也就给我们如果后悔了想要还原某个版本的配置提供能支持。

image-20240331145736663

image-20240331150135060

其它配置就自己摸索吧，我就简单列一下常用的配置功能。

静态文件快捷上传

在html静态文件上传中可直接上传html压缩包到指定路径,上传后可直接在反向代理中使用,省去在Linux中上传html文件的步骤

image-20240331150255195

证书管理

在证书管理中可添加证书, 并进行签发和续签, 开启定时续签后, 系统会自动续签即将过期的证书, 注意:证书的签发是用的acme.sh的dns模式, 支持阿里云，腾讯云等等，可能需要key。

输入图片说明

image-20240331150445069

远程服务器

远程服务器管理, 如果有多台nginx服务器, 可以都部署上nginxWebUI, 然后登录其中一台, 在远程管理中添加其他服务器的ip和用户名密码, 就可以在一台机器上管理所有的nginx服务器了.

提供一键同步功能, 可以将某一台服务器的数据配置和证书文件同步到其他服务器中

输入图片说明

接口开发

本系统提供http接口调用, 打开 http://xxx.xxx.xxx.xxx:8080/doc.html 即可查看smart-doc接口页面.

接口调用需要在http请求header中添加token, 其中token的获取需要先在管理员管理中, 打开用户的接口调用权限, 然后通过用户名密码调用获取token接口, 才能得到token

输入图片说明

找回密码

如果忘记了登录密码或没有保存两步验证二维码，可按如下教程重置密码和关闭两步验证.

1.停止nginxWebUI进程或停止docker容器运行

2.使用找回密码参数运行nginxWebUI.jar, docker用户需单独下载nginxWebUI.jar运行此命令

1
java -jar nginxWebUI.jar --project.home=/home/nginxWebUI/ --project.findPass=true

–project.home 为项目文件所在目录, 使用docker容器时为映射目录

–project.findPass 为是否打印用户名密码

运行成功后即可重置并打印出全部用户名密码并关闭两步验证

最后

nginxWebUI这个项目更新比较频繁，所以我也就列举了一些常用的功能，其它例如密码管理器，日志等等，感兴趣的可以自己摸索。