還在手寫Nginx配置？這款Nginx視覺化管理工具用起來夠方便！

macrozheng發表於2024-11-01
Nginx視覺化
Nginx是一款非常流行的Web伺服器，作為後端程式設計師我們會經常使用到它。在我們修改Nginx配置的時候，經常需要登入伺服器使用Vim編輯器來手寫配置。最近發現了一款Nginx視覺化管理工具Nginx UI，用起來非常方便，今天就以我的mall電商實戰專案部署為例，來聊聊它的使用。

Nginx UI簡介

Nginx UI 是一款全新的 Nginx 視覺化管理工具，旨在簡化 Nginx 伺服器的管理和配置，目前在Github上已有4.4k+Star。

Nginx UI主要包括如下功能：

  • 伺服器指標監控：能實時監控伺服器的CPU、記憶體、平均負載和磁碟的使用情況。
  • 證書功能：ssl證書一鍵部署和自動續期。
  • 配置管理：線上編輯Nginx配置：支援程式碼高亮顯示。
  • 日誌管理：Nginx日誌線上檢視。
  • 暗黑模式：帶有深色和淺色兩種主題模式。
  • 使用者管理：支援使用者登入認證和管理。

安裝

使用Docker來安裝Nginx UI是非常方便的，可以直接安裝一個帶Nginx UI的Nginx服務，連Nginx都省的安裝了。
  • 首先我們使用如下命令下載Nginx UI的Docker映象；
docker pull uozi/nginx-ui:latest
  • 然後使用如下命令啟動nginx-ui容器；
docker run -p 80:80 -p 443:443 --name=nginx-ui \
--restart=always \
-v /mydata/nginx-ui/ngetc:/etc/nginx \
-v /mydata/nginx-ui/uietc:/etc/nginx-ui \
-v /mydata/nginx-ui/www:/var/www \
-e TZ=Asia/Shanghai \
-dit uozi/nginx-ui:latest
  • 啟動成功後就可以透過瀏覽器訪問Nginx UI的頁面了，首次訪問需要註冊賬號，訪問路徑：http://192.168.3.101

使用

接下來就以我的mall電商實戰專案的部署為例，演示下Nginx UI的使用。

這裡簡單介紹下mall專案，mall專案是一套基於 SpringBoot3 + Vue 的電商系統（Github標星60K），後端支援多模組和 2024最新微服務架構，採用Docker和K8S部署。包括前臺商城專案和後臺管理系統，能支援完整的訂單流程！涵蓋商品、訂單、購物車、許可權、優惠券、會員、支付等功能！

專案地址

  • Boot專案：https://github.com/macrozheng/mall
  • Cloud專案：https://github.com/macrozheng/mall-swarm
  • 教程網站：https://www.macrozheng.com

專案演示

儀表盤

登入成功之後，我們就可以訪問Nginx UI的儀表盤了，從儀表盤我們可以檢視到伺服器的各種指標資訊，比如CPU、網路、磁碟IO等。

靜態代理

這裡以mall專案的後臺管理系統和前臺商城系統的部署為例來演示下靜態代理功能。
  • 首先我們需要修改本機的Hosts檔案，部署Nginx UI的伺服器地址為192.168.3.101；
192.168.3.101 mall.macrozheng.com
  • 我們先來部署mall專案的後臺管理系統mall-admin-web，開啟新增站點功能，新增站點資訊；

  • 接下來在站點資訊中新增Location，新增的Location資訊如下；
location /admin {
    alias  /var/www/admin;
    index  index.html index.htm;
}

  • 之後把打包好的mall後臺管理系統前端程式碼上傳到伺服器的/mydata/nginx-ui/www目錄下並解壓；

  • 之後就能正常訪問到mall專案的後臺管理系統了，訪問地址：http://mall.macrozheng.com/admin/

  • 接下來我們再來部署mall專案的前臺商城系統mall-app-web，修改之前的站點配置，再新增一個新的Location儲存即可；
location /app {
    alias  /var/www/app;
    index  index.html index.htm;
}

  • 之後把打包好的mall前臺商城系統程式碼上傳到伺服器的/mydata/nginx-ui/www目錄下並解壓；

  • 之後就能正常訪問到mall專案的前臺商城系統了，訪問地址：http://mall.macrozheng.com/app/

動態代理

接下來以mall專案的後端API為例來演示下動態代理功能。
  • 我們需要修改本機的Hosts檔案；
192.168.3.101 api.macrozheng.com
  • 然後再新增一個站點；

  • 接下來新增一個Location，實現mall專案後端API服務的動態代理；
location / {
    proxy_pass   https://admin-api.macrozheng.com; #修改為代理服務地址
    index  index.html index.htm;
}

  • 之後就能正常訪問到mall專案後端API服務了，訪問地址：http://api.macrozheng.com/swagger-ui/

其他功能

  • 透過配置管理功能，可以很方便地修改Nginx中的配置，無需登入伺服器進行編輯；

  • 透過證書列表功能一鍵部署和自動續期SSL證書；

  • 透過使用者管理功能可以對Nginx UI的使用者進行管理；

  • 透過右上角的主題切換按鈕，Nginx UI可以在暗黑主題和預設主題之間切換。

總結

今天帶大家體驗了一波Nginx UI的基本使用，Nginx UI使用起來還是挺方便的，它解決了我們之前需要登入伺服器手寫Nginx配置的煩惱，同時提供了使用者登入認證等常用功能，感興趣的小夥伴可以試試！

專案地址

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

相關文章