记录搭建自己应用中心

news2025/4/26 5:11:56

记录搭建自己应用中心

应用架构
- 主应用-管理中心
- 系统文件系统
- 子应用
日志系统
- 日志系统前端
- 日志系统后端
用户系统
- 接入使用
- 暂未完成
研发管理
- 需求面板
- 消息推送
- 任务分配
- 应用发布

应用架构

一直想做个试试，这是一个简易版的，主要是整合下知识的，依赖包构建，微服务，微前端，等等。
目前是设计的这么多
在这里插入图片描述

主应用-管理中心

主应用实现应用的管理。新建，logo，名称等等。这里图片换了资源，没正常显示。创建应用后，会获取appId和登录令牌。作为其他插件/依赖包的使用。
在这里插入图片描述
目前只展示了用户，后面计划为，应用的分析，受欢迎页面分析，来源分析，版本信息，迭代周期，以及应用告警等等。

系统文件系统

文件系统使用的是minio ，调用minio的签署，获取带有时间的直传链接，前端直接上传。

子应用

所有的子应用由分支下的base分支基础上开发。base分支完成了，除具体业务以外的功能，如登录。所有子应用可单独登录，信息保持一致，因为统一id。

日志系统

日志系统通过编写依赖包的形式，实现应用快速接入。
目前的web依赖包为@dmhsq_monitor/web
后面可能会搞nodejs的

主要依赖下面三个包

在这里插入图片描述
分别是核心库，处理库，工具库。
使用rollup构建

处理库是上报前的数据的一些处理，如
在这里插入图片描述

核心库主要是处理上报，初始化监控，停止监控，消息队列处理，等等。

使用脚步快速的构建和发布

日志系统前端

构建一个微前端的子应用，处理当是微前端形式启动的时候，隐藏菜单栏和顶部栏目，显示的应用信息通过主应用的共享过去。

if (window.__POWERED_BY_WUJIE__) {
  let app: any;
  window.__WUJIE_MOUNT = () => {
    app = createApp(App);
    app.use(ElementPlus);
    app.use(pinia);
    app.use(router);
    app.mount("#app");

    const globalStore = useGlobalStore();
    globalStore.$reset();
    nextTick(() => {
     
      if (window.$wujie) {
        const { token, userInfo, nowApp, appList } = window.$wujie.props;
        // xxxx 处理主应用共享的数据
      }
    });
  };
  window.__WUJIE_UNMOUNT = () => {
    app.unmount();
  };
  window.__WUJIE.mount();
}`

在这里插入图片描述

在这里插入图片描述

查看上报的数据

  monitor.report({
    type: 'custom',
    name: 'userAction',
    data: { action: 'buttonClick', page: 'home' },
  });

在这里插入图片描述

日志系统后端

数据存在mongodb。由于需要任何地方都可以掉，所以对上报接口放通了跨域。
在这里插入图片描述

数据定义。

import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose';
import { Document } from 'mongoose';

export type AppLogDocument = AppLog & Document;

@Schema()
export class AppLog {
  @Prop({ required: true })
  appId: string;

  @Prop({ default: Date.now })
  createdAt?: Date;

  @Prop({ default: Date.now })
  updatedAt?: Date;

  @Prop({ default: false })
  isRead?: boolean;

  @Prop({ required: true })
  type: string;

  @Prop({ required: true })
  name: string;

  @Prop({ required: true })
  day: string;

  @Prop({ required: true })
  timestamp: number;

  @Prop({ required: true })
  id: string;

  @Prop({ type: Object })
  data: any;

  @Prop({ type: Object })
  sdk: any;

  @Prop({ type: Object })
  device: any;

  @Prop({ required: true })
  ip: string;

  @Prop({ type: Object })
  browser;

  @Prop({ required: true })
  sessionId: string;
}

export const AppLogSchema = SchemaFactory.createForClass(AppLog);

AppLogSchema.index({ appId: 1, timestamp: 1, type: 1, day: 1, name: 1 });