部署

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

保证消费者配置文件中的远程模块地址无误，消费者能够正确访问到生产者的 manifest 文件。
保证生产者 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 配置，它会影响到：

mf-manifest.json 中定义的 publicPath，它决定了远程模块其他资源的访问路径。
通过 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 产物都能够被正确的访问。

#部署

#消费者

#生产者

#本地验证部署

部署

消费者

生产者

本地验证部署