大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

什么是 Nginx UI

Nginx UI 是一个基于 Web 的管理界面，旨在简化 Nginx 服务器的管理和配置。

Yet another Nginx Web UI, developed by 0xJacky and Hintay.

Nginx UI 提供实时服务器统计数据、人工智能支持的 ChatGPT 帮助、一键部署、Let's Encrypt 证书自动续订以及用户友好的网站配置编辑工具。 此外，Nginx UI 还提供在线访问 Nginx 日志、自动测试和重新加载配置文件、Web 终端、深色模式和响应式网页设计等功能。 同时，Nginx UI 使用 Go 和 Vue 构建，可确保管理 Nginx 服务器的无缝且高效的体验。

总体来看，Nginx UI 的典型特征可以概括为以下几点：

• 在线统计 CPU 使用率、内存使用率、平均负载、磁盘使用率等服务器指标
• 在线聊天 GPT 助手，即直接在平台内从 AI 驱动的 ChatGPT 获得帮助
• 一键部署和自动续订 Let's Encrypt 证书
• 使用自行设计的 NgxConfigEditor（用户友好的 nginx 配置块编辑器）或支持突出显示 nginx 配置语法的 Ace 代码编辑器在线编辑网站配置
• 在线查看 Nginx 日志
• 发行版是用 Go 和 Vue 编写的，是一个可执行的二进制文件
• 保存配置后自动测试配置文件并重新加载 nginx
• Web 终端、支持深色模式、响应式网页设计

目前 Nginx UI 在 Github 通过 AGPL-3.0 协议开源，有超过 1.3k 的 star，是一个值得关注的前端开源项目。

如何使用 Nginx UI

准备工作

Nginx UI 遵循 Debian Web 服务器配置文件标准，创建的站点配置文件将放置在 Nginx 配置文件夹（自动检测到）下的 sites-available 文件夹中。 已启用站点的配置文件将创建指向已启用站点的文件夹的软链接，开发者可能需要调整配置文件的组织方式。

Debian 是一种流行且免费提供的计算机操作系统 (OS)，使用类 Unix 内核（通常是 Linux）以及其他程序组件，其中许多组件来自 GNU 项目。 Debian 可以通过互联网下载，或者支付少量费用，通过 CD、DVD、蓝光光盘或 USB 闪存驱动器获得。

对于非 Debian（和 Ubuntu）系统，可能需要将 nginx.conf 配置文件的内容更改为 Debian 风格，如下所示。

http {
	tcp_nopush on;
	types_hash_max_size 2048;
	include /etc/nginx/mime.types;
	default_type application/octet-stream;
	// SSL 配置
	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

  // Logging Settings
	access_log /var/log/nginx/access.log;

  // Gzip Settings配置
	gzip on;
	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
	// 虚拟主机配置
	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
}

安装

Nginx UI 可在以下平台上使用：

• Mac OS X 10.10 Yosemite 及更高版本 (amd64 / arm64)
• Linux 2.6.23 及更高版本 (x86/amd64/arm64/armv5/armv6/armv7) 包括但不限于 Debian 7 / 8、Ubuntu 12.04 / 14.04 及更高版本、CentOS 6 / 7、Arch Linux
• 自由 BSD、开放 BSD、Dragonfly BSD、Openwrt 等

可以访问最新版本来下载最新发行版，或者仅使用 Linux 的安装脚本。

bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) install
// 或者
bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) remove
// 更多配置可以使用 help 指令
bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) help

Nginx UI 也可以在 Docker 环境中部署，docker 镜像 uozi/nginx-ui:latest 是基于最新的 nginx 镜像，可以用来替换主机上的 Nginx。通过将容器的 80 和 443 端口发布到主机从而实现轻松切换。

docker run -dit \
  --name=nginx-ui \
  --restart=always \
  -e TZ=Asia/Shanghai \
  -v /mnt/user/appdata/nginx:/etc/nginx \
  -v /mnt/user/appdata/nginx-ui:/etc/nginx-ui \
  -v /var/www:/var/www \
  -p 8080:80 -p 8443:443 \
  uozi/nginx-ui:latest

在以上示例中，容器的 8080 端口和 8443 端口分别映射到主机的 80 端口和 443 端口，可以需要通过打开 http://<your_server_ip>:8080 来访问 Nginx UI。

使用

在 Nginx UI 的第一次运行时，请在浏览器中访问 http://<your_server_ip>:<listen_port>/install 完成后续配置。运行下面命令可以在终端运行 Nginx UI：

nginx-ui -config app.ini
// 在后台运行 Nginx UI
nohup ./nginx-ui -config app.ini &
// 使用以下命令停止 Nginx UI。
kill -9 $(ps -aux | grep nginx-ui | grep -v grep | awk '{print $2}')

下面是一个 Nginx 反向代理配置示例：

server {
    listen          80;
    listen          [::]:80;

    server_name     <your_server_name>;
    rewrite ^(.*)$  https://$host$1 permanent;
}

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {
    listen  443       ssl;
    listen  [::]:443  ssl;
    http2   on;

    server_name         <your_server_name>;

    ssl_certificate     /path/to/ssl_cert;
    ssl_certificate_key /path/to/ssl_cert_key;

    location / {
        proxy_set_header    Host                $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_http_version  1.1;
        proxy_set_header    Upgrade             $http_upgrade;
        proxy_set_header    Connection          $connection_upgrade;
        proxy_pass          http://127.0.0.1:9000/;
    }
}

本文总结

本文主要和大家介绍 Nginx UI，其是一个基于 Web 的管理界面，旨在简化 Nginx 服务器的管理和配置。因为篇幅问题，关于 Nginx UI 只是做了一个简短的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。

参考资料

https://github.com/0xJacky/nginx-ui

https://salsa.debian.org/nginx-team/nginx/-/blob/master/debian/conf/nginx.conf#L59-L60

https://nginxui.com/guide/getting-started.html

https://www.educba.com/nginx-gui/