#  cloud native devops

**Repository Path**: pulin-clover/cloud-native-devops

## Basic Information

- **Project Name**:  cloud native devops
- **Description**: 一个基于 Go 语言构建的云原生应用交付与管理平台。核心目标是打造一套集应用构建、部署、运维于一体的开源解决方案，深度融合云原生与 DevOps 理念。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-10-11
- **Last Updated**: 2025-10-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <img width="320" src="https://k8s.pujiangganlin.icu/logo.png">
</p>


<p align="center">
  <a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
  </a>
  <a href="https://github.com/ElemeFE/element">
    <img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui">
  </a>
</p>



简体中文 | [English](./README.md) 

## 简介

本项目前端采用[vue-element-admin](https://panjiachen.github.io/vue-element-admin) 模板,目前实现了K8S集群的namespace,pod,service等资源的增删改查。实现资源的可视化页面。并在今后的更新中,加入更多的资源。最终打造一套集应用构建、部署、运维于一体的开源解决方案。

此外,本前端支持容器与K8S部署(见下)。

[vue-element-admin](https://panjiachen.github.io/vue-element-admin) 是一个后台前端解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element-ui](https://github.com/ElemeFE/element)实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

- [在线预览](https://panjiachen.github.io/vue-element-admin)
- [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
- [Donate](https://panjiachen.gitee.io/vue-element-admin-site/zh/donate)
- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 在线预览（国内用户可访问该地址）
- [国内访问文档](https://panjiachen.gitee.io/vue-element-admin-site/zh/) 文档（方便没翻墙的用户查看）
- 基础模板建议使用: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
- Typescript 版: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))
- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)

**`v4.1.0+`版本之后默认 master 分支将不支持国际化，有需要的请使用[i18n](https://github.com/PanJiaChen/vue-element-admin/tree/i18n)分支，它会和 master 保持同步更新**

**该项目不支持低版本浏览器(如 ie)，有需求请自行添加 polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**

**目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若发现问题，欢迎提[issue](https://github.com/PanJiaChen/vue-element-admin/issues/new)。若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0)，它不依赖 `vue-cli`**

## 前序准备

你需要在本地安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。本项目技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[vue-cli](https://github.com/vuejs/vue-cli) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element)，所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)进行模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。

<p align="center">
    <img width="320" src="https://k8s.pujiangganlin.icu/pod">
</p>


​    

### Flatlogic

<a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p>

## 功能

```
- 登录 / 注销

- 仪表盘

- kubenetes
  - Cluster
  - NameSpace
  - Pod
  - Deploy
  - Service
  - Cronjob
  - Deamonsets
  - Jobs

- kafka
 - 敬请期待

```

## 开发

```bash
# 克隆项目
git clone git@gitee.com:pulin-clover/cloud-native-devops-server.git

# 进入项目目录
cd cloud-native-devops

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev
```

浏览器访问 http://localhost:80

## 发布

```bash
# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod
```

## 容器发布

方式一:自己构建容器镜像

```bash
Dockerfile:
#容器构建
FROM nginx:lastest
WORKDIR /app
ENV SERVER_IP 10.0.0.231
ENV SERVER_PORT 8082
COPY dist /usr/share/nginx/html
COPY default.conf /etc/nginx/conf.d/default.conf
COPY entry.sh /entry.sh
RUN chmod +x /entry.sh
EXPOSE 80
CMD ["/bin/sh", "/entry.sh"]

#entry.sh脚本
#!/bin/sh
sed -i s#localhost:8082#${SERVER_IP}:${SERVER_PORT}# /etc/nginx/conf.d/defa
ult.conf
nginx -g "daemon off;"

#构建自定义镜像
docker build -t qian:v1 .
#运行容器
docker run -d --name qian -p 80:80 qian:v1
```

方式二:使用我的镜像

```sh
docker run -d --name qian -p 80:80 crpi-6sqk0nno0q2sokat-vpc.cn-beijing.personal.cr.aliyuncs.com/web_clover/vue_cloud-native-devops:v1
```

## K8S发布

```bash
#资源清单
frontend.yaml
apiVersion: v1
kind: ConfigMap
metadata:
  name: nginx-config
data:
  default.conf: |
    server {
      listen 80;
      server_name localhost;
      root /usr/share/nginx/html;
      index index.html;
      location / {
        try_files $uri $uri/ /index.html;
      }
      location /prod-api/ {
        proxy_pass http://10.0.0.231:8082/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
      }
    }
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: vue-frontend
  labels:
    app: vue-frontend
spec:
  replicas: 2
  selector:
    matchLabels:
      app: vue-frontend
  template:
    metadata:
      labels:
        app: vue-frontend
    spec:
      containers:
      - name: vue-app
        image: crpi-6sqk0nno0q2sokat-vpc.cn-beijing.personal.cr.aliyuncs.com/web_clover/vue_cloud-native-devops:v1
        imagePullPolicy: IfNotPresent
        ports:
        - containerPort: 80
        env:
        - name: SERVER_IP
          value: "10.0.0.231"
        - name: SERVER_PORT
          value: "8082" 
        volumeMounts:
        - name: nginx-config
          mountPath: /etc/nginx/conf.d/default.conf
          subPath: default.conf
      volumes:
      - name: nginx-config
        configMap:
          name: nginx-config
          items:
          - key: default.conf
            path: default.conf
      - name: entry-script
        configMap:
          name: nginx-config
          items:
          - key: entry.sh
            path: entry.sh
          mode: 0755
---
apiVersion: v1
kind: Service
metadata:
  name: vue-frontend-service
  labels:
    app: vue-frontend
spec:
  type: LoadBalancer
  selector:
    app: vue-frontend
  ports:
  - port: 80
    targetPort: 80
    
#启动资源清单
kubectl apply -f frontend.yaml
```

## Changelog

Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).

## Online Demo

[在线 Demo](https://panjiachen.github.io/vue-element-admin)

## Donate

如果你觉得这个项目帮助到了你，可以感谢原模板作者，你可以帮作者买一杯果汁表示鼓励 🍹
![donate](https://panjiachen.github.io/donate/donation.png)

[更多捐赠方式](https://panjiachen.gitee.io/vue-element-admin-site/zh/donate)

[Paypal Me](https://www.paypal.me/panfree23)

[Buy me a coffee](https://www.buymeacoffee.com/Pan)

更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)