How to Deploy a SpringBoot‑Vue E‑Commerce Site with Nginx UI and Docker

Nginx UI Overview

Nginx UI is a visual management tool for Nginx that simplifies server configuration, monitoring, SSL certificate handling, and user authentication.

Installation via Docker

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, open a browser at http://192.168.3.101 to register and log in.

Key Features

Server metrics monitoring (CPU, memory, load, disk).

One‑click SSL certificate deployment and renewal.

Configuration management with syntax highlighting.

Log viewing.

Dark/Light theme toggle.

User authentication and management.

Using Nginx UI with the Mall Project

The Mall project is a SpringBoot 3 + Vue e‑commerce system (≈60 K GitHub stars) that includes separate admin and front‑end modules and can be deployed with Docker or Kubernetes.

Static Proxy Configuration

Update the local hosts file to map the domain to the Nginx UI server: 192.168.3.101 mall.macrozheng.com Add a site in Nginx UI and set the following location for the admin backend:

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

Upload the built admin front‑end files to /mydata/nginx-ui/www and unzip. The admin interface is reachable at http://mall.macrozheng.com/admin/.

Front‑End Proxy

Add another location for the shop front‑end:

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

Upload the front‑end build to the same directory; the shop is accessible at http://mall.macrozheng.com/app/.

Dynamic Proxy Configuration

To proxy API requests, add a site with the following location (replace the target with the actual API address):

location / {
    proxy_pass https://admin-api.macrozheng.com;
    index index.html index.htm;
}

After saving, the API is reachable at http://api.macrozheng.com/swagger-ui/.

Additional Functionalities

Configuration management allows editing Nginx files through the UI without SSH.

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

User management enables administrators to control Nginx UI accounts.

Theme toggle switches between dark and light modes.

Project Repository

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