-
Notifications
You must be signed in to change notification settings - Fork 369
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: 为什么构建后的资源访问 html 静态文件,显示 404?约定式路由在 CSR 客户端渲染模式中无效?有文档说明吗? #6339
Comments
这是因为你直接访问 .html 文件的时候,React Router 无法匹配你的路由,这和「约定式路由」没有直接关系。 |
我的需求是用 Modern.js 完成 约定式路由 + 模块联邦 + 微应用化 在构建后能够正常工作,以便实现独立开发和独立部署。但目前看起来,我没办法直接部署到静态的CDN,必须使用 如果没有解决办法,我考虑迁移到其他技术栈,或者不使用 Modern.js ,只是用 rspack。 感谢回复。🙏 |
能提供一个 Modern.js + Module Federation 2.0 的部署案例吗? |
模块联邦,怎么说呢,我是花了一两天时间研究和测试,最终放弃了,无需多言,特别是MF2,个人建议别折腾,用:micro-app,另外:modern.js 别用得太重太依赖,可以随时切换到其它(自身维护路由) |
我觉得 MF2 设计上没问题,Modern.js 设计上也没问题。但是文档不严谨,没说明白有哪些坑,进而给开发者留坑。按照文档一顿输出下来,给人带来无端的挫败感,导致体验很糟。
|
不是这样的,这是因为默认情况下创建的 Modern.js 项目使用的是「约定式路由」,它会自动转换成基于 React Router 的浏览器端路由。 这个是任何 SPA 应用都会出现的问题,包括你说「只是用 rspack」,只要你用了浏览器端路由就会出现这个问题。 如果你希望直接通过 对于你的应用,我猜测最简单的方式,应该是将 |
这里并不是说 Modern.js + Module Federation 无法部署,只是说在「版本管理、发布时序」等方面,外部是没有现成的平台的。 |
这个是指 Modern.js 暂时不支持跑在例如 Worker 的环境中,和是否可以部署在 CDN 上没关系,CDN 不涉及「服务运行环境」的问题。你永远可以将一个 HTML 部署到 CDN 上去,还是前面说的,你的问题来源于「用 |
哈哈哈,只能说都还没有准备好,MF2 你不用服务器端渲染好像玩不了,其实前端我个人更加关注还是 CSR 部分,SSR 是非常需要但不重要,如某些情况下大批量渲染,或安全性等,对于微前端呢,其实一开始我是以MF为主的,但隔离、共享等,MF只能满足某部分需求,虽然远程组件等很好,真实情况下完全可以用其他方式替代,我还是推荐你用 micro-app 这个,对于 Modern.js (2.60.3)在最近迭代中无端端出现 ts-node 错误,问题还是有一些的,但还是不错的,目前我这边项目都是基于这个构建的,但不会使用很多功能(能随时替换),总而言之就是还没有准备好。 |
额,这个是我们疏忽了,已经 MR 修复了。 |
不会的,不知道你指的是什么功能,MF2 是可以 CSR 使用的。 |
按照这个文档:https://module-federation.io/zh/practice/frameworks/modern/index.html 我关了 SSR 就好像跑不起来了,目前我这边的需求使用 micro-app 已能满足,但是 MF2 还是有需求的,能完善是最好的。 |
可以看下 modern 的文档,应该更加详细一些,也有例子。https://modernjs.dev/guides/topic-detail/module-federation/usage.html |
你的意思是说约定式路由无法使用 CSR?官网有给出提示吗?我找了一下,找到了如下这句话 自控式路由:
不饶这么一圈,真不知道 "约定式路由" 是 SSR 才有的能力,CSR 是没有这个能力。Modern.js 跟 MF2 的文档都没有明确的提到这个坑,得开发者自己踩。 而且文档也并不明确,有刻意绕过和遗漏的嫌疑。结论,Modern.js 在文档上跟顶流还有一段距离。 |
Modern.js 的理念是 OK 的,而且完成度也 OK。基于 Rust 的工具集效率也 OK,但是文档建设烂尾了。确实没准备好,可能字节内部还没用到 MF 2.0 + CSR 😜 场景 ?! 我决定放弃 Modern.js 能力,切成 Vite + vite-plugin-pages 魔改成 Next.js app-router + MF 2.0。 对 Modern.js 的 DX 体验寄予厚望,但终究是错付了,哎~~~ 无语.... 我不用 Micro-App 的原因是,我不需要微前端的跨技术栈能力,我需要的是微应用能力。做到同一技术栈,Mono-repo 多应用之间共享依赖,再加上独立开发,独立构建,独立部署的能力。 |
... 不行换别的,有可能会付出更多的工作量,理解一下,有句难听的话是这样:要不你来? |
不是这个意思,约定式路由最终会转换成 SPA 路由,而 SPA 路由无法通过
字节内部有非常多这样的场景,你的问题和 MF 甚至都没有关系,就像我一直说的,是对 SPA 应用部署的问题。
嗯,你可以尝试用其他的技术栈,但你仍旧会遇到你的问题,可能你还没有理解 SPA 的部署,当你直接通过 /index.html 这个路由访问的时候,你是无法让客户端路由工作的。 |
我当然明白 SPA 的部署,就是 CSR 在客户端浏览器中指定 react-router-dom 的代码渲染一个 `<BrowserRouter
/>` 即可。
zero ***@***.***> 于2024年10月16日周三 14:46写道:
… 不饶这么一圈,真不知道 "约定式路由" 是 SSR 才有的能力
不是这个意思,约定式路由最终会转换成 SPA 路由,而 SPA 路由无法通过 /index.html 这个路径访问,这会使你的 React
Router 无法工作。
可能字节内部还没用到 MF 2.0 + CSR 😜 场景
字节内部有非常多这样的场景,你的问题和 MF 甚至都没有关系,就像我一直说的,是对 SPA 应用部署的问题。
我决定放弃 Modern.js 能力,切成 Vite + vite-plugin-pages
<https://github.com/hannoeru/vite-plugin-pages> 魔改成 Next.js app-router
<https://nextjs.org/docs/app/building-your-application/routing> + MF 2.0。
嗯,你可以尝试用其他的技术栈,但你仍旧会遇到你的问题,可能你还没有理解 SPA 的部署,当你直接通过 /index.html
这个路由访问的时候,你是无法让客户端路由工作的。
—
Reply to this email directly, view it on GitHub
<#6339 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/BJI6TQH6AYU3PPBF7GKHB7LZ3YDUNAVCNFSM6AAAAABPUJGKJ6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMJVHA3TMNZXG4>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
嗯,你可以试试用一个纯 Webpack 项目 + React Router,直接通过 http server + |
谢谢回复,无论是 CSR 还是 SSR 只要 MicroApp + Module Federation 2.0 工作正常即可,但是我试过使用 SSR 去渲染,先 看了下 issue#6378,如果 SSR 也无法正常工作,那么只能在 CSR 环境使用应用级别模块, 这些信息如此重要能否应该在文档中使用 danger notes 提示出来。 |
其实现在是有的,https://modernjs.dev/guides/topic-detail/module-federation/ssr.html,我们可以在「应用级别模块」这章也说明一下。 现在,我现在理解你的应用了。你希望能用到「应用级别模块」的 MF,并且也希望用到这个 MF 的路由能力。那我可以完整的说明一下:
我猜测你现在是有一个现成的已经用 CDN 部署的 host,然后想接入一个「应用级别模块」的 remote,这在不改造 host 部署的情况下,确实是不行的。 |
用户的诉求是: 请在文档中给出一个可以直接跑起来的 DEMO,无论是 Node.js or Nginx,给出能 run 起来的示例即可。 |
希望要一个通过 Node.js 或 Nginx 直接托管 HTML 的 Demo 吗 |
是的,谢谢 |
#6467 在部署相关文档中追加了一些用例。 https://modernjs.dev/guides/basic-features/deploy.html |
版本信息
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
复现步骤
modern-js-examples/examples/module-federation/app-export/host/modern.config.ts
:modern-js-examples/examples/module-federation/app-export/remote/modern.config.ts
:PS:
module-federation.config.ts
文件没有做任何修改yarn run dev
命令在开发环境下一切正常,应用 host 跟 remote 都能独立开发和独立运行,且模块联邦一切正常构建后的资源如下:
modern-js-examples/examples/module-federation/app-export/host/dist
:modern-js-examples/examples/module-federation/app-export/remote/dist
:yarn run build
命令分别先后构建 host 和 remote,然后分别部署静态资源The text was updated successfully, but these errors were encountered: