实现 nacos + traefik，改了很多东西！！！

front-end/app-product/.env.production

@@ -0,0 +1,21 @@
+# Nacos 配置中心ip:端口
+VITE_NACOS_ADDRESS=192.168.31.101:8848
+
+# traefik 网关的地址
+VITE_TRAEFIK_ADDRESS=192.168.31.101
+
+# 注册到 Nacos 的服务名称（微前端模块名称
+VITE_SERVER_NAME=app-product
+
+# 注册到 Nacos 的端口，也是前端运行的端口
+VITE_SERVER_PORT=1301
+
+
+#
+# 说明：项目要调用哪些 微前端 模块
+# 格式：VITE_MODEL_XXXX_NAME=微前端模块名称(模块 的 开发者提供)
+# 作用：通过名称从Nacos配置中心发现模块地址和端口，给 federation 实时加载
+#
+
+# shared 共享资源模块
+VITE_MODEL_SHARED_NAME=app-shared

front-end/app-product/package.json

@@ -14,7 +14,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
-    "nacos-federation": "^1.0.2",
+    "nacos-federation": "link:../nacos-federation",
     "pinia": "^3.0.3",
     "vue": "^3.5.21",
     "vue-router": "^4.5.1"

front-end/app-product/src/domains/product/infr/api/HttpProductRepository.ts

