Simplify Nginx Management: A Hands‑On Guide to Using Nginx UI with Docker

Nginx is a widely used web server, and backend developers often edit its configuration files manually. Nginx UI is a visual management tool that simplifies server configuration, monitoring, and user management. This article shows how to use Nginx UI with a SpringBoot‑Vue e‑commerce (mall) project.

Nginx UI Overview

Nginx UI is a new visual management tool for Nginx, currently with over

4.4k+

stars on GitHub.

Key features include:

Server metric monitoring (CPU, memory, load, disk usage)

One‑click SSL certificate deployment and auto‑renewal

Configuration management with syntax highlighting

Online Nginx log viewing

Dark and light theme modes

User authentication and management

Installation

Using Docker is the easiest way to install Nginx UI. Pull the Docker image and run a container that already includes Nginx.

<code>docker pull uozi/nginx-ui:latest</code>

<code>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</code>

After the container starts, access the UI via a browser (e.g.,

http://192.168.3.101

) and register the first account.

Usage with the Mall Project

The following sections demonstrate Nginx UI configuration for the mall e‑commerce project, which consists of a backend admin system and a frontend shop built with SpringBoot3 and Vue.

Dashboard

After logging in, the dashboard displays real‑time server metrics such as CPU usage, network traffic, and disk I/O.

Static Proxy

To serve the admin and shop frontends, configure static proxy locations.

Update the local

/etc/hosts

file:

<code>192.168.3.101 mall.macrozheng.com</code>

Add a site for the admin backend (

mall-admin-web

) and create a location:

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

Upload the built admin static files to

/mydata/nginx-ui/www

and unzip.

Access the admin UI at

http://mall.macrozheng.com/admin/

.

Repeat similar steps for the shop frontend (

mall-app-web

) with a location:

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

Upload the shop static files to the same

/mydata/nginx-ui/www

directory.

Access the shop at

http://mall.macrozheng.com/app/

.

Dynamic Proxy

To forward API requests to the backend services, configure a dynamic proxy.

Update

/etc/hosts

for the API domain:

<code>192.168.3.101 api.macrozheng.com</code>

Add a new site and create a location that proxies to the real API endpoint:

<code>location / {
    proxy_pass https://admin-api.macrozheng.com; # replace with actual service address
    index index.html index.htm;
}</code>

After saving, the API can be accessed at

http://api.macrozheng.com/swagger-ui/

.

Other Features

Configuration Management – edit Nginx configs directly from the UI without logging into the server.

Certificate List – one‑click SSL deployment and automatic renewal.

User Management – manage UI users and permissions.

Theme Switch – toggle between dark and light themes via the top‑right button.

Conclusion

The hands‑on demo shows that Nginx UI greatly simplifies Nginx configuration, eliminates the need to edit files via SSH, and provides useful features such as user authentication, SSL management, and real‑time monitoring.

Project Address

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