You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Typically, deploying a Module Federation application requires adjusting the remote module address on the consumer side to its online address.
3
+
In general, when deploying a Module Federation application, there are two key points to consider:
4
4
5
-
For example, if the producer is deployed to the domain `https://my-remote-module`, you can modify the consumer's `module-federation.config.ts` file as follows:
5
+
1. Ensure that the remote module addresses in the consumer's configuration file are correct, and that the consumer can correctly access the producer's `manifest` file.
6
+
2. Ensure that all resources in the producer's `manifest` file can be accessed correctly.
7
+
8
+
We recommend using Modern.js's [Node Server](/guides/basic-features/deploy.html#using-modernjs-built-in-nodejs-server) to deploy Module Federation applications for an out-of-the-box experience.
9
+
10
+
## Consumer
11
+
12
+
For the consumer of Module Federation, its connection with the producer is the remote module address in the configuration file.
13
+
14
+
For example, if the producer is deployed under the domain `https://my-remote-module`, the developer needs to modify the consumer's configuration file:
At this point, the consumer will load the `manifest` configuration file of the `remote` module in the production environment.
31
+
At this point, the consumer will load the `manifest` configuration file of the remote module production environment.
32
+
33
+
:::note
34
+
In the above code, the address of the remote module is `/static/mf-manifest.json`, which is just an example using the default output path of Modern.js. In actual projects, developers need to configure according to the actual access path.
35
+
:::
36
+
37
+
## Producer
38
+
39
+
For the producer of Module Federation, developers need to correctly configure the [`output.assetPrefix`](/configure/app/output/asset-prefix) configuration, which affects:
40
+
41
+
1. The `publicPath` defined in `mf-manifest.json`, which determines the access path of other resources of the remote module.
42
+
2. The access path of the `mf-manifest.json` file when hosted directly by the Modern.js server.
43
+
44
+
In the production environment, developers need to configure `output.assetPrefix` as the access path of the production environment. For example, if we deploy the producer under the domain `https://my-remote-module`, we need to configure `output.assetPrefix` as `https://my-remote-module`.
At this point, the `publicPath` defined in the producer's build output `mf-manifest.json` is `https://my-remote-module`, for example:
57
+
58
+
```json
59
+
{
60
+
"id": "remote",
61
+
"name": "remote",
62
+
"metaData": {
63
+
"name": "remote",
64
+
"publicPath": "https://my-remote-module/"
65
+
},
66
+
"shared": [ /* xxx */ ],
67
+
"remotes": [],
68
+
"exposes": [ /* xxx */ ]
69
+
}
70
+
```
71
+
72
+
When the consumer accesses the remote module, it will automatically prepend the `publicPath` to the resource path of the remote module.
73
+
74
+
This configuration will also affect the access path of the producer's `mf-manifest.json`. For example, if this value is set to `MyDomain/module-a`, the hosting path of `mf-manifest.json` becomes `MyDomain/module-a/static/mf-manifest.json`.
75
+
76
+
At this point, the consumer needs to configure the following address when configuring the remote module:
Modern.js provides the `modern deploy` command, which can easily generate products that can run in a Node.js environment.
25
92
26
-
The above deployment method is merely the simplest practice. In real-world scenarios, there are many constraints, such as version management, release sequencing, and more. Within ByteDance, we have set up a deployment process for Module Federation applications on our deployment platform, which helps developers address these issues.
93
+
```bash
94
+
modern deploy
95
+
```
96
+
97
+
After executing the command, you can see the following output in the console:
98
+
99
+
```bash
100
+
Static directory: .output/static
101
+
You can preview this build by node .output/index
102
+
```
27
103
28
-
We will continue to keep an eye on platforms with similar functionalities in the community and, in the future, enhance the documentation for deploying Modern.js + Module Federation on these types of platforms.
104
+
At this point, the developer only needs to run `node .output/index` to preview the effect locally. Whether it is a CSR or an SSR application, all Module Federation files can be accessed correctly.
// Now this configuration is only used in the local when you run modern serve command.
205
203
// If you want to deploy the application to the platform, use your own domain name.
206
204
// Module federation will automatically write it to mf-manifest.json, which influences consumer to fetch remoteEntry.js.
207
-
assetPrefix: isLocal?'http://127.0.0.1:3051':'/',
205
+
assetPrefix: 'http://127.0.0.1:3051',
208
206
},
209
207
plugins: [
210
208
appTools({
@@ -215,7 +213,7 @@ export default defineConfig({
215
213
});
216
214
```
217
215
218
-
Now, in the producer, run `IS_LOCAL=true modern build && modern serve`, and in the consumer, run `modern build && modern serve` to simulate the production environment locally and access the remote modules.
216
+
Now, in the producer, run `modern build && modern serve`, and in the consumer, run `modern build && modern serve` to simulate the production environment locally and access the remote modules.
219
217
220
218
You can refer to this example: [Modern.js & Module Federation Basic Example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base).
0 commit comments