部署

通常情况下,部署 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 中定义的 publicPathhttps://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 产物都能够被正确的访问。