1. Project Overview

Nginx WebUI

A Nginx management Web interface based on FastAPI and Vue 3 , providing features such as multi-version Nginx management, configuration management, certificate management, file management, static package deployment, logging and auditing, and system monitoring.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Functional characteristics

• Nginx Management
• ✅ Online editing, testing, and reloading of Nginx configurations
• ✅ Multi-version Nginx management (download, compile, and switch versions)
• ✅ Configuration backup and restoration (retains multiple recent backups)
• Configuration and Files
• ✅ Global configuration management (application settings, Nginx paths, etc.)
• ✅ File management (upload, edit, and delete Nginx-related files)
• ✅ Static package management (package and deploy static resource bundles)
• Certificates and Security
• ✅ Certificate management (supports automatic certificate issuance via Certbot and manual certificate uploads)
• ✅ JWT authentication and session management
• ✅ User management and basic permission control
• Logs and Auditing
• ✅ Online viewing of Nginx access logs and error logs
• ✅ Operation audit logs (recording key operation activities)
• System and Statistics
• ✅ System information and resource monitoring
• ✅ Access and operation statistics
• Integration and Deployment
• ✅ Git repository synchronization (after configuring credentials, push the current Nginx configuration with one click)
• ✅ Docker containerized deployment and one-click packaging scripts

5. Tech Stack

Tech Stack

Backend

• FastAPI
• SQLAlchemy (SQLite)
• Pydantic
• Certbot

Frontend

• Vue 3 + Composition API
• Vite
• Element Plus
• Monaco Editor

Project Structure


nginx-webui/
├── backend/              # FastAPI Backend
│   ├── app/              # Application code (routes, models, business logic, utilities, etc.)
│   ├── config.yaml       # Backend configuration file
│   └── default-nginx/    # Built-in default Nginx source code/configuration package
├── frontend/             # Vue 3 Frontend
│   └── src/              # Frontend source code (views, components, routes, state, etc.)
├── data/                 # Runtime data directory (container/local mounts)
│   ├── backend/          # Backend data (such as SQLite databases)
│   ├── logs/             # Application/proxy logs
│   ├── backups/          # Nginx configuration backups
│   └── nginx/            # Nginx multi-version management data
│       ├── versions/     # Nginx installation directories for each version (including conf/html/logs/sbin）
│       ├── build/        # Temporary directory for downloading and compiling Nginx source code
│       └── build_logs/   # Compilation logs for each version
├── scripts/              # Build and startup scripts (frontend, backend, local/containers)
├── docker-compose.yml    # Docker orchestration file
├── Dockerfile            # Application image build file
├── QUICKSTART.md         # Local development/debugging quick-start guide
└── README.md

Directory explanation

• backend/
  Backend service code and configuration, including APIs for authentication, user management, Nginx management, certificates, logs, auditing, and more
• frontend/
  Frontend single-page application containing pages for the dashboard, Nginx management, configuration, files, certificates, Git synchronization, users, auditing, logs, static packages, system management, and more
• data/
  Stores all runtime-generated and downloaded data, including: persistent backend data such as databases (backend/), log files (logs/), configuration backups (backups/), Nginx multi-version runtime data (nginx/versions/), and Nginx source build directories and compilation logs (nginx/build/, nginx/build_logs/)
• scripts/
  One-click startup, restart, packaging, cleanup, and other utility scripts

Quick Start

Development environment

Backend Development


cd backend
pip install -r requirements.txt
python3 -m uvicorn app.main:app --reload --host 127.0.0.1 --port 8000

Or use the script (from the project root directory):

bash scripts/start-backend.sh

Frontend Development


cd frontend
npm install          # Dependencies must be installed on the first run
npm run dev          # Runs on by default http://localhost:3001

Or use the script:

bash scripts/start-frontend.sh

Docker Deployment

Build the Image

bash scripts/package.sh

Run Containers


docker-compose up -d

Or use Docker commands:

docker run -d \
  -p 80:80 \
  -p 443:443 \
  -p 8000:8000 \
  -v $(pwd)/nginx-webui/data:/app/data \
  --name nginx-webui \
  registry.cn-shanghai.aliyuncs.com/numen/nginx-webui:latest

Configuration Instructions

The configuration file is located at backend/config.yaml and supports the following settings:

• Nginx-related paths
• Application port and host
• Backup policies
• SSL certificate paths

Configuration can also be overridden using environment variables.

Git Configuration Synchronization

1. Log in to the frontend, navigate to the Git Configuration Synchronization page from the left-hand menu, and fill in the following fields: Project Name (determines the data/git/<Project Name>/ directory; the current root directory name is recommended by default), Repository URL (HTTPS is recommended), Target Branch (default: main), Username and Password (credentials are stored only in the backend database and will never be displayed)
2. After saving, click "Sync Now". The system will: Organize the local repository using the specified project name (or the default value if left blank), Export the currently active nginx.conf to the data/git/<Project Name>/ directory, Automatically execute git add/commit/push to push changes to the remote repository
3. The sync status (Success/Failed/No Changes) will be displayed in the card, along with the time and message of the most recent sync.

Note: The first sync will clone the repository into data/git. Make sure the container or host machine has network access to the target Git service.

Default Account

• Username: admin
• Password: admin

Please change your password immediately after your first login!