# krm-front

**Repository Path**: GoProgect/krm-front

## Basic Information

- **Project Name**: krm-front
- **Description**: 分享技术，共同学习与进步
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-06-25
- **Last Updated**: 2025-06-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# KRM Kubernetes管理平台

## 🚀 项目简介
KRM Kubernetes管理平台是**唐唐**的开源作品，一个基于Kubernetes深度二次开发的企业级容器管理平台。本平台在原生K8s基础上提供了增强的可视化操作界面、智能化的资源调度和简化的运维管理体验，帮助企业快速构建稳定高效的云原生基础设施。

### ✨ 核心特性
- **Kubernetes深度集成**：基于原生K8s API扩展开发，100%兼容标准K8s生态
- **可视化编排**：提供直观的YAML编辑器和图形化部署向导
- **智能运维**：集成监控告警、日志分析和自动化运维工具链（待开发）
- **多集群管理**：统一管控多个K8s集群，实现全局资源调度
- **安全增强**：基于RBAC的细粒度权限控制和安全审计（待开发）
- **应用商店**：预置常见中间件和应用模板，一键部署（待开发）
- **DevOps流水线**：内置CI/CD工具链，实现应用全生命周期管理（待开发）

## 🛠️ 技术栈
| 技术领域       | 选用技术               |
|----------------|-----------------------|
| 容器编排       | Kubernetes            |
| 前端框架       | Vue 3                 |
| 构建工具       | Vite 4                |
| UI组件库       | Element Plus          |
| 状态管理       | Pinia                 |
| 路由管理       | Vue Router 4          |
| HTTP客户端     | Axios                 |
| 数据可视化     | ECharts               |
| 代码编辑器     | CodeMirror            |
| 终端模拟       | xterm                 |
| 特效支持       | tsparticles           |

## 📁 项目结构
```bash
src/
├── api/            # API请求封装
├── assets/         # 静态资源
├── components/     # 公共组件库
├── config/         # 应用配置
├── env/            # 环境变量配置
├── router/         # 路由配置
├── store/          # 状态管理(Pinia)
├── utils/          # 工具函数库
├── views/          # 页面视图组件
├── App.vue         # 根组件
├── main.js         # 应用入口
└── style.css       # 全局样式
```

## 🛠️ 开发指南

### 环境准备
- Node.js v16+
- npm 8+ 或 pnpm 7+

### 核心依赖安装
```bash
# 基础框架
npm install vue@3
npm install vue-router@4
npm install pinia
npm install axios

# UI组件库
npm install element-plus
npm install @element-plus/icons-vue

# 开发工具
npm install vite@4
npm install @vitejs/plugin-vue

# 可视化图表
npm install echarts
npm install vue-echarts

# 编辑器与终端
npm install codemirror
npm install xterm

# 特效支持
npm install tsparticles
npm install tsparticles-slim

# Kubernetes客户端
npm install @kubernetes/client-node
```

### 开发脚本
| 命令              | 描述                     |
|-------------------|-------------------------|
| `npm run dev`     | 启动开发服务器(dev环境)  |
| `npm run sit`     | 启动开发服务器(sit环境)   |
| `npm run build`   | 构建生产环境包           |
| `npm run preview` | 预览生产构建             |

## 🚢 部署指南

### 1. 构建生产包
```bash
npm run build
```

### 2. Docker镜像打包

#### default.conf
```nginx
server { 
    listen 80;
    listen [::]:80;
    server_name localhost;
    location / {
        root /usr/share/nginx/html;
    }
    location /api {
        proxy_pass http://krm-backend:8080/api;
        proxy_set_header Host $http_host;
        proxy_http_version 1.1;
        proxy_connect_timeout 5s;
        proxy_read_timeout 60s;
        proxy_send_timeout 30s;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "connection_upgrade";
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}
```

#### nginx.conf
```nginx
user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;
    map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      close;
    }

    sendfile        on;
    keepalive_timeout  65;
    include /etc/nginx/conf.d/*.conf;
}
```

#### Dockerfile
```dockerfile
FROM registry.cn-hangzhou.aliyuncs.com/rui_yang/nginx:latest
COPY ./dist/ /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/nginx.conf
COPY ./default.conf /etc/nginx/conf.d/
```

#### 构建并推送镜像
```bash
docker build -t registry.cn-hangzhou.aliyuncs.com/rui_yang/krm_go_front:v1 .
docker push registry.cn-hangzhou.aliyuncs.com/rui_yang/krm_go_front:v1
```

### 3. Kubernetes部署

#### krm-frontend.yaml
```yaml
apiVersion: v1
kind: Service
metadata:
  labels:
    app: krm-frontend
  name: krm-frontend
spec:
  ports:
  - name: http
    port: 80
    protocol: TCP
    targetPort: 80
  selector:
    app: krm-frontend
  sessionAffinity: None
  type: NodePort
---
apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: krm-frontend
  name: krm-frontend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: krm-frontend
  strategy:
    rollingUpdate:
      maxSurge: 1
      maxUnavailable: 0
    type: RollingUpdate
  template:
    metadata:
      labels:
        app: krm-frontend
    spec:
      containers:
      - env:
        - name: TZ
          value: Asia/Shanghai
        - name: LANG
          value: C.UTF-8
        image: registry.cn-hangzhou.aliyuncs.com/rui_yang/krm_go_front:v1
        lifecycle: {}
        livenessProbe:
          failureThreshold: 2
          initialDelaySeconds: 10
          periodSeconds: 10
          successThreshold: 1
          tcpSocket:
            port: 80
          timeoutSeconds: 2
        name: front
        ports:
        - containerPort: 80
          name: web
          protocol: TCP
        readinessProbe:
          failureThreshold: 2
          initialDelaySeconds: 10
          periodSeconds: 10
          successThreshold: 1
          tcpSocket:
            port: 80
          timeoutSeconds: 2
        resources:
          limits:
            cpu: 1
            memory: 512Mi
          requests:
            cpu: 100m
            memory: 256Mi
      restartPolicy: Always
```

#### 部署到Kubernetes
```bash
kubectl create ns krm
kubectl apply -f krm-frontend.yaml -n krm
```

## 📄 开源协议
本项目采用 [MIT License](LICENSE) 开源协议。