Docker-Nginx UI

[Nginx UI](https://nginxui.com/zh_CN/)，Nginx 的另一个 WebUI

**相关链接：**
---
- 官网：https://nginxui.com/zh_CN/
- Doc：https://nginxui.com/zh_CN/guide/about.html
- GitHub：https://github.com/0xJacky/nginx-ui
- DockerHub：https://hub.docker.com/r/uozi/nginx-ui
- Cloudflare网络端口：https://developers.cloudflare.com/fundamentals/reference/network-ports/

# 部署
## ⭐docker-compose
```bash
mkdir -p {nginx,nginx-ui,www,log}  # 创建所需文件夹
nano docker-compose.yml
docker-compose up -d

# 解决 管理Stream 报错
mkdir -p nginx/{streams-enabled,streams-available}  # 创建所需文件夹(需要部署后创建)
```
`docker-compose.yml`
```yaml
version: '3'
services:
  nginx-ui:
    image: uozi/nginx-ui:latest  # 使用自定义的nginx-ui镜像
    # container_name: nginx-ui  # 容器名称
    ports:  # 如果加入了host网络,这部分就不需要了
      - 8080:80  # 默认Nginx http端口(推荐改成内外一致,所见即所的)
      - 8443:8443  # 默认Nginx https端口(推荐改成内外一致,所见即所的)
      - 9000:9000  # Nginx UI 后台管理端口(默认80端口也可以进,但添加站点后需要自行添加该端口映射否则会无法访问)
      # - 9180:9180  # HTTP Challenge 监听端口
    volumes:
      - ./nginx:/etc/nginx  # 将nginx配置文件挂载到容器中
      - ./nginx-ui:/etc/nginx-ui  # 将nginx-ui配置文件挂载到容器中
      - ./www:/var/www  # 将网站目录挂载到容器中
      - ./log:/var/log/nginx  # 将nginx日志目录挂载到容器中(解决容器log报错)
    environment:
      - TZ=Asia/Shanghai  # 设置时区
    restart: always  # 总是重新启动容器
    stdin_open: true  # 允许标准输入
    # tty: true  # 分配伪终端
    # depends_on:  # 依赖的服务(确保相关依赖运行中再启动服务)
    #   - php  # 若是需要php启用该项确保先启动好
    # networks:  # 默认加入,无需额外配置
    #   - nginxui_default  # 将容器加入名为 nginxui 的网络

# php:  # PHP 环境(nginx-ui 内部安装 php环境 会出现 php-fpm 没生成 sock)
  #   image: php:7.4-fpm  # 使用自定义的nginx-ui镜像
  #   #container_name: php  # 容器名称
  #   volumes:
  #     - ./www:/var/www  # 将网站目录挂载到容器中(网站外部路径和容器内路径都要和nginx一致)
  #   restart: always  # 总是重新启动容器

# networks:
#   nginxui_default:  # 网络名称,有则加入,无则创建后加入(按照下方配置进行创建)
#     driver: bridge  # 网络类型
```

## [Docker run](https://nginxui.com/zh_CN/guide/getting-started.html#%E4%BD%BF%E7%94%A8-docker)
```bash
docker run -dit --name=nginx-ui -p 8080:80 -p 8443:443 -p 9000:9000 -v $PWD/nginx:/etc/nginx -v $PWD/nginx-ui:/etc/nginx-ui -v $PWD/www:/var/www -v $PWD/log:/var/log/nginx -e TZ=Asia/Shanghai --restart=always uozi/nginx-ui:latest
```

## [Linux 部署](https://nginxui.com/zh_CN/guide/install-script-linux.html)
不推荐，docker容器直连不方便
```bash
apt install nginx  # 安装Nginx(Linux部署需要单独安装)

# 脚本快速使用
bash <(curl -L -s https://mirror.ghproxy.com/https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) install -r https://mirror.ghproxy.com/

# 如果端口冲突(默认监听端口：9000，HTTP Challenge 端口：9180)
nano /usr/local/etc/nginx-ui/app.ini  # 修改配置文件
systemctl restart nginx-ui  # 重启 Nginx UI 服务(start/stop/restart/status)

# 解决 管理Stream 报错
mkdir /etc/nginx/{streams-available,streams-enabled}  # 创建所需文件夹(需要部署后创建)

# 卸载
bash <(curl -L -s https://mirror.ghproxy.com/https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) remove
```
更多 [配置参考](https://nginxui.com/zh_CN/guide/install-script-linux.html)

# 使用
部署后访问 `http://{域名:端口(http)|NginxUI后台端口}/#/install` 进行安装配置
默认http就可进入NginxUI后台，如果进不去可以使用NginxUI后台独立端口
如果http配置了站点，默认可进NginxUI后台的可能会失效，可以单独配置一下来保留这个功能

## 获取证书_手动挂载
挂载到容器内，然后引用文件即可
如存放在 `.../nginx-ui/key` 手动挂载 `/etc/nginx-ui/key/{证书/密钥}`

## ⭐获取证书_运营商方式
这里就拿我最常用的 CloudFlare 家的举例，[更多DNS参数说明](https://go-acme.github.io/lego/dns/)
1. 添加DNS凭证
别名的照抄上方的即可
![](/media/202403/2024-03-28_165551_0604780.8653145969904493.png)
2. 添加证书
![](/media/202403/2024-03-28_165926_0192950.45636660668687.png)

## 获取证书_Let's Encrypt
要想使用该功能，[`必须要有80端口`](https://letsencrypt.org/zh-cn/docs/challenge-types/#http-01-%E9%AA%8C%E8%AF%81)才可用该方式，80端口无法开放的采用 [获取证书_运营商方式](#获取证书_运营商方式)
还要开放 HTTP Challenge 对应端口(默认9180,`内外要一致！`)，来进行辅助验证
创建站点时勾选 `用 Let's Encrypt 对网站进行加密` 就可以获取了

确保配置中要有下面这个(默认勾选会生成)，验证链接重定向到 HTTP Challenge，不然无法验证，推荐每个 Server 下都要添加
```bash
server {
    # ......其他配置......
    location /.well-known/acme-challenge {
        proxy_set_header Host $host;
        proxy_set_header X-Real_IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr:$remote_port;
        proxy_pass http://127.0.0.1:9180;
    }
}
```

## 反向代理其它容器
主要解决两个不在一个网络下的情况，思路是把 `需要反向代理的容器全部加入到 nginx 所在的网络`
然后通过 `容器名称` 进行调用即可(注意，调用的端口为容器内部端口！)
```bash
# 群晖中Web Docker的网络管理中可以直接操作
docker network connect {要加入的网络} {加入该网络的容器名称}  # 加入网络
docker network disconnect {所在的网络} {断开该网络的容器名称}  # 断开网络

# docker run 部署时加入
--network=nginxui_default  # 加入指定网络

# docker-compose 下加入
  {容器名称}:
    # ......省略......
    networks:
      - default  # 默认的网络(也可仅加入nginx网络)
      - nginxui_default  # 连接网络名称(也可仅把需要反向代理的额外加入nginx)

# 加入nginx容器所在网络(否则无法使用nginx代理)
networks:  # 该项和 services 同级(顶格)
  nginxui_default:  # 连接网络名称
    external: true  # 加入网络
    name: nginxui_default  # 网络的名称
```

### 示例
同端口搭配指定二级域名指定服务，配合 CloudFlare 任意域名指向服务器非常好用(无需挨个配置二级域名)
![](/media/202403/2024-03-29_140142_0576900.06504275567515405.png)
```bash
# 定义变量 $connection_upgrade，根据请求头中的 Upgrade 字段决定是否升级连接
map $http_upgrade $connection_upgrade {
    default upgrade;  # 如果请求不包含 Upgrade 头，则升级连接
    '' close;  # 如果请求包含空的 Upgrade 头，则关闭连接
}
# 通用配置(支持子路径的)
server {
    listen 8443 ssl;  # 监听端口
    # listen [::]:8443 ssl;  # IPv6没有,直接禁用
    server_name 918178.xyz;  # 监听域名，多个域名用空格分隔

# SSL 配置
    ssl_certificate /etc/nginx/ssl/*.918178.xyz_918178.xyz/fullchain.cer;  # SSL 证书文件
    ssl_certificate_key /etc/nginx/ssl/*.918178.xyz_918178.xyz/private.key;  # SSL 证书密钥文件

error_page 497 =307 https://$host:$server_port$request_uri;   # http自动转https(=307 不可写成 = 307)
    proxy_ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;  # 指定支持的 SSL/TLS 协议版本

# # Let's Encrypt 对网站进行加密使用
    # location /.well-known/acme-challenge {
    #     # 将请求代理到指定的地址
    #     proxy_set_header Host $host;
    #     proxy_set_header X-Real_IP $remote_addr;
    #     proxy_set_header X-Forwarded-For $remote_addr:$remote_port;
    #     proxy_pass http://127.0.0.1:9180;
    # }
    # NginxUI Nginx代理
    location ~* /nginxui {  # 正则匹配,~* 表示区分大小写
        proxy_pass http://127.0.0.1:9000;  # 反向代理,因为使用正则,结尾无法加/
        rewrite ^/(?i)nginxui(/.*)$ $1 break;  # 反向代理结尾没有/,会把子路径带入,重写URL去除子路径
                                                # (?!) 表示不区分大小写
    }
    # Synology 群晖
    location ~* /Synology {  # 正则匹配,~* 表示区分大小写
        proxy_pass https://192.168.100.233:2334;  # 反向代理,因为使用正则,结尾无法加/
        rewrite ^/(?i)Synology(/.*)$ $1 break;  # 反向代理结尾没有/,会把子路径带入,重写URL去除子路径
                                                # (?!) 表示不区分大小写
    }
    # Tasmota 塔斯莫塔
    location ~* /Tasmota {  # 正则匹配,~* 表示区分大小写
        proxy_connect_timeout 60;  # 设置连接超时时间
        proxy_read_timeout 60;  # 设置读取超时时间
        proxy_send_timeout 60;  # 设置发送超时时间
        proxy_intercept_errors off;  # 关闭错误拦截
        proxy_http_version 1.1;  # 设置 HTTP 版本
        proxy_set_header Host $http_host;  # 客户端请求中的原始 Host 头的值(Tasmota必须如此)
        proxy_set_header X-Real-IP $remote_addr;  # 客户端的真实 IP 地址
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 客户端的真实 IP 地址
        proxy_set_header X-Forwarded-Proto $scheme;  # 客户端请求的协议
        proxy_pass http://192.168.100.15;  # 反向代理,因为使用正则,结尾无法加/
        rewrite ^/(?i)Tasmota(/.*)$ $1 break;  # 反向代理结尾没有/,会把子路径带入,重写URL去除子路径
    }
    # OpenVPN(用户认证页面加载后再要求验证)
    location /openvpn/ {
        # 设置用户认证
        auth_basic "使用前请登录";  # 提示
        auth_basic_user_file /etc/nginx/.passwd;  # ⭐存放密码位置
        proxy_http_version 1.1;  # 设置代理服务器与后端服务器之间使用的 HTTP 协议版本为 1.1
        proxy_pass http://openvpn-app-1:8080;  # ⭐连接的内部服务,可以直接写容器
        proxy_pass_header Server;  # 设置要传递给后端服务器的请求头字段
        proxy_set_header Connection "";   # 设置传递给后端服务器的请求头中的 Connection 字段为空,保持长连接
        proxy_set_header Host $http_host;  # 设置传递给后端服务器的请求头中的 Host 字段为客户端请求的主机头
        proxy_set_header X-Forwarded-Proto $scheme;  # 设置传递给后端服务器的请求头中的 X-Forwarded-Proto 字段,表示客户端连接时使用的协议
        proxy_set_header X-Real-IP $remote_addr;  # 设置传递给后端服务器的请求头中的 X-Real-IP 字段,表示客户端的真实 IP 地址
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 设置传递给后端服务器的请求头中的 X-Forwarded-For 字段,表示客户端的原始 IP 地址
        proxy_buffering off;  # 关闭代理缓冲,确保及时传递后端服务器的数据给客户端
        proxy_cache off;  # 禁用代理缓存,确保每次请求都直接从后端服务器获取最新的数据
        send_timeout 600;  # 设置向客户端发送响应的超时时间为 600 秒
        proxy_connect_timeout 600;  # 设置与后端服务器建立连接的超时时间为 600 秒
        proxy_send_timeout 600;  # 设置向后端服务器发送请求的超时时间为 600 秒
        proxy_read_timeout 600;  # 设置从后端服务器读取响应的超时时间为 600 秒
        rewrite ^/(?i)openvpn(/.*)$ $1 break;  # 反向代理结尾没有/,会把子路径带入,重写URL去除子路径
                                                # (?!) 表示不区分大小写
    }
    # zwzw 下载站
    location /zwzw/ {
        root /var/www/;  # 定义根目录
        # alias /var/www/zwzw/;  # 定义别名(与root二选一)
        autoindex on;  # 自动索引功能(显示当前目录下文件)
        autoindex_exact_size off;  # 显示文件精确大小(bytes),off只显示大概大小(kb、mb、gb)
        autoindex_localtime on;  # 显示本机时间,off GMT(格林威治)时间
        charset utf8;  # 字符集设置为UTF-8,解决中文名称乱码
        # limit_rate 2048k;  # 限速(默认不限速)
    }
    # UrlShorter 短链(PHP)
    location /UrlShorter/ {
        index index.php;  # 设置主文件(默认的没有php)
        root /var/www/;  # 设置主目录
    }
    # PHP 文件处理(该 server 块中所有PHP文件都将被此处理)
    location ~ \.php$ {
        root /var/www/;  # 设置主目录,和常规调用的一致
        fastcgi_pass php:9000;  # 设置 PHP-FPM 监听地址(容器名称:端口)
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;  # 设置 SCRIPT_FILENAME 变量
        include fastcgi_params;  # 引入 FastCGI 参数配置文件
    }
    # 导航页
    location / {
        rewrite ^(.*)$ https://blynk.space:8443/ permanent;  # 永久重定向301,会显示实际地址
        # rewrite ^(.*)$ https://blynk.space:8443/ redirect;  # 临时重定向302,会显示实际地址
        # proxy_pass https://blynk.space:8443/;  # 将请求代理到指定的地址(链接最后带/会丢弃匹配头)
        # 这种方式可以会出现设备刚开机运行时无法访问外部请求地址的从而导致启动失败
    }
}
# QD 自动签到(必须要主路径,子路径功能有问题)
server {
    listen 8443 ssl;
    server_name qd.918178.xyz;  # 监听域名
    ssl_certificate /etc/nginx/ssl/*.918178.xyz_918178.xyz/fullchain.cer;
    ssl_certificate_key /etc/nginx/ssl/*.918178.xyz_918178.xyz/private.key;
    error_page 497 =307 https://$host:$server_port$request_uri;  # http自动转https
    # QD 必须从根/开始
    location / {
        proxy_pass http://qd_qd;
    }
}
# MrDoc(必须要主路径,子路径功能有问题)
server {
    listen 8443 ssl;
    server_name mrdoc.918178.xyz;  # 监听域名
    ssl_certificate /etc/nginx/ssl/*.918178.xyz_918178.xyz/fullchain.cer;
    ssl_certificate_key /etc/nginx/ssl/*.918178.xyz_918178.xyz/private.key;
    error_page 497 =307 https://$host:$server_port$request_uri;  # http自动转https
    # MrDoc 必须从根/开始,不可从子路径开始,JS中有个/get_pro_doc_tree/请求会忽略子路径从根路径开始
    location / {
        proxy_connect_timeout 60;
        proxy_read_timeout 60;
        proxy_send_timeout 60;
        proxy_intercept_errors off;
        proxy_http_version 1.1;
        proxy_set_header Host $http_host;  # 客户端请求中的原始 Host 头的值(MrDoc必须如此)
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_pass http://MrDoc:10086/;  # 调用容器内服务,故端口也要是容器内对应端口
    }
}
# Matomo 网站统计
server {
    listen 8443 ssl;
    server_name matomo.918178.xyz;
    ssl_certificate /etc/nginx/ssl/*.918178.xyz_918178.xyz/fullchain.cer;
    ssl_certificate_key /etc/nginx/ssl/*.918178.xyz_918178.xyz/private.key;
    error_page 497 =307 https://$host:$server_port$request_uri;
    # Matomo 必须从根/开始(子路径有些图片无法加载)
    location / {
        proxy_connect_timeout 60;
        proxy_read_timeout 60;
        proxy_send_timeout 60;
        proxy_intercept_errors off;
        proxy_http_version 1.1;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_pass http://matomo-app-1;
    }
}
# # OpenVPN(页面加载前进行验证)
# server {
#     listen 8443 ssl;  # ⭐反向代理端口,要和容器一致
#     server_name openvpn.918178.xyz;  # ⭐域名

#     # 设置用户认证
#     auth_basic "使用前请登录";  # 提示
#     auth_basic_user_file /etc/nginx/.passwd;  # ⭐存放密码位置

#     # SSL/TLS证书和私钥路径
#     ssl_certificate /etc/nginx/ssl/*.918178.xyz_918178.xyz/fullchain.cer;
#     ssl_certificate_key /etc/nginx/ssl/*.918178.xyz_918178.xyz/private.key;
#     error_page 497 =307 https://$host:$server_port$request_uri;  # http自动跳转https
#     # 遇到 HTTP 请求发到 HTTPS 时会产生的内部错误代码 497
#     # 返回307临时重定向(客户端应保持请求方法不变向新的地址发出请求)

#     # 设置处理请求的 URI 路径为根路径
#     location / {
#         proxy_http_version 1.1;  # 设置代理服务器与后端服务器之间使用的 HTTP 协议版本为 1.1
#         proxy_pass http://openvpn-app-1:8080;  # ⭐连接的内部服务,可以直接写容器
#         proxy_pass_header Server;  # 设置要传递给后端服务器的请求头字段
#         proxy_set_header Connection "";   # 设置传递给后端服务器的请求头中的 Connection 字段为空,保持长连接
#         proxy_set_header Host $http_host;  # 设置传递给后端服务器的请求头中的 Host 字段为客户端请求的主机头
#         proxy_set_header X-Forwarded-Proto $scheme;  # 设置传递给后端服务器的请求头中的 X-Forwarded-Proto 字段,表示客户端连接时使用的协议
#         proxy_set_header X-Real-IP $remote_addr;  # 设置传递给后端服务器的请求头中的 X-Real-IP 字段,表示客户端的真实 IP 地址
#         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 设置传递给后端服务器的请求头中的 X-Forwarded-For 字段,表示客户端的原始 IP 地址
#         proxy_buffering off;  # 关闭代理缓冲,确保及时传递后端服务器的数据给客户端
#         proxy_cache off;  # 禁用代理缓存,确保每次请求都直接从后端服务器获取最新的数据
#         send_timeout 600;  # 设置向客户端发送响应的超时时间为 600 秒
#         proxy_connect_timeout 600;  # 设置与后端服务器建立连接的超时时间为 600 秒
#         proxy_send_timeout 600;  # 设置向后端服务器发送请求的超时时间为 600 秒
#         proxy_read_timeout 600;  # 设置从后端服务器读取响应的超时时间为 600 秒
#     }
# }
```

## 常见问题
```bash
# 站点列表中空的，添加站点无法正常添加
  # 可尝试更换其它版本如 uozi/nginx-ui:v2.0.0-beta.35
  # 也可在该文件夹下创建一个空文件(无后缀)，在站点列表下就可以编辑了
    .../nginx/sites-available/<配置名称>
```

## Web终端使用(容器部署)
下列方案任选
- 直接修改 [Web 终端的启动命令](https://nginxui.com/zh_CN/guide/config-server.html#startcmd)
```
nano .../nginx-ui/app.ini
  StartCmd=bash  # login 改成 bash
```
- 修改 sshd 账户密码
```bash
# 先进入容器设置账户密码
passwd sshd  # 设置密码，然后使用该账户进行登录
```