当前位置:首页 > 技术文章 > 正文内容

强烈推荐一个非常好的 NGINX WEB UI 可视化用户界面

arlanguage5个月前 (12-09)技术文章48

在线预览

网址:https://demo.nginxui.com

  • 用户名:admin
  • 密码:admin

特色

  • 在线查看服务器 CPU、内存、系统负载、磁盘使用率等指标
  • 在线 ChatGPT 助理
  • 一键申请和自动续签 Let's encrypt 证书
  • 在线编辑 Nginx 配置文件,编辑器支持 Nginx 配置语法高亮
  • 在线查看 Nginx 日志
  • 使用 Go 和 Vue 开发,发行版本为单个可执行的二进制文件
  • 保存配置后自动测试配置文件并重载 Nginx
  • 基于网页浏览器的高级命令行终端
  • 支持深色模式
  • 自适应网页设计

构建基于

  • The Go Programming Language
  • Gin Web Framework
  • GORM
  • Vue 3
  • Vite
  • TypeScript
  • Ant Design Vue
  • vue3-gettext
  • vue3-ace-editor
  • Gonginx

入门指南

使用前注意

Nginx UI 遵循 Debian 的网页服务器配置文件标准。创建的网站配置文件将会放置于 Nginx 配置文件夹(自动检测)下的 sites-available 中,启用后的网站将会创建一份配置文件软连接到 sites-enabled 文件夹。您可能需要提前调整配置文件的组织方式。

对于非 Debian (及 Ubuntu) 系统,您可能需要将 nginx.conf 配置文件中的内容修改为如下所示的 Debian 风格。

http {
	# ...
	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
}

更多信息请参阅:debian/conf/nginx.conf

安装

Nginx UI 可在以下平台中使用:

  • macOS 11 Big Sur 及之后版本(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
  • FreeBSD
  • OpenBSD
  • Dragonfly BSD
  • Openwrt

您可以在 最新发行 (latest release) 中下载最新版本,或使用 Linux 安装脚本。

使用方法

第一次运行 Nginx UI 时,请在浏览器中访问 http://<your_server_ip>:<listen_port>/install 完成后续配置。

通过执行文件运行

在终端中运行 Nginx UI

nginx-ui -config app.ini

在终端使用 Control+C 退出 Nginx UI。

在后台运行 Nginx UI

nohup ./nginx-ui -config app.ini &

使用以下命令停止 Nginx UI。

kill -9 $(ps -aux | grep nginx-ui | grep -v grep | awk '{print $2}')

使用 Systemd

如果你使用的是Linux 安装脚本,Nginx UI 将作为 nginx-ui 服务安装在 systemd 中。请使用 systemctl 命令控制。

启动 Nginx UI

systemctl start nginx-ui

停止 Nginx UI

systemctl stop nginx-ui

重启 Nginx UI

systemctl restart nginx-ui

使用 Docker

您可以在 docker 中使用我们提供的 uozi/nginx-ui:latest 镜像,此镜像基于 nginx:latest 构建。您可以直接将其监听到 80 和 443 端口以取代宿主机上的 Nginx。

注意:映射到 /etc/nginx 的文件夹应该为一个空目录。

注意

  1. 首次使用时,映射到 /etc/nginx 的目录必须为空文件夹。
  2. 如果你想要托管静态文件,可以直接将文件夹映射入容器中。

Docker 部署示例

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 \
  -p 8080:80 -p 8443:443 \
  uozi/nginx-ui:latest

手动构建

对于没有官方构建版本的平台,可以尝试手动构建。

依赖

  • Make
  • Golang 1.22+
  • node.js 21+
  • npx browserslist@latest --update-db

构建前端

请在 app 目录中执行以下命令。

pnpm install
pnpm build

构建后端

请先完成前端编译,再回到项目的根目录执行以下命令。

go build -tags=jsoniter -ldflags "$LD_FLAGS -X 'github.com/0xJacky/Nginx-UI/settings.buildTime=$(date +%s)'" -o nginx-ui -v main.go

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,如果出现端口冲突请进入 /usr/local/etc/nginx-ui/app.ini 修改,并使用 systemctl restart nginx-ui 重启 Nginx UI 服务。

卸载 Nginx UI 但保留配置和数据库文件

bash <(curl -L -s https://mirror.ghproxy.com/https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) remove

更多用法

bash <(curl -L -s https://mirror.ghproxy.com/https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) help

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/;
    }
}

扫描二维码推送至手机访问。

版权声明:本文由AR编程网发布,如需转载请注明出处。

本文链接:http://www.arlanguage.com/post/23.html

分享给朋友:

“强烈推荐一个非常好的 NGINX WEB UI 可视化用户界面” 的相关文章

提升网站性能开发的10个技巧 提升网站性能开发的10个技巧是什么

随着网络的高速发展,网络性能的持续提高成为能否在芸芸App中脱颖而出的关键。高度联结的世界意味着用户对网络体验提出了更严苛的要求。假如你的网站不能做到快速响应,又或你的App存在延迟,用户很快就会移情你的竞争对手。以下为大家总结10条有关性能提升的经验,以供参考:1. 采用反向代理服务器(Rever...

nginx-UrlRewrite 实现URL重写转发

URL重写在前后端分离的开发模式中,会遇到这样一个需求:前端通过特定路由前缀来访问后端接口,例如:http://localhost/api/getUser,这里 api 即是每一个前端 request 所多加的前缀。nginx 需要把http://localhost/api/getUser 转换成后...

学习Java需要掌握哪些技能?

想要找到Java工程师的工作,必须具备Java岗位要求的相关技能,应该有夯实的Java基础知识,熟练掌握、JavaSE开发、JavaWEB与数据库高级编程、企业级框架、大型企业级项目实战等相关的开发技能。01 Java基础知识Java入门、变量,基本表达式、流程分支、单层循环、双层循环、数组入门等。...

路由虚拟服务器nginx转发400问题

背景:关于网络和硬件:旧服务基本是在公有云服务器或提供公网IP的服务器操作的。关于服务:后端jar服务运行,前端vue生成的包并通过nginx转发。以前的nginx配置文件:location / { root /data/project/web/; try...

IT运维面试问题总结-运维(Ceph、Docker、Apache、Nginx等

木二 YP小站运维工具简述Ansible及其优势?Ansible是一款极其简单的开源的自动化运维工具,基于Python开发,集合了众多运维工具(puppet, cfengine, chef, func, fabric)的优点。实现了批量系统配置,批量程序部署,批量运行命令等功能。同时Ansible是...

银河麒麟V10服务版(FT2000/4 CPU)部署Nginx笔记

将centos或windows系统上运行的系统迁移到银河麒麟V10服务版系统上比较容易,如果您的技术路线是(springboot+vue+mysql)无其他需要操作系统支持的功能,只需要将相关软件环境在操作系统上重新编译运行即可。以麒麟V10 服务版飞腾CPU为例,前后端分离,vue编译了前端代码后...