[Bug]: 为什么构建后的资源访问 html 静态文件，显示 404？约定式路由在 CSR 客户端渲染模式中无效？有文档说明吗？

cheng4kn commented 3 days ago

版本信息

System: OS: macOS 15.0.1 CPU: (8) arm64 Apple M2 Memory: 116.98 MB / 16.00 GB Shell: 5.9 - /bin/zsh Browsers: Chrome: 129.0.6668.90 Safari: 18.0.1 npmPackages: @modern-js/app-tools: 2.60.1 => 2.60.1 @modern-js/runtime: 2.60.1 => 2.60.1 @modern-js/tsconfig: 2.60.1 => 2.60.1

问题详情

参考 https://modernjs.dev/guides/topic-detail/module-federation/application.html 这个文档，学习和了解了这些配置的参数和意义，使用 https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/app-export 这个项目作为参考，完成 PoC 验证 modern.js 应用的约定式路由 + 模块联邦 + 微应用化在构建后能够正常工作，以便实现独立部署。

Q：为什么构建后的资源访问 html 静态文件，显示 404？约定式路由在 CSR 客户端渲染模式中无效？有文档说明吗？

当我访问 http://localhost:3050/html/main/ 时如图：

当我访问 http://localhost:3051/html/main/ 时如图：

复现链接

https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/app-export

复现步骤

app-export 跟 remote 中的 modern.config.ts 文件改动如下：

modern-js-examples/examples/module-federation/app-export/host/modern.config.ts:

import { appTools, defineConfig } from '@modern-js/app-tools';
import { moduleFederationPlugin } from '@module-federation/modern-js';

// https://modernjs.dev/en/configure/app/usage
export default defineConfig({
  dev: {
    port: 3050,
  },
  runtime: {
    router: true,
  },
  output: {
    assetPrefix: 'http://localhost:3050/', // publichPath
  },
  plugins: [
    appTools({
      bundler: 'rspack', // Set to 'webpack' to enable webpack
    }),
    moduleFederationPlugin(),
  ],
});

modern-js-examples/examples/module-federation/app-export/remote/modern.config.ts:

import { appTools, defineConfig } from '@modern-js/app-tools';
import { moduleFederationPlugin } from '@module-federation/modern-js';

// https://modernjs.dev/en/configure/app/usage
export default defineConfig({
  dev: {
    port: 3051,
  },
  runtime: {
    router: true,
  },
  output: {
    assetPrefix: 'http://localhost:3051/', // publichPath
  },
  plugins: [
    appTools({
      bundler: 'rspack', // Set to 'webpack' to enable webpack
    }),
    moduleFederationPlugin(),
  ],
});

PS： module-federation.config.ts 文件没有做任何修改

使用 yarn run dev 命令在开发环境下一切正常，应用 host 跟 remote 都能独立开发和独立运行，且模块联邦一切正常

构建后的资源如下： modern-js-examples/examples/module-federation/app-export/host/dist:

❯ tree ./dist -L 4
./dist
├── html
│   └── main
│       └── index.html
├── mf-manifest.json
├── mf-stats.json
├── modern.config.json
├── nestedRoutes.json
├── route.json
├── routes-manifest.json
└── static
    ├── css
    │   └── async
    │       └── page.18f1c79a.css
    └── js
        ├── 413.03c6e789.js
        ├── 413.03c6e789.js.map
        ├── async
        │   ├── 379.fc933bea.js
        │   ├── 379.fc933bea.js.LICENSE.txt
        │   ├── 379.fc933bea.js.map
        │   ├── 482.ec55b6ed.js
        │   ├── 482.ec55b6ed.js.LICENSE.txt
        │   ├── 482.ec55b6ed.js.map
        │   ├── 562.3ccc7823.js
        │   ├── 562.3ccc7823.js.map
        │   ├── 879.7c8c4893.js
        │   ├── 879.7c8c4893.js.LICENSE.txt
        │   ├── 879.7c8c4893.js.map
        │   ├── 88.5650ac19.js
        │   ├── 88.5650ac19.js.LICENSE.txt
        │   ├── 88.5650ac19.js.map
        │   ├── 983.8a10fff3.js
        │   ├── 983.8a10fff3.js.map
        │   ├── async-main.8d6487fa.js
        │   ├── async-main.8d6487fa.js.map
        │   ├── lib-router.ea4ce0b4.js
        │   ├── lib-router.ea4ce0b4.js.LICENSE.txt
        │   ├── lib-router.ea4ce0b4.js.map
        │   ├── page.eb280f3d.js
        │   ├── page.eb280f3d.js.map
        │   └── remote
        ├── lib-polyfill.4d3f0e49.js
        ├── lib-polyfill.4d3f0e49.js.map
        ├── main.e5bbdd9e.js
        └── main.e5bbdd9e.js.map

