How to Deploy and Manage Nginx with the Visual Nginx UI Tool

What is Nginx UI?

Nginx UI is a visual management interface for Nginx that provides real‑time server monitoring, SSL certificate handling, configuration editing with syntax highlighting, log viewing, theme switching, and user authentication.

Key Features

Server metrics monitoring (CPU, memory, load average, disk usage)

One‑click SSL certificate deployment and automatic renewal

Online Nginx configuration editing with code highlighting

Online Nginx log viewer

Dark and light theme modes

User login authentication and management

Installation with Docker

Docker provides a quick way to run Nginx UI together with Nginx. docker pull uozi/nginx-ui:latest Start the container (adjust volume paths as needed):

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, open http://<em>your‑server‑ip</em> in a browser to register the first admin account.

Example: Mall E‑Commerce Project

Dashboard

The dashboard displays real‑time CPU usage, network traffic, disk I/O and other server statistics.

Static Proxy for Admin Backend

Map the host name in /etc/hosts: 192.168.3.101 mall.macrozheng.com Add a site in Nginx UI, upload the built admin static files to /mydata/nginx-ui/www, and create the following location block:

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

The admin console becomes reachable at http://mall.macrozheng.com/admin/.

Static Proxy for Frontend

Create a similar location for the storefront:

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

Upload the storefront files to the same /mydata/nginx-ui/www directory. The site is available at http://mall.macrozheng.com/app/.

Dynamic Proxy for Backend APIs

Map the API domain in /etc/hosts: 192.168.3.101 api.macrozheng.com Add a site with a proxy location:

location / {
    proxy_pass https://admin-api.macrozheng.com; /* replace with actual API endpoint */
    index index.html index.htm;
}

The API documentation can be accessed via http://api.macrozheng.com/swagger-ui/.

Additional Functions

Configuration Management panel allows editing Nginx directives without SSH.

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

User Management controls UI login credentials.

Theme toggle switches between dark and light modes.

Conclusion

Nginx UI offers a graphical interface for common Nginx tasks—including monitoring, SSL management, static and dynamic proxy configuration, and user authentication—thereby reducing the need for manual command‑line configuration edits.