logo
  • 指南
  • 配置
  • 插件
  • API
  • 示例
  • 社区
  • Modern.js 2.x 文档
  • 简体中文
    • 简体中文
    • English
    • 开始
      介绍
      快速上手
      版本升级
      名词解释
      技术栈
      核心概念
      页面入口
      构建工具
      Web 服务器
      基础功能
      路由
      路由基础
      配置式路由
      数据管理
      数据获取
      数据写入
      数据缓存
      渲染
      服务端渲染(SSR)
      服务端流式渲染(Streaming SSR)
      渲染缓存
      静态站点生成(SSG)
      渲染预处理 (Render Preprocessing)
      样式开发
      引入 CSS
      使用 CSS Modules
      使用 CSS-in-JS
      使用 Tailwind CSS
      HTML 模板
      引用静态资源
      引用 JSON 文件
      引用 SVG 资源
      引用 Wasm 资源
      调试
      数据模拟(Mock)
      网络代理
      使用 Rsdoctor
      使用 Storybook
      测试
      Playwright
      Vitest
      Jest
      Cypress
      路径别名
      环境变量
      构建产物目录
      部署应用
      进阶功能
      使用 Rspack
      使用 BFF
      基础用法
      运行时框架
      扩展 BFF Server
      扩展一体化调用 SDK
      文件上传
      跨项目调用
      优化页面性能
      代码分割
      静态资源内联
      产物体积优化
      React Compiler
      提升构建性能
      浏览器兼容性
      配置底层工具
      源码构建模式
      服务端监控
      Monitors
      日志事件
      指标事件
      国际化
      基础概念
      快速开始
      配置说明
      语言检测
      资源加载
      路由集成
      API 参考
      高级用法
      最佳实践
      自定义 Web Server
      专题详解
      模块联邦
      简介
      开始使用
      应用级别模块
      服务端渲染
      部署
      集成国际化能力
      常见问题
      依赖安装问题
      命令行问题
      构建相关问题
      热更新问题
      已下线功能
      📝 编辑此页面
      上一页服务端渲染下一页集成国际化能力

      #部署

      通常情况下,部署 Module Federation 应用,需要注意两点:

      1. 保证消费者配置文件中的远程模块地址无误,消费者能够正确访问到生产者的 manifest 文件。
      2. 保证生产者 manifest 文件中各个资源能被正确访问到。

      我们推荐使用 Modern.js 的 Node 服务来部署 Module Federation 应用,以获得开箱即用的体验。

      #消费者

      对于 Module Federation 的消费者来说,它与生产者的联系就是在配置文件中的远程模块地址。

      例如生产者部署在 https://my-remote-module 这个域名下,开发者需要修改消费者的配置文件:

      module-federation.config.ts
      import { createModuleFederationConfig } from '@module-federation/modern-js';
      
      export default createModuleFederationConfig({
        name: 'host',
        remotes: {
          remote: 'remote@https://my-remote-module/static/mf-manifest.json',
        },
        shared: {
          react: { singleton: true },
          'react-dom': { singleton: true },
        },
      });

      此时,消费者将加载远程模块生产环境的 manifest 配置文件。

      Note

      上述代码中,远程模块的地址是 /static/mf-manifest.json,这只是以 Modern.js 默认的产物路径举例。在实际项目中,开发者需要根据实际的访问路径进行配置。

      #生产者

      对于 Module Federation 的生产者,开发者需要正确的配置 output.assetPrefix 配置,它会影响到:

      1. mf-manifest.json 中定义的 publicPath,它决定了远程模块其他资源的访问路径。
      2. 通过 Modern.js 服务直接托管产物时,mf-manifest.json 文件的访问路径。

      在生产环境,开发者需要将 output.assetPrefix 配置为生产环境的访问路径。例如我们将生产者部署在 https://my-remote-module 这个域名下,需要将 output.assetPrefix 配置为 https://my-remote-module。

      modern.config.ts
      import { defineConfig } from '@modern-js/app-tools';
      
      export default defineConfig({
        output: {
          assetPrefix: 'https://my-remote-module',
        },
      });

      此时,生产者构建产物 mf-manifest.json 中定义的 publicPath 为 https://my-remote-module,例如:

      {
        "id": "remote",
        "name": "remote",
        "metaData": {
          "name": "remote",
          "publicPath": "https://my-remote-module/"
        },
        "shared": [ /* xxx */ ],
        "remotes": [],
        "exposes": [ /* xxx */ ]
      }

      消费者在访问远程模块时,会自动将 publicPath 拼接在远程模块的资源路径前。

      该配置也会影响到生产者 mf-manifest.json 的访问路径。例如将这个值设置为 MyDomain/module-a 时,mf-manifest.json 的托管路径变为 MyDomain/module-a/static/mf-manifest.json。

      此时,消费者在配置远程模块时,需要配置以下地址:

      module-federation.config.ts
      import { createModuleFederationConfig } from '@module-federation/modern-js';
      
      export default createModuleFederationConfig({
        name: 'host',
        remotes: {
          remote: 'remote@MyDomain/module-a/static/mf-manifest.json',
        },
      });

      #本地验证部署

      Modern.js 提供了 modern deploy 命令,可以方便生成可运行在 Node.js 环境的产物。

      modern deploy

      执行命令后,可以在控制台看到以下输出:

      Static directory: .output/static
      You can preview this build by node .output/index

      此时,开发者只需要运行 node .output/index 即可在本地预览部署后的效果。无论是 CSR 应用或是 SSR 应用,所有的 Module Federation 产物都能够被正确的访问。