Master Nginx UI: Visual Management, Docker Install & Real-World Mall Deployment

Nginx is a popular web server; backend developers often edit its configuration with Vim. Nginx UI provides a visual management interface, making configuration easier.

Nginx UI Overview

Nginx UI is a new visual management tool for Nginx, currently with 4.4k+ stars on GitHub.

Server metrics monitoring: real‑time CPU, memory, load and disk usage.

Certificate management: one‑click SSL deployment and auto‑renewal.

Configuration management: online editing with syntax highlighting.

Log management: view Nginx logs online.

Dark mode: light and dark themes.

User management: login authentication and user administration.

Installation

Installing Nginx UI via Docker is convenient; it provides an Nginx service with UI pre‑installed.

docker pull uozi/nginx-ui:latest

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

After the container starts, access the UI at http://192.168.3.101 and register the first account.

Usage

The following demonstrates Nginx UI using the mall e‑commerce project.

The mall project is a SpringBoot3 + Vue e‑commerce system (60K GitHub stars) with a micro‑service architecture, Docker and K8s deployment, covering product, order, cart, permissions, coupons, membership, payment, etc.

Boot project: https://github.com/macrozheng/mall

Cloud project: https://github.com/macrozheng/mall-swarm

Tutorial site: https://www.macrozheng.com

Dashboard

After logging in, the dashboard shows server metrics such as CPU, network, and disk I/O.

Static Proxy

Static proxy configuration for the mall admin and front‑end sites.

Modify the local hosts file to map 192.168.3.101 to mall.macrozheng.com. 192.168.3.101 mall.macrozheng.com Deploy the admin backend: add a site, then add a location:

location /admin {
    alias /var/www/admin;
    index index.html index.htm;
}

Upload the built admin front‑end files to /mydata/nginx-ui/www and extract.

Access the admin UI at http://mall.macrozheng.com/admin/.

Deploy the front‑end shop: add a new location:

location /app {
    alias /var/www/app;
    index index.html index.htm;
}

Upload the built shop front‑end files to /mydata/nginx-ui/www and extract.

Access the shop UI at http://mall.macrozheng.com/app/.

Dynamic Proxy

Dynamic proxy for the mall backend API.

Update hosts to map 192.168.3.101 to api.macrozheng.com. 192.168.3.101 api.macrozheng.com Add a site with a location that proxies to the real API service:

location / {
    proxy_pass https://admin-api.macrozheng.com; # modify to actual service address
    index index.html index.htm;
}

The API is now reachable at http://api.macrozheng.com/swagger-ui/.

Other Features

Configuration management lets you edit Nginx configs without SSH.

Certificate list provides one‑click SSL deployment and renewal.

User management handles UI user accounts.

Theme toggle switches between dark and default themes.

Summary

This walkthrough shows how Nginx UI simplifies Nginx configuration, offering visual editing, SSL management, user authentication, and other handy functions for backend developers.