实现 nacos 的分布式集群部署配置

2025-09-29 05:07:42 +08:00
parent ced7662d98
commit 04754a1f77
82 changed files with 991 additions and 62852 deletions
--- a/front-end/app-product/src/features/product/views/ProductList/ProductList.tsx
+++ b/front-end/app-product/src/features/product/views/ProductList/ProductList.tsx
@@ -22,6 +22,7 @@ export default defineComponent({


        onMounted(() => {
+
            loadProductList()
        })

--- a/front-end/app-product/src/main.ts
+++ b/front-end/app-product/src/main.ts
@@ -5,6 +5,7 @@ import { createPinia } from 'pinia'

 import App from './App'

+
 createApp(App)
    .use(createPinia())
    .mount('#app')
--- a/front-end/app-product/vite.config.ts
+++ b/front-end/app-product/vite.config.ts
@@ -4,13 +4,13 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import federation from '@originjs/vite-plugin-federation';
 import { fileURLToPath, URL } from "node:url";
-import { nacosRegVitePlugin } from "nacos-federation";
 import { visualizer } from 'rollup-plugin-visualizer';

 export default defineConfig(async ({ mode }) => {
    const env = loadEnv(mode, process.cwd());

    return {
+        base: `${ env.VITE_PREFIX }${ env.VITE_TRAEFIK_ADDRESS }/${ env.VITE_SERVER_NAME }`,
        server: {
            port: Number(env.VITE_SERVER_PORT),
            host: '0.0.0.0',
@@ -18,11 +18,11 @@ export default defineConfig(async ({ mode }) => {
            cors: true
        },
        plugins: [
-            nacosRegVitePlugin(),
+            // nacosRegVitePlugin(),
            federation({
                name: env.VITE_SERVER_NAME,
                remotes: {
-                    shared: `http://${ env.VITE_TRAEFIK_ADDRESS }/${ env.VITE_MODEL_SHARED_NAME }/assets/remoteEntry.js`
+                    shared: `${ env.VITE_PREFIX }${ env.VITE_TRAEFIK_ADDRESS }/${ env.VITE_MODEL_SHARED_NAME }/assets/remoteEntry.js`
                },
                exposes: { // 暴露给主应用的资源（按功能分组）
                    './ProductDomain': './src/domains/product/index.ts', // 领域层（实体、服务、接口等）
--- a/front-end/app-shared/index.html
+++ b/front-end/app-shared/index.html
@@ -10,7 +10,7 @@

 <body>
 <div id="app"></div>
-<script src="/src/index.ts" type="module"></script>
+<script src="/src/main.ts" type="module"></script>
 </body>

 </html>
--- a/front-end/app-shared/package.json
+++ b/front-end/app-shared/package.json
@@ -22,6 +22,7 @@
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue-jsx": "^5.1.1",
    "rollup-plugin-visualizer": "^6.0.3",
    "typescript": "~5.8.3",
    "vite": "^7.1.6"
--- a/front-end/app-shared/src/App.tsx
+++ b/front-end/app-shared/src/App.tsx
@@ -0,0 +1,24 @@
+import { defineComponent, onMounted } from 'vue'
+
+export default defineComponent({
+    setup() {
+
+        onMounted({})
+        return () => (
+            <>
+                <div class="order-federation-placeholder">
+                    <h2>共享资源-联邦模块</h2>
+                    <p>此页面仅用于 商品模块 的单独开发和调试，可临时引入组件进行本地测试，实际运行时由 主应用
+                        加载本项目代码</p>
+
+                    {/*<h2>本模块包含的功能：</h2>*/ }
+                    {/*<ul>*/ }
+                    {/*    <li>1：获取商品首页的数据和展示</li>*/ }
+                    {/*    <li>2：点击视频进入详情页</li>*/ }
+                    {/*</ul>*/ }
+                    {/*<p></p>*/ }
+                </div>
+            </>
+        )
+    }
+})
--- a/front-end/app-shared/src/config/HttpConfig.ts
+++ b/front-end/app-shared/src/config/HttpConfig.ts
@@ -1,9 +1,9 @@
 export class HttpConfig {
    // public static DevBaseUrl: string = "http://127.0.0.1:3210/api"
-    public static DevBaseUrl: string = import.meta.env.VITE_DEVBASEURL
+    public static DevBaseUrl: string = window.__APP_CONFIG__.VITE_DEVBASEURL

    // public static ProdBaseUrl: string = "http://127.0.0.1:3210/api/"
-    public static ProdBaseUrl: string = import.meta.env.VITE_PRODBASEURL
-    
+    public static ProdBaseUrl: string = window.__APP_CONFIG__.VITE_PRODBASEURL
+
    public static apiList: string = ""
 }
--- a/front-end/app-shared/src/infra/AxiosInfra.ts
+++ b/front-end/app-shared/src/infra/AxiosInfra.ts
@@ -7,14 +7,13 @@ import axios, {
 } from "axios";
 import { UrlCheckUtils } from '../utils/index'

-
 class AxiosInfra {
    public instance: AxiosInstance;

    public constructor() {
        this.instance = axios.create({
            baseURL: UrlCheckUtils.check(),
-            timeout: Number(import.meta.env.VITE_HTTPTIMEOUT),
+            timeout: Number(window.__APP_CONFIG__.VITE_HTTPTIMEOUT),
            headers: {
                "Content-Type": "application/json"
            }
--- a/front-end/app-shared/src/main.ts
+++ b/front-end/app-shared/src/main.ts
@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+
+import App from './App'
+
+
+createApp(App)
+    .mount('#app')
+
--- a/front-end/app-shared/src/types/global.d.ts
+++ b/front-end/app-shared/src/types/global.d.ts
@@ -0,0 +1,13 @@
+export interface AppConfig {
+    VITE_DEVBASEURL: string;
+    VITE_PRODBASEURL: string;
+    VITE_HTTPTIMEOUT: string;
+}
+
+declare global {
+    interface Window {
+        __APP_CONFIG__: AppConfig;
+    }
+}
+
+export {};
--- a/front-end/app-shared/tsconfig.json
+++ b/front-end/app-shared/tsconfig.json
@@ -16,6 +16,8 @@
      "DOM",
      "DOM.Iterable"
    ],
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "esModuleInterop": true,
--- a/front-end/app-shared/vite.config.ts
+++ b/front-end/app-shared/vite.config.ts
@@ -1,14 +1,18 @@
 import { defineConfig, loadEnv, UserConfig } from 'vite'
 import federation from "@originjs/vite-plugin-federation";
-import { nacosRegVitePlugin } from "nacos-federation";
+// @ts-ignore
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
 // @ts-ignore
 import vue from '@vitejs/plugin-vue';
 import visualizer from 'rollup-plugin-visualizer';

+
 export default defineConfig(async ({ mode }): Promise<UserConfig> => {
    const env = loadEnv(mode, process.cwd());

    return {
+        base: `${ env.VITE_PREFIX }${ env.VITE_TRAEFIK_ADDRESS }/${ env.VITE_SERVER_NAME }`,
        server: {
            port: Number(env.VITE_SERVER_PORT),
            host: '0.0.0.0',
@@ -16,7 +20,7 @@ export default defineConfig(async ({ mode }): Promise<UserConfig> => {
            cors: true
        },
        plugins: [
-            nacosRegVitePlugin(),
+            // nacosRegVitePlugin(),
            federation({
                name: env.VITE_SERVER_NAME,
                exposes: {
@@ -34,6 +38,7 @@ export default defineConfig(async ({ mode }): Promise<UserConfig> => {
                }
            }),
            vue(),
+            vueJsx(),
            visualizer({
                title: "共享模块依赖分析",
                filename: 'dist/stats.html', // 分析文件输出路径
@@ -47,7 +52,6 @@ export default defineConfig(async ({ mode }): Promise<UserConfig> => {
            minify: false,
            cssCodeSplit: true,
            rollupOptions: {
-                input: './src/index.ts',
                output: {
                    format: 'esm',
                    minifyInternalExports: false
--- a/front-end/main-app/.env.development
+++ b/front-end/main-app/.env.development
@@ -2,7 +2,7 @@
 VITE_PREFIX=http://

 # Nacos 配置中心ip:端口
-VITE_NACOS_ADDRESS=192.168.31.101:8848
+VITE_NACOS_ADDRESS=192.168.139.84:8848

 # traefik 网关的地址
 VITE_TRAEFIK_ADDRESS=192.168.31.101
--- a/front-end/main-app/src/app/main.ts
+++ b/front-end/main-app/src/app/main.ts
@@ -14,6 +14,9 @@ class Main {
           .use(router)
           .mount('#app')

+        // TODO 需要解决的地方
+        window.__APP_CONFIG__ = import.meta.env;
+
        elementPlus.init(app)

        initNormalizeStyles()
@@ -21,7 +24,6 @@ class Main {
    }
 }

-
 new Main


--- a/front-end/main-app/src/app/views/Home/Home.tsx
+++ b/front-end/main-app/src/app/views/Home/Home.tsx
@@ -32,11 +32,11 @@ export default class Home extends Vue {
    ]

    async created() {
-        console.log("import.meta.env: ", import.meta.env)
+
    }

    async addCount() {
-        // console.log(await nacos.find('app-product'))
+        // console.log(await nacos-cluster.find('app-product'))
        // console.log("ref dom: ", this.refH1)
        // this.router.push({ name: 'about' })
        // this.route.query
--- a/front-end/main-app/src/shared/types/global.d.ts
+++ b/front-end/main-app/src/shared/types/global.d.ts
@@ -0,0 +1,11 @@
+export interface AppConfig {
+    [key: string]: any;
+}
+
+declare global {
+    interface Window {
+        __APP_CONFIG__: AppConfig;
+    }
+}
+
+export {};
--- a/front-end/main-app/vite.config.ts
+++ b/front-end/main-app/vite.config.ts
@@ -8,13 +8,13 @@ import { visualizer } from 'rollup-plugin-visualizer';

 export default defineConfig(async ({ mode }) => {
    const env = loadEnv(mode, process.cwd());
-    // const nacos = await nacosServiceManage.create({
+    // const nacos-cluster = await nacosServiceManage.create({
    //     serverList: env.VITE_NACOS_ADDRESS,
    //     serviceName: env.VITE_SERVER_NAME,
    //     port: Number(env.VITE_SERVER_PORT)
    // });
-    // const productUrl = await nacos.find(env.VITE_MODEL_PRODUCT_NAME)
-    // const sharedUrl = await nacos.find(env.VITE_MODEL_SHARED_NAME)
+    // const productUrl = await nacos-cluster.find(env.VITE_MODEL_PRODUCT_NAME)
+    // const sharedUrl = await nacos-cluster.find(env.VITE_MODEL_SHARED_NAME)

    return {
        server: {
@@ -38,8 +38,8 @@ export default defineConfig(async ({ mode }) => {
                    // 并把配置实时同步到Traefik中，如果 xxx微前端模块停止运行那么就会从 Nacos服务中注销，
                    // 那么dynamic.yml配置文件就会自动删减被下线的网关映射

-                    product: `http://${ env.VITE_TRAEFIK_ADDRESS }/${ env.VITE_MODEL_PRODUCT_NAME }/assets/remoteEntry.js`,
-                    shared: `http://${ env.VITE_TRAEFIK_ADDRESS }/${ env.VITE_MODEL_SHARED_NAME }/assets/remoteEntry.js`
+                    product: `${ env.VITE_PREFIX }${ env.VITE_TRAEFIK_ADDRESS }/${ env.VITE_MODEL_PRODUCT_NAME }/assets/remoteEntry.js`,
+                    shared: `${ env.VITE_PREFIX }${ env.VITE_TRAEFIK_ADDRESS }/${ env.VITE_MODEL_SHARED_NAME }/assets/remoteEntry.js`
                },
                shared: {
                    vue: { requiredVersion: '^3.5.18' },
--- a/front-end/nacos-federation/README.md
+++ b/front-end/nacos-federation/README.md
@@ -0,0 +1,23 @@
+功能分析：
+
+  1 注册服务
+
+    子模块：直接通过nacos 注册，给 内网 的 使用
+
+    主模块：main-app -> Traefik -> ConfigServer（nacos-federation） -> Nacos
+
+
+
+  2 获取配置
+
+    子模块：直接通过 nacos 获取配置
+
+    主模块: main-app -> Traefik -> ConfigServer（nacos-federation） -> Nacos
+
+
+  增加功能：
+
+  认证授权机制
+  请求限流保护
+  操作日志记录
+  服务治理功能（如权重调整、元数据管理等）
--- a/front-end/nacos-federation/src/nacosServiceManage.ts
+++ b/front-end/nacos-federation/src/nacosServiceManage.ts
@@ -42,8 +42,8 @@ export class nacosServiceManage {
        }

        const instance = new nacosServiceManage(option);
-        await instance.initClient();
-        await instance.initConfig();
+        // await instance.initClient();
+        // await instance.initConfig();

        this.instanceMap.set(configKey, instance);
        return instance;
@@ -57,6 +57,53 @@ export class nacosServiceManage {
        return `${ option.serverList }-${ namespace }-${ option.serviceName }`;
    }

+    // 服务注册
+    public async initClient() {
+        this.nacosClient = new NacosNamingClient({
+            logger,
+            serverList: this.initOptions.serverList,
+            namespace: this.initOptions.namespace || 'public',
+        });
+        await this.nacosClient.ready();
+        this.reg()
+    }
+
+    /**
+     * 获取配置
+     * @param dataId
+     * @param group
+     */
+    async getConfig(dataId: string, group: string = "DEFAULT_GROUP") {
+        const res = await this.configClient.getConfig(dataId, group)
+        console.log()
+        console.log(`${ chalk.blue('[nacos-cluster-federation] 配置发现：') }\n ${ chalk.green('➜') } ${ chalk.green(dataId) } 的配置为: ${ chalk.green(res) }`)
+        return res;
+    }
+
+    /**
+     * 订阅配置变化
+     * @param dataId
+     * @param group
+     */
+    async subscribe(dataId: string, group: string = "DEFAULT_GROUP") {
+        return new Promise(async (resolve, reject) => {
+            this.configClient.subscribe({ dataId, group }, (content: any) => {
+                resolve(content)
+            });
+        })
+    }
+
+    /**
+     * 初始化配置服务
+     * @private
+     */
+    private async initConfig() {
+        this.configClient = new NacosConfigClient({
+            serverAddr: this.initOptions.serverList,
+        });
+    }
+
+
    /**
     * 从Nacos发现服务地址
     * @param serviceName 发现选项
@@ -87,31 +134,6 @@ export class nacosServiceManage {
        nacosServiceManage.instanceMap.delete(configKey);
    }

-    // 初始化服务发现
-    private async initClient() {
-        this.nacosClient = new NacosNamingClient({
-            logger,
-            serverList: this.initOptions.serverList,
-            namespace: this.initOptions.namespace || 'public',
-        });
-        await this.nacosClient.ready();
-        this.reg()
-    }
-
-    // 初始化配置服务
-    private async initConfig() {
-        this.configClient = new NacosConfigClient({
-            serverAddr: this.initOptions.serverList,
-        });
-    }
-
-    async getConfig(dataId: string, group: string) {
-        const res = await this.configClient.getConfig(dataId, group)
-        console.log()
-        console.log(`${ chalk.blue('[nacos-federation] 配置发现：') }\n ${ chalk.green('➜') } ${ chalk.green(dataId) } 的配置为: ${ chalk.green(res) }`)
-        return res;
-    }
-
    /**
     * 注册服务到Nacos并返回客户端实例
     */
@@ -121,7 +143,7 @@ export class nacosServiceManage {
        // @ts-ignore
        await this.nacosClient.registerInstance(serviceName, { port, ip })
        logger.log()
-        logger.log(chalk.blue("[nacos-federation] 服务注册："))
+        logger.log(chalk.blue("[nacos-cluster-federation] 服务注册："))
        logger.log(` ${ chalk.green('➜') } ${ chalk.green(serviceName) } (${ formatServiceUrl(ip, port) }) 已注册到配置中心！`);
    }

--- a/front-end/nacos-federation/src/vite-plugin-nacos.ts
+++ b/front-end/nacos-federation/src/vite-plugin-nacos.ts
@@ -1,5 +1,5 @@
 import { loadEnv, Plugin, UserConfig } from 'vite';
-import { nacosServiceManage, RegisterOptions } from './index';
+import { getLocalIP, nacosServiceManage, RegisterOptions } from './index';
 import chalk from 'chalk';

 const log = console.log;
@@ -19,7 +19,8 @@ export function nacosRegVitePlugin(options?: Partial<RegisterOptions>): Plugin {
                baseUrl = `${ env.VITE_SERVER_NAME }/`
            }
            return {
-                base: `${ env.VITE_PREFIX }${ env.VITE_TRAEFIK_ADDRESS }/${ baseUrl }`,
+                // http(https)://前端运行的服务器所在ip/前端模块名
+                base: `${ env.VITE_PREFIX }${ getLocalIP() }/${ baseUrl }`,
            }
        },
        async configResolved(config) {
@@ -34,20 +35,19 @@ export function nacosRegVitePlugin(options?: Partial<RegisterOptions>): Plugin {

            // 验证必要配置
            if (!registerOptions.serverList) {
-                throw new Error('[nacos-federation] 缺少Nacos服务列表配置，请设置VITE_NACOS_ADDRESS环境变量或插件选项');
+                throw new Error('[nacos-cluster-federation] 缺少Nacos服务列表配置，请设置VITE_NACOS_ADDRESS环境变量或插件选项');
            }

            if (!registerOptions.serviceName) {
-                throw new Error('[nacos-federation] 缺少服务名称配置，请设置VITE_SERVER_NAME环境变量或插件选项');
+                throw new Error('[nacos-cluster-federation] 缺少服务名称配置，请设置VITE_SERVER_NAME环境变量或插件选项');
            }
            if (!registerOptions.port) {
-                throw new Error('[nacos-federation] 缺少服务端口配置，请设置VITE_SERVER_PORT环境变量或插件选项');
+                throw new Error('[nacos-cluster-federation] 缺少服务端口配置，请设置VITE_SERVER_PORT环境变量或插件选项');
            }

            // 初始化Nacos实例
            nacosInstance = await nacosServiceManage.create(registerOptions);

-
            const baseUrl = await nacosInstance.getConfig("baseUrl", "DEFAULT_GROUP")
            const baseUrlConfig = baseUrl ? JSON.parse(baseUrl) : {};

@@ -91,7 +91,7 @@ function Logs(env: Record<string, any>) {
                ${ chalk.green('➜') } Prometheus 监控： ${ env.VITE_PREFIX }${ webUI }:9090   
                ${ chalk.green('➜') } Grafana 面板： ${ env.VITE_PREFIX }${ webUI }:3000     
                ${ chalk.green('➜') } Traefik 网关： ${ env.VITE_PREFIX }${ env.VITE_TRAEFIK_ADDRESS }
-                  ${ chalk.green('➜') } WebUi： ${ env.VITE_PREFIX }${ env.VITE_TRAEFIK_ADDRESS }:8080
+                  ${ chalk.green('➜') } WebUi： ${ env.VITE_PREFIX }${ env.VITE_TRAEFIK_ADDRESS }:8880
               
               ${ chalk.blue.bold('微前端信息：') }
                ${ chalk.green('➜') } 主模块：${ chalk.green(env.VITE_SERVER_NAME) }
--- a/front-end/nacos-federation/tsconfig.json
+++ b/front-end/nacos-federation/tsconfig.json
@@ -13,7 +13,8 @@
    "declarationDir": "./dist"
  },
  "include": [
-    "src/**/*"
+    "src/**/*",
+    "src/types/*"
  ],
  "exclude": [
    "node_modules",