記錄搭建自己應用中心
- 應用架構
- 主應用-管理中心
- 系統文件系統
- 子應用
- 日志系統
- 日志系統前端
- 日志系統后端
- 用戶系統
- 接入使用
- 暫未完成
- 研發管理
- 需求面板
- 消息推送
- 任務分配
- 應用發布
應用架構
一直想做個試試，這是一個簡易版的，主要是整合下知識的，依賴包構建，微服務，微前端，等等。
目前是設計的這么多
主應用-管理中心
主應用實現應用的管理。新建，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 });
用戶系統
接入使用
快速的接入微信掃碼登錄。
使用依賴包，@dmhsq_app/vue
然后查詢登錄狀態，做輪詢。
掃碼后會顯示具體的應用的logo的名稱，以及提示登錄。
換個賬號登錄。用戶的頭像默認和應用頭像一致。
這里的用戶會新增。
暫未完成
后端服務已經完成了，注銷，踢下線，暫時沒想到別的管理，用戶還是應該交由具體應用具體使用。后續用戶管理的依賴包，會整合后端服務，比如修改用戶信息，注銷，踢人下線等等。
研發管理
需求面板
還沒開始，主要是參考jira的設計，實現面板管理，拖動，消息推送。
消息推送
實現為調用應用設置的推送接口url。
任務分配
其實也是一個消息推送。
應用發布
結合面板，面板上線后，可選更新版本，大版本，迭代版本，補丁版本，來更新版本號。結合git來實現標簽tag的創建，方便回滾，應用發布分，構建，發布兩個步驟。工作流形式。