@@ -1,13 +1,13 @@
-import {Product} from "@domains/product/domain/entities/Product.ts";
-import {ProductType} from "@domains/product/domain/type/ProductType.ts";
-import {ProductRepository} from "@domains/product/ports/repositories/ProductRepository";
-import {http} from "shared/infra";
+import { Product } from "@domains/product/domain/entities/Product.ts";
+import { ProductType } from "@domains/product/domain/type/ProductType.ts";
+import { ProductRepository } from "@domains/product/ports/repositories/ProductRepository";
+import { http } from "shared/infra";
 import HttpConfig from "../config/HttpConfig";
 
 
 /**
  * HTTP商品仓储实现 - 实现商品数据的HTTP访问
- * 这是基础设施层，负责具体的数据获取实现 
+ * 这是基础设施层，负责具体的数据获取实现
  */
 export class HttpProductRepository implements ProductRepository {
 

front-end/app-product/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
@@ -7,26 +7,30 @@ import { fileURLToPath, URL } from "node:url";
 import { nacosServiceManage } from "nacos-federation";
 
 
-export default defineConfig(async () => {
-    const client = new nacosServiceManage({
-        serverList: '192.168.31.100:8848',
-        serviceName: 'app-product',
-        port: 1301
-    })
-    const sharedUrl = await client.find("app-shared")
+export default defineConfig(async ({ mode }) => {
+
+    const env = loadEnv(mode, process.cwd());
+
+    await nacosServiceManage.create({
+        serverList: env.VITE_NACOS_ADDRESS,
+        serviceName: env.VITE_SERVER_NAME,
+        port: Number(env.VITE_SERVER_PORT)
+    });
+    // const sharedUrl = await nacos.find(env.VITE_MODEL_SHARED_NAME)
 
     return {
+        base: `/${ env.VITE_SERVER_NAME }/`,
         server: {
-            port: 1301,
+            port: Number(env.VITE_SERVER_PORT),
             host: '0.0.0.0',
             strictPort: true,
             cors: true
         },
         plugins: [
             federation({
-                name: 'product',
+                name: env.VITE_SERVER_NAME,
                 remotes: {
-                    shared: `${ sharedUrl }/assets/remoteEntry.js`
+                    shared: `http://${ env.VITE_TRAEFIK_ADDRESS }/${ env.VITE_MODEL_SHARED_NAME }/assets/remoteEntry.js`
                 },
                 exposes: { // 暴露给主应用的资源（按功能分组）
                     './ProductDomain': './src/domains/product/index.ts', // 领域层（实体、服务、接口等）

front-end/app-shared/.env.production

@@ -0,0 +1,8 @@
+# Nacos 配置中心ip:端口
+VITE_NACOS_ADDRESS=192.168.31.101:8848
+
+# 注册到 Nacos 的服务名称（微前端模块名称）
+VITE_SERVER_NAME=app-shared
+
+# 注册到 Nacos 的端口，也是前端运行的端口
+VITE_SERVER_PORT=1333

front-end/app-shared/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "axios": "^1.12.2",
-    "nacos-federation": "^1.0.2"
+    "nacos-federation": "link:../nacos-federation"
   },
   "devDependencies": {
     "@originjs/vite-plugin-federation": "^1.4.1",

front-end/app-shared/src/config/HttpConfig.ts

@@ -1,5 +1,5 @@
 export class HttpConfig {
-    public static DevBaseUrl: string = "http://127.0.0.1:3000/api"
-    public static prodBaseUrl: string = "http://127.0.0.1:3000/api/"
+    public static DevBaseUrl: string = "http://127.0.0.1:3210/api"
+    public static prodBaseUrl: string = "http://127.0.0.1:3210/api/"
     public static apiList: string = ""
 }

front-end/app-shared/vite.config.ts

@@ -1,24 +1,26 @@
-import { defineConfig, UserConfig } from 'vite'
+import { defineConfig, loadEnv, UserConfig } from 'vite'
 import federation from "@originjs/vite-plugin-federation";
 import { nacosServiceManage } from "nacos-federation";
-// https://vite.dev/config/
-export default defineConfig(async (): Promise<UserConfig> => {
-    new nacosServiceManage({
-        serverList: '192.168.31.100:8848',
-        serviceName: 'app-shared',
-        port: 1333
-    })
+
+export default defineConfig(async ({ mode }): Promise<UserConfig> => {
+    const env = loadEnv(mode, process.cwd());
+    await nacosServiceManage.create({
+        serverList: env.VITE_NACOS_ADDRESS,
+        serviceName: env.VITE_SERVER_NAME,
+        port: Number(env.VITE_SERVER_PORT)
+    });
 
     return {
+        base: `/${ env.VITE_SERVER_NAME }/`,
         server: {
-            port: 1333,
+            port: Number(env.VITE_SERVER_PORT),
             host: '0.0.0.0',
             strictPort: true,
             cors: true
         },
         plugins: [
             federation({
-                name: 'shared',
+                name: env.VITE_SERVER_NAME,
                 exposes: {
                     "./config": "./src/config/index.ts",
                     "./infra": "./src/infra/index.ts",
@@ -42,4 +44,4 @@ export default defineConfig(async (): Promise<UserConfig> => {
             }
         }
     }
-})
+});

front-end/main-app/.env.development

@@ -0,0 +1,24 @@
+# Nacos 配置中心ip:端口
+VITE_NACOS_ADDRESS=192.168.31.101:8848
+
+# traefik 网关的地址
+VITE_TRAEFIK_ADDRESS=192.168.31.101
+
+# 注册到 Nacos 的服务名称（微前端模块名称）
+VITE_SERVER_NAME=main-app
+
+# 注册到 Nacos 的端口，也是前端运行的端口
+VITE_SERVER_PORT=1300
+
+
+#
+# 说明：项目要调用哪些 微前端 模块
+# 格式：VITE_MODEL_XXXX_NAME=微前端模块名称(模块 的 开发者提供)
+# 作用：通过名称从Nacos配置中心发现模块地址和端口，给 federation 实时加载
+#
+
+# product 商品模块
+VITE_MODEL_PRODUCT_NAME=app-product
+
+# shared 共享资源模块
+VITE_MODEL_SHARED_NAME=app-shared

front-end/main-app/.env.production

@@ -0,0 +1,21 @@
+# Nacos 配置中心ip:端口
+VITE_NACOS_ADDRESS=192.168.31.100:8848
+
+# 注册到 Nacos 的服务名称（微前端模块名称）
+VITE_SERVER_NAME=main-app
+
+# 注册到 Nacos 的端口，也是前端运行的端口
+VITE_SERVER_PORT=1300
+
+
+#
+# 说明：项目要调用哪些 微前端 模块
+# 格式：VITE_MODEL_XXXX_NAME=微前端模块名称(模块 的 开发者提供)
+# 作用：通过名称从Nacos配置中心发现模块地址和端口，给 federation 实时加载
+#
+
+# product 商品模块
+VITE_MODEL_PRODUCT_NAME=app-product
+
+# shared 共享资源模块
+VITE_MODEL_SHARED_NAME=app-shared

front-end/main-app/package.json

@@ -11,7 +11,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
-    "nacos-federation": "^1.0.2",
+    "nacos-federation": "link:../nacos-federation",
     "pinia": "^3.0.3",
     "vue": "^3.5.21",
     "vue-facing-decorator": "^4.0.1",

front-end/main-app/src/app/main.ts

@@ -4,12 +4,22 @@ import { createPinia } from 'pinia'
 import App from './App'
 import router from './router'
 
+// import { getNacosInstance } from '@shared/lib/nacosInstance';
+
 class Main {
     constructor() {
         createApp(App)
             .use(createPinia())
             .use(router)
             .mount('#app')
+
+        // this.test()
+    }
+
+    async test() {
+        // 关键：通过getNacosInstance获取实例（确保已初始化）
+        const nacos = await getNacosInstance();
+        console.log("product: ", await nacos.find('app-product'))
     }
 }
 

front-end/main-app/src/app/views/Home.tsx

@@ -27,10 +27,15 @@ export default class Home extends Vue {
         { id: 3, title: '新闻3' },
     ]
 
-    addCount() {
+    async created() {
+    }
+
+    async addCount() {
+        // console.log(await nacos.find('app-product'))
         // console.log("ref dom: ", this.refH1)
         // this.router.push({ name: 'about' })
         // this.route.query
+
         this.counter++
     }
 

front-end/main-app/src/shared/lib/nacosInstance.ts

@@ -0,0 +1,40 @@
+import { nacosServiceManage, RegisterOptions } from "nacos-federation"
+import { loadEnv } from 'vite';
+
+console.log("process.env.NODE_ENV: ", process.env.NODE_ENV)
+
+const env = loadEnv(
+    process.env.NODE_ENV || 'development', // 环境模式（development/production）
+    process.cwd() // 项目根目录（.env文件所在位置）
+);
+
+// 2. 定义配置（同步执行，无await）
+const nacosConfig: RegisterOptions = {
+    serverList: env.VITE_NACOS_ADDRESS,
+    serviceName: env.VITE_SERVER_NAME,
+    port: Number(env.VITE_SERVER_PORT),
+    namespace: env.VITE_NACOS_NAMESPACE || 'public'
+};
+
+// 3. 声明实例变量（先不初始化）
+let nacosInstance: nacosServiceManage | null = null;
+
+// 4. 提供初始化函数（显式调用，避免顶级await）
+export async function initNacosInstance() {
+    if (nacosInstance) {
+        return nacosInstance; // 已初始化则直接返回
+    }
+    // 首次调用时初始化
+    nacosInstance = await nacosServiceManage.create(nacosConfig);
+    console.log('Nacos 实例初始化完成');
+    return nacosInstance;
+}
+
+// 5. 提供获取实例的方法（确保初始化后使用）
+export async function getNacosInstance() {
+    if (!nacosInstance) {
+        // 若未初始化，先执行初始化
+        return await initNacosInstance();
+    }
+    return nacosInstance;
+}

front-end/main-app/src/shared/types/env.d.ts

@@ -1 +1,16 @@
 /// <reference types="vite/client" />
+
+interface ViteTypeOptions {
+    // 添加这行代码，你就可以将 ImportMetaEnv 的类型设为严格模式，
+    // 这样就不允许有未知的键值了。
+    // strictImportMetaEnv: unknown
+}
+
+interface ImportMetaEnv {
+    // readonly VITE_APP_TITLE: string
+    // 更多环境变量...
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}

front-end/main-app/tsconfig.json

@@ -14,7 +14,8 @@
     "lib": [
       "ES2020",
       "dom",
-      "dom.iterable"
+      "dom.iterable",
+      "WebWorker"
     ],
     "skipLibCheck": true,
     "paths": {

front-end/main-app/vite.config.ts

@@ -1,33 +1,44 @@
-import { fileURLToPath, URL } from 'node:url'
+import path from 'path'
 
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vueJsx from '@vue3-oop/plugin-vue-jsx'
 import federation from '@originjs/vite-plugin-federation';
 import { nacosServiceManage } from "nacos-federation";
 
+export default defineConfig(async ({ mode }) => {
+    const env = loadEnv(mode, process.cwd());
+    const nacos = await nacosServiceManage.create({
+        serverList: env.VITE_NACOS_ADDRESS,
+        serviceName: env.VITE_SERVER_NAME,
+        port: Number(env.VITE_SERVER_PORT)
+    });
 
-export default defineConfig(async () => {
-    const client = new nacosServiceManage({
-        serverList: '192.168.31.100:8848',
-        serviceName: 'main-app',
-        port: 1300
-    })
-    const productUrl = await client.find("app-product")
-    const sharedUrl = await client.find("app-shared")
+    // const productUrl = await nacos.find(env.VITE_MODEL_PRODUCT_NAME)
+    // const sharedUrl = await nacos.find(env.VITE_MODEL_SHARED_NAME)
 
     return {
         server: {
-            port: 1300,
+            port: Number(env.VITE_SERVER_PORT),
             host: '0.0.0.0',
             strictPort: true,
         },
         plugins: [
             vueJsx(),
             federation({
-                name: 'mainApp', // 主应用模块名（联邦模块需通过此名引用）
-                remotes: { // 配置远程联邦模块地址（开发/生产需对应）
-                    product: `${ productUrl }/assets/remoteEntry.js`,
-                    shared: `${ sharedUrl }/assets/remoteEntry.js`
+                name: env.VITE_SERVER_NAME,
+                remotes: {
+                    // 【弃用】基于 Nacos 服务发现获取 微前端模块的地址 192.168.31.101:1301
+                    // product: `${ productUrl }/assets/remoteEntry.js`,
+                    // shared: `${ sharedUrl }/assets/remoteEntry.js`
+
+                    // 实现：限流与熔断，重试，IP 白名单，压缩等
+                    // 基于 traefik 网关，由网关去寻找 微前端模块的地址
+                    // 网关的地址是 nodejs脚本 定时10秒访问Nacos api 后，生成Traefik配置文件dynamic.yml，
+                    // 并把配置实时同步到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`
                 },
                 shared: {
                     vue: { requiredVersion: '^3.5.18' },
@@ -48,10 +59,10 @@ export default defineConfig(async () => {
         },
         resolve: {
             alias: {
-                '@': fileURLToPath(new URL('./src/app/', import.meta.url)),
-                '@shared': fileURLToPath(new URL('./src/shared/', import.meta.url)),
-                '@features': fileURLToPath(new URL('./src/features/', import.meta.url)),
-                '@domains': fileURLToPath(new URL('./src/domains/', import.meta.url))
+                '@': path.resolve(__dirname, './src/app/'),
+                '@shared': path.resolve(__dirname, './src/shared/'),
+                '@features': path.resolve(__dirname, './src/features/'),
+                '@domains': path.resolve(__dirname, './src/domains/')
             },
         },
     }

front-end/nacos-federation/src/nacosServiceManage.ts

@@ -1,5 +1,4 @@
-import { NacosNamingClient } from 'nacos';
-// @ts-ignore
+import { NacosConfigClient, NacosNamingClient } from 'nacos';
 import { formatServiceUrl, getLocalIP } from "./utils";
 
 const logger = console;
@@ -15,20 +14,81 @@ export interface RegisterOptions {
     namespace?: string;
 }
 
-
 export class nacosServiceManage {
 
+    // 静态变量：缓存单例实例（key为配置唯一标识，value为实例）
+    private static instanceMap: Map<string, nacosServiceManage> = new Map();
+
     public nacosClient!: NacosNamingClient;
+    public configClient!: NacosConfigClient;
     public initOptions!: RegisterOptions;
 
 
-    constructor(option: RegisterOptions) {
+    private constructor(option: RegisterOptions) {
         this.initOptions = option;
-        this.init()
     }
 
+    /**
+     * 静态 create 方法：单例模式入口，同一配置只返回一个实例
+     * @param option 初始化配置
+     * @returns nacosServiceManage 实例（单例）
+     */
+    public static async create(option: RegisterOptions): Promise<nacosServiceManage> {
+        const configKey = this.getConfigKey(option);
 
-    async init() {
+        if (this.instanceMap.has(configKey)) {
+            logger.log(`[nacos-federation] 已存在 ${ option.serviceName } 的Nacos实例，直接复用`);
+            return this.instanceMap.get(configKey)!;
+        }
+
+        const instance = new nacosServiceManage(option);
+        await instance.initClient();
+        await instance.initConfig();
+
+        this.instanceMap.set(configKey, instance);
+        return instance;
+    }
+
+    /**
+     * 生成配置唯一标识：基于 serverList + namespace + serviceName（确保不同配置对应不同实例）
+     */
+    private static getConfigKey(option: RegisterOptions): string {
+        const namespace = option.namespace || 'public';
+        return `${ option.serverList }-${ namespace }-${ option.serviceName }`;
+    }
+
+    /**
+     * 从Nacos发现服务地址
+     * @param serviceName 发现选项
+     * @returns 服务地址（如 'http://192.168.1.101:1301'）
+     */
+    public async find(serviceName: string) {
+        const instances = await this.nacosClient.getAllInstances(serviceName);
+        // console.log("instances: ", instances);
+        if (instances.length === 0) {
+            throw new Error(`[nacos-federation] 未发现服务 ${ serviceName } 的实例`);
+        }
+        return formatServiceUrl(instances[0].ip, instances[0].port);
+    }
+
+    /**
+     * 手动销毁实例（如服务下线时）
+     */
+    public async destroy() {
+        const configKey = nacosServiceManage.getConfigKey(this.initOptions);
+        // 注销Nacos服务实例
+        const { serviceName, port } = this.initOptions;
+        const ip = getLocalIP();
+        // @ts-ignore
+        await this.nacosClient.deregisterInstance(serviceName, { ip, port });
+        logger.log(`[nacos-federation] 服务 ${ serviceName } 已从Nacos注销`);
+
+        // 从缓存中移除实例
+        nacosServiceManage.instanceMap.delete(configKey);
+    }
+
+    // 初始化服务发现
+    private async initClient() {
         this.nacosClient = new NacosNamingClient({
             logger,
             serverList: this.initOptions.serverList,
@@ -38,30 +98,23 @@ export class nacosServiceManage {
         this.reg()
     }
 
+    // 初始化配置服务
+    private async initConfig() {
+        this.configClient = new NacosConfigClient({
+            serverAddr: this.initOptions.serverList,
+        });
+    }
+
     /**
      * 注册服务到Nacos并返回客户端实例
      */
-    async reg() {
+    private async reg() {
         const { serviceName, port } = this.initOptions;
         const ip = getLocalIP();
         // @ts-ignore
-        await this.nacosClient.registerInstance(serviceName, {
-            port, ip
-        })
-        console.log(`[nacos] 服务 ${ serviceName } 已注册：${ formatServiceUrl(ip, port) }`);
+        await this.nacosClient.registerInstance(serviceName, { port, ip })
+        logger.log(`[nacos-federation] 服务 ${ serviceName } 已注册：${ formatServiceUrl(ip, port) }`);
     }
 
-    /**
-     * 从Nacos发现服务地址
-     * @param serviceName 发现选项
-     * @returns 服务地址（如 'http://192.168.1.101:1301'）
-     */
-    async find(serviceName: string) {
-        const instances = await this.nacosClient.getAllInstances(serviceName);
-        if (instances.length === 0) {
-            throw new Error(`[nacos] 未发现服务 ${ serviceName } 的实例`);
-        }
-        return formatServiceUrl(instances[0].ip, instances[0].port);
-    }
 
 }

front-end/nacos-federation/test.ts

@@ -1,33 +0,0 @@
-// import {NacosNamingClient} from 'nacos';
-//
-// const logger = console;
-//
-// const client = new NacosNamingClient({
-//     logger,
-//     serverList: '192.168.31.100:8848', // replace to real nacos serverList
-//     namespace: 'public',
-// });
-//
-// await client.ready();
-//
-// // registry instance
-// await client.registerInstance('main-app', {
-//     ip: '192.168.31.101',
-//     port: 1300,
-// });
-
-// @ts-ignore
-import { nacosServiceManage } from "./src/nacosServiceManage.ts";
-
-const client = new nacosServiceManage({
-    serverList: '192.168.31.100:8848',
-    serviceName: 'main-app',
-    port: 1300
-})
-
-
-setTimeout(() => {
-    client.find("main-app").then((client) => {
-        console.log("client ---- :  ", client);
-    })
-}, 3000)

front-end/nacos-federation/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ESNext",
     "module": "CommonJS",
     "outDir": "./dist",
     "rootDir": "./src",

front-end/package.json

@@ -1,15 +0,0 @@
-{
-  "name": "front-end",
-  "version": "1.0.0",
-  "description": "",
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "scripts": {
-    "init": "pnpm install",
-    "all": "concurrently \"pnpm run build\" \"pnpm run dev:main\"",
-    "build": "pnpm --parallel --filter app-product --filter app-shared dep",
-    "dev:main": "pnpm --filter main-app dev",
-    "build:main": "pnpm --filter main-app dep"
-  }
-}

front-end/pnpm-workspace.yaml

@@ -1,4 +0,0 @@
-packages:
-  - 'main-app'
-  - 'app-product'
-  - 'app-shared'