Giao Diện Quản Trị Nginx Trực Quan với Nginx UI Kết Hợp Docker

Giao Diện Quản Trị Nginx Trực Quan với Nginx UI Kết Hợp Docker

July 10, 2025 0 By Nam Vu

1. Nginx UI Là Gì?

Nginx UI là một giao diện người dùng web mã nguồn mở được phát triển để đơn giản hóa quá trình cấu hình và giám sát máy chủ web Nginx. Thay vì phải thao tác với các file cấu hình .conf phức tạp trong terminal, Nginx UI cho phép người dùng thực hiện các tác vụ như thêm virtual host, reload cấu hình, theo dõi log, quản lý upstream hay SSL một cách trực quan ngay trên trình duyệt.

Công cụ này đặc biệt phù hợp trong môi trường DevOps hiện đại, nơi các hệ thống thường được đóng gói trong container (Docker) và triển khai liên tục.

2. Lợi Ích Khi Sử Dụng Nginx UI

  • Giao diện thân thiện người dùng: Không cần kinh nghiệm với file cấu hình Nginx, bạn vẫn có thể tạo site, reverse proxy, cấu hình SSL bằng vài cú click.
  • Quản lý tập trung: Tạo và quản lý nhiều domain/nghost từ một dashboard duy nhất.
  • Theo dõi log dễ dàng: Trình xem log realtime cho access log và error log.
  • Khả năng tích hợp SSL tự động: Hỗ trợ Let’s Encrypt để tạo chứng chỉ miễn phí.
  • Dễ dàng cài đặt: Có thể khởi chạy nhanh thông qua Docker.

3. Kiến Trúc và Công Nghệ

  • Backend: Node.js với Express, xử lý API và thao tác với hệ thống tệp Nginx.
  • Frontend: React hoặc Vue tùy theo phiên bản fork.
  • Nginx: Cần được cài sẵn và cấu hình chạy tại máy chủ (host) hoặc container chính.
  • Docker: Được sử dụng để deploy toàn bộ UI và môi trường backend chỉ bằng một lệnh docker-compose.

4. Hướng Dẫn Cài Đặt Nginx UI Bằng Docker

Bước 1: Cài đặt Docker và Docker Compose

Nếu VPS của bạn chưa có Docker:

sudo apt update && sudo apt install docker.io docker-compose -y
sudo systemctl enable docker

Bước 2: Clone Repository

git clone <https://github.com/sylabs/nginx-ui.git>
cd nginx-ui

Hoặc clone một bản fork nổi bật có hỗ trợ tính năng nâng cao:

git clone <https://github.com/nginxinc/nginx-admin.git>

Bước 3: Tạo File docker-compose.yml

version: "3.7"

services:
  nginx:
    image: nginx:latest
    container_name: nginx
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/conf.d:/etc/nginx/conf.d
      - ./nginx/html:/usr/share/nginx/html
      - ./nginx/log:/var/log/nginx
      - ./nginx/ssl:/etc/nginx/ssl

  nginx-ui:
    image: schachr/nginx-ui
    container_name: nginx-ui
    environment:
      - BASIC_AUTH_USER=admin
      - BASIC_AUTH_PASSWORD=admin
    volumes:
      - /etc/nginx:/etc/nginx
      - /var/log/nginx:/var/log/nginx
    ports:
      - "8080:8080"
    restart: unless-stopped

Bạn có thể tùy chỉnh thông tin đăng nhập tại biến môi trường BASIC_AUTH_USER và BASIC_AUTH_PASSWORD.

Bước 4: Khởi động dịch vụ

docker-compose up -d

Bước 5: Truy cập Nginx UI

Sau khi khởi động thành công, bạn có thể truy cập giao diện qua:

http://<YOUR_SERVER_IP>:8080

Đăng nhập bằng tài khoản admin / admin (hoặc tài khoản bạn cấu hình ở bước trên).

5. Một Số Tùy Chọn Bổ Sung

  • SSL: Mount thêm volume để chỉ định thư mục chứa chứng chỉ TLS/SSL.
  • Reverse Proxy: Kết hợp Nginx làm reverse proxy cho các container nội bộ khác.
  • Authentication nâng cao: Kết hợp với LDAP hoặc OAuth2 nếu cần bảo mật cao hơn.

Việc quản lý Nginx thông qua CLI đôi khi gây khó khăn với người mới hoặc các đội DevOps nhỏ. Nginx UI ra đời để giải quyết bài toán này, giúp cấu hình server trở nên nhanh chóng, trực quan mà vẫn giữ được sự linh hoạt. Khi kết hợp với Docker, việc triển khai Nginx UI càng trở nên đơn giản và dễ tái sử dụng.

Nếu bạn đang vận hành hệ thống sử dụng nhiều site hoặc proxy backend như Node.js, Java, .Net…, việc tích hợp Nginx UI sẽ giúp tiết kiệm thời gian và tránh sai sót cấu hình.

Tham khảo:

#ntechdevelopers