9 directories, 37 files

modern-js-examples/examples/module-federation/app-export/remote/dist:

❯ tree ./dist -L 4                  
./dist
├── @mf-types.d.ts
├── @mf-types.zip
├── html
│   └── main
│       └── index.html
├── mf-manifest.json
├── mf-stats.json
├── modern.config.json
├── nestedRoutes.json
├── remoteEntry.js
├── remoteEntry.js.map
├── route.json
├── routes-manifest.json
└── static
    ├── css
    │   └── async
    │       └── page.18f1c79a.css
    └── js
        ├── 807.732d02f2.js
        ├── 807.732d02f2.js.map
        ├── async
        │   ├── 482.f234dbde.js
        │   ├── 482.f234dbde.js.LICENSE.txt
        │   ├── 482.f234dbde.js.map
        │   ├── 562.9fb54bc4.js
        │   ├── 562.9fb54bc4.js.map
        │   ├── 879.5734d967.js
        │   ├── 879.5734d967.js.LICENSE.txt
        │   ├── 879.5734d967.js.map
        │   ├── 88.c27d7ad5.js
        │   ├── 88.c27d7ad5.js.LICENSE.txt
        │   ├── 88.c27d7ad5.js.map
        │   ├── 947.1b0daf35.js
        │   ├── 947.1b0daf35.js.LICENSE.txt
        │   ├── 947.1b0daf35.js.map
        │   ├── __federation_expose_app.a87cdb49.js
        │   ├── __federation_expose_app.a87cdb49.js.map
        │   ├── async-main.59b7af7f.js
        │   ├── async-main.59b7af7f.js.map
        │   ├── lib-router.06a48089.js
        │   ├── lib-router.06a48089.js.LICENSE.txt
        │   ├── lib-router.06a48089.js.map
        │   ├── next
        │   ├── page.88067cc8.js
        │   └── page.88067cc8.js.map
        ├── lib-polyfill.f0730c98.js
        ├── lib-polyfill.f0730c98.js.map
        ├── main.8f9f9284.js
        └── main.8f9f9284.js.map

9 directories, 41 files

安装 http-server
```
npm -g http-server
```
使用 yarn run build 命令分别先后构建 host 和 remote，然后分别部署静态资源
```
http-server ./dist -p 3050 --cors
http-server ./dist -p 3051 --cors
```

zllkjc commented 6 hours ago

这是因为你直接访问 .html 文件的时候，React Router 无法匹配你的路由，这和「约定式路由」没有直接关系。

cheng4kn commented 1 hour ago

我的需求是用 Modern.js 完成约定式路由 + 模块联邦 + 微应用化在构建后能够正常工作，以便实现独立开发和独立部署。但目前看起来，我没办法直接部署到静态的CDN，必须使用 modern serve？或者有其他更好的方式吗？

如果没有解决办法，我考虑迁移到其他技术栈，或者不使用 Modern.js ，只是用 rspack。

感谢回复。🙏

web-infra-dev / modern.js