前段时间因为公司发展的需求,开始尝试涉及微前端领域,在衡量了网上现有的多套方案及自身需求后,选择了基于system.js 手工打造微前端架构, 其实整个开发过程还是挺顺利的,没有遇到头秃的大坑, 直到我准备部署。。。
整个部署过程中,出现的各种问题,往往关键点在于忘记了在执行加载子项目文件时。此时项目处在"客户端运行时"
踩坑过程
因为子项目是在项目运行时,根据用户的操作而进行加载, 此时项目已是打包后运行在浏览器里的结构,system.import
路径是没法使用项目在打包前的相对路径的
因此我又想到,直接通过域名然后加上子项目的包存放路径来进行加载,却不断返回 undefind <
,查询文档及source,发现这个加载路径返回的是html文件,而翻过文档后system.import
只能加载js文件,此时我怀疑是因为Nginx做了配置,凡是这个域名访问,无论完整路径是什么,一律返回包入口index.html
。
此时,我已经无限接近真相, 但我竟然关注了奇怪的点,开始走向误区。
然后我又和运维商量,在服务器上部署docker
环境,找个地方专门存放子项目的包,然后监听另一个端口,返回对应的包,接着运维给了我服务的私网ip地址,而此时我却不断尝试加载,然后失败error loading
(开始给自己挖第一个坑)
反复尝试,修改具体路径,依然加载不到,头秃,开始怀疑人生,甚至连127.0.0.1 及 localhost 都试了,都是error loading, 甚至让运维开了公网ip(不要学我,逼急了,想找出问题在哪),通过ip+端口的形式进行加载, 这回倒不是error loading了, 而是跨域。。。。(看似简单一段话,实则在这第二个坑里躺了一天)
最终方案
项目路由模式改为history,nginx做好对应路径配置
,加载时直接system.import(https:www.a.com/package/firstdemo/main.js)
既不会有不同环境的ip问题,也不会有不同端口的跨域问题
在部署过程中,运维及其nginx配置非常重要,一定要跟运维多沟通,微前端的部署模式与常规项目部署差异很大
总结几种坑的形式
域名 + 路径, 因为nginx的转发配置, 导致加载到的是html文件, 失败
域名 + 端口 + 路径, 因为端口问题,导致跨域
公网ip + 端口 + 路径, 跨域
服务端的私网ip + 端口 + 路径, 在遇到跨域之前,你已经先失败了,因为压根访问不到私网ip
尾声
其实这篇内容是一段时间前写的,现在都开始在构思第二套微前端项目了,只是拖延症。。。。😹