Antrea UI 前端 Docker 镜像文档

1. 镜像概述和主要用途

Antrea UI 是 Antrea CNI 的 Web 用户界面，提供 Antrea 组件的运行时信息展示及 Traceflow 请求的图形化操作界面，未来将扩展更多功能。

本镜像为 Antrea UI 的前端实现，包含 React 应用的 Web 服务器，负责提供用户交互界面。需与后端镜像 antrea/antrea-ui-backend 配合使用，共同部署在以 Antrea 为 CNI 的 Kubernetes 集群中。

2. 核心功能和特性

2.1 核心功能

• Antrea 组件运行时信息展示：可视化呈现 Antrea Agent、Controller 等核心组件的状态、资源使用情况及网络拓扑关系。
• Traceflow 图形化界面：通过界面配置并发起 Traceflow 请求，直观展示网络数据包在集群中的路径及转发状态，辅助网络故障诊断。

2.2 特性

• 轻量级前端架构：基于 React 构建，资源占用低，响应迅速。
• 前后端分离设计：通过 HTTP/HTTPS 与后端服务通信，解耦界面与业务逻辑。
• 功能可扩展性：预留扩展接口，未来将支持更多 Antrea 功能的图形化操作（如策略管理、流量监控等）。

3. 使用场景和适用范围

3.1 适用环境

• Kubernetes 集群：需运行 Kubernetes 集群（版本兼容 Antrea 要求）。
• Antrea CNI：集群需以 Antrea 作为容器网络接口（CNI）。
• 后端依赖：必须部署 antrea/antrea-ui-backend 服务，前端通过后端获取数据。

3.2 典型场景

• 集群网络监控：管理员通过界面实时查看 Antrea 组件状态，快速定位异常。
• 网络故障诊断：通过 Traceflow 图形化界面配置源/目的 Pod、协议等参数，发起网络路径追踪，分析数据包转发问题。

4. 使用方法和配置说明

4.1 环境要求

• Kubernetes 集群（版本需与 Antrea 兼容，具体参考 Antrea 文档）。
• 集群已部署 Antrea CNI（确保 Antrea 组件正常运行）。
• 已部署 antrea/antrea-ui-backend 服务，且前端可通过服务名或 IP 访问后端接口。

4.2 部署方式

推荐在 Kubernetes 集群中通过 Deployment 部署，以下为基础部署示例（需根据实际集群环境调整）：

4.2.1 Kubernetes Deployment 配置

yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: antrea-ui-frontend
  namespace: kube-system  # 建议与 Antrea 组件同命名空间
spec:
  replicas: 1
  selector:
    matchLabels:
      app: antrea-ui-frontend
  template:
    metadata:
      labels:
        app: antrea-ui-frontend
    spec:
      containers:
      - name: antrea-ui-frontend
        image: antrea/antrea-ui-frontend:latest  # 替换为具体版本
        ports:
        - containerPort: 80  # 前端 Web 服务默认端口
        env:
        - name: REACT_APP_BACKEND_URL  # 后端服务地址（根据实际后端服务配置调整）
          value: "[***]"  # 假设后端服务名为 antrea-ui-backend，端口 8080
        resources:
          requests:
            cpu: 100m
            memory: 128Mi
          limits:
            cpu: 200m
            memory: 256Mi

4.2.2 服务暴露（Service）

为前端部署创建 Service，供集群内或外部访问：

yaml
apiVersion: v1
kind: Service
metadata:
  name: antrea-ui-frontend
  namespace: kube-system
spec:
  selector:
    app: antrea-ui-frontend
  ports:
  - port: 80
    targetPort: 80
  type: ClusterIP  # 如需外部访问，可改为 NodePort 或 Load***

4.3 配置说明

当前版本前端配置主要通过环境变量与后端交互，核心参数如下：

注：其他配置（如前端端口、TLS 证书等）可通过修改容器启动参数或挂载配置文件实现，具体参考 源码仓库。

5. 参考链接

• Antrea ***文档
• Antrea UI 源码仓库
• Antrea UI 后端镜像