解决远程无法访问微前端子应用的问题
剧本是这样子的,最近因为项目需要只能用一台Windows电脑作为开发机,但是本人的主力开发机是Mac。Windows的低压U性能比较羸弱,完全没法胜任跑调试服务器的任务。
于是乎决定让Mac和以前一样起开发服务器但是在Windows电脑上通过访问Mac的IP来访问调试服务器。
本来猜测可能的报错就是host没有设置成0.0.0.0或者Mac的防火墙阻断了入口。
试了一下主应用完美打开,但是子应用就是加载不出来,而且对子应用的网络请求一直处在Pending状态。
排查了半天最后发现问题出在我们对于qiankun的子应用entry的配置。我们主应用虽然配置的是0.0.0.0,但是给乾坤的所有子应用的entry全部都是配置的localhost,就等于是一台远程机器虽然通过内网IP访问到了远程的主应用,但是一直去本机找localhost,那当然找不到啊。
通过修改子应用的entry配置为远程机器的内网IP,问题解决。
但是还有一个问题,我们团队里面很多同学之前一直用的是云端开发,照理说不可能没有遇到过这个问题啊。。他们那里是怎么工作的?
调研了一下发现原来是VS Code的功能,VS Code在通过SSH打开远程目录并通过yarn start
启动项目后,会把远程的端口映射到本地的localhost上面,这样虽然主应用访问的是localhost,但是因为localhost对应端口的子应用已经被VS Code从远程开发机上代理过来了,所以就能工作了。
具体VS Code远程开发怎么玩的可以直接看官方文档:Local Port Forwarding和 Remote Development using SSH