# krm-frontend

**Repository Path**: dawn_chuang/krm-frontend

## Basic Information

- **Project Name**: krm-frontend
- **Description**: k8s可视化前端项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-10-06
- **Last Updated**: 2025-05-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基本依赖安装

```shell
npm install pinia axios vue-router@4 element-plus @element-plus/icons-vue less --save

# 代码格式化库
npm install js-yaml codemirror vue-codemirror @codemirror/language @codemirror/legacy-modes --save

# web ssh终端库
npm install xterm xterm-addon-fit xterm-addon-attach --save

# 网络可视化库
npm install vis-network --save

# 可视化图表库
# 解决报错：Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See
# 需要安装 npm install -S default-passive-events
npm install echarts --save

# 图标库
npm install @vicons/fluent @vicons/ionicons4 @vicons/ionicons5 @vicons/antd @vicons/material @vicons/fa @vicons/tabler @vicons/carbon @vicons/utils --save
```
# 部署
```
npm run build
```
# nginx配置
```nginx
server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;
    location / {                      
       root   /etc/nginx/html;
    }

    location /api {
        proxy_pass http://kubeui-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   /etc/nginx/html;
    }
}
```
# DOCKER镜像
```dockerfile
FROM registry.cn-shanghai.aliyuncs.com/rushbi/tengine-vts:1.1
COPY ./dist /etc/nginx/html
COPY ./default.conf /etc/nginx/conf.d/
```

# K8S部署yaml
```yaml
cat<<EOF | kubectl -n kubeui apply -f -
apiVersion: v1
kind: Service
metadata:
  name: kubeui-frontend
  labels:
    app: kubeui-frontend
spec:
  selector:
    app: kubeui-frontend
  ports:
  - name: http
    port: 80
    protocol: TCP
    targetPort: 80
  sessionAffinity: None
  type: NodePort        # 如果通过ingress暴露 改为ClusterIP
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: kubeui-frontend
  labels:
    app: kubeui-frontend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: kubeui-frontend
  template:
    metadata:
      labels:
        app: kubeui-frontend
    spec:
      restartPolicy: Always
      containers:
      - name: kubeui-frontend
        image: registry.cn-shanghai.aliyuncs.com/rushbi/kubeui-frontend:v1
        imagePullPolicy: Always
        ports:
        - name: web
          containerPort: 80
          protocol: TCP
        resources:
          requests:
            cpu: 100m
            memory: 256Mi
          limits:
            cpu: 1
            memory: 512Mi
        env:
        - name: TZ
          value: Asia/Shanghai
        - name: LANG
          value: C.UTF-8
        livenessProbe:
          initialDelaySeconds: 10
          periodSeconds: 10
          successThreshold: 1
          failureThreshold: 2
          timeoutSeconds: 2
          tcpSocket:
            port: 80
        readinessProbe:
          initialDelaySeconds: 10
          periodSeconds: 10
          successThreshold: 1
          failureThreshold: 2
          timeoutSeconds: 2
          tcpSocket:
            port: 80
  strategy:
    rollingUpdate:
      maxSurge: 1
      maxUnavailable: 0
    type: RollingUpdate
EOF
```

# 配置域名
```yaml
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: kubeui
  namespace: kubeui
spec:
  ingressClassName: nginx
  rules:
  - host: demo.g8s.me
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: kubeui-frontend
            port:
              number: 80
```