3.如何让新的子应用实现快速集成
前言:我们知道qiankun架构中一个子应用要集成到主应用中,是需要创建生命周期函数,比如mounted等以及修改打包方式。那如何快速让新的子应用实现快速集成呢?
我们是通过打造一个简易版的脚手架工具,把涉及相关的功能用一套模版维护起来,然后通过维护好的这个模版,然后通过脚手架创建新项目,本质上就是拉取这个模版,如下图所示
具体开发可以参考之前写的《前端那些事》从0到1开发简单脚手架
4.如何动态注册应用?
前沿:为了让主应用可以去访问不同的子应用,我们需要在配置文件中定义好每个子应用的入口entry以及访问名称,以此来注册子应用,我们一般会不同的环境有不同的配置,比如下图所示
👨🎓 啊斌同学:那这样的话,每次修改子应用的entry或者新增新的子应用都得重新编译门户这个主应用
🌲:是的,本地配置化是会存在这样的问题,我们可以搭建一个配置中心来维护,然后通过接口调用的方式来获取不同环境的,像下面这样👇
5.部署中遇到的问题
前沿:部署微前端体系门户涉及到私有云部署,公有云部署,还有基于容器化部署等等。过程中遇到一些问题
5.1 主应用加载子应用静态资源跨域咋搞?
本质上是因主应用是通过fetch去获取子应用的静态资源的,然后通过正则去解析出来子应用的静态资源信息,然后fetch下来,所以必须要求这些静态资源支持跨域,如何配置如下图所示,通过设置允许源了
Access-Control-Allow-Origin
:跨域在服务端是不允许的。只能通过给Nginx配置Access-Control-Allow-Origin *后,才能使服务器能接受所有的请求源(Origin)
5.2 主应用加载子应用的静态资源不是最新,导致加载失败?
本质上就是子应用更新了代码,而主应用在fetch子应用资源的时候,加载到缓存的资源,导致加载资源失败,那么怎么解决呢?我们可以在子应用的nginx中,设置cache-control
,在每次请求资源的时候都检查是否更新。
5.3 如何让每个子应用都拥有通用的ngixn配置?
为了解决以上问题,又要保证通用性,可以针对每个子应用都是同样的nginx配置,这时候可以通过在dockerfile
中定义,在打包到容器时,把nginx.conf
也打到容器中
5.4 如何正确部署主应用和子应用?
主要是两种方案:
- 1.主应用和子应用部署到同一个服务器
这种情况适合公司服务器数量较少,核心就是把主应用部署在一级目录,其他子应用放在二级目录
- 2.主应用和子应用分别部署在不同服务器
这种情况又分为两种,一种是所有子应用都在一台服务器,一种是不同子应用在不同服务器,独立运行。
最后,以上两种方式都有好有坏,具体看你搭建的系统是内部以ip访问为主还是外部访问域名为主,去根据实际情况应用。如果是内部系统建设,子应用以内部访问ip为主,子应用都在独立服务器,无需在配置过多域名,那可以直接用方案2,那如果是对外且域名有限,那方案1或许更合适。
具体的配置方式,我看qiankun官网文档已经更新,可查阅🔗文档 这里就不重复介绍