在实际部署中遇到的微前端qiankun方案应用问题与解决方案记录

前言

公司使用微前端qiankun方案的项目，上线运营了一年左右了，主应用和子应用都是vue技术栈。关于部署的那点事，每个人碰到的实际业务场景各有不同，本文主要我公司自身的实际业务场景来记录一下。

首先要理解一个事情：不管是使用registerMicroApps注册子应用还是使用loadMicroApp手动加载子应用，都会通过 fetch 去获取微应用的引入的静态资源的，所以微应用静态资源一定要支持跨域。要么配代理转发，要么配跨域白名单。

同服务器部署

同服务器部署，并配置在同源下。这里我结合自身业务来阐述，以便更容易理解。

• 假设都部署在同一个nginx服务器A
• 假设主应用访问地址是http://www.dev.com/main/
• 假设微应用访问地址是http://www.dev.com/micro/

主应用以/main/为上下文根，微应用以/micro/为上下文根；

所以entry的值为/micro/;

loadMicroApp([
  {
    name: 'app1',
    entry: '/micro/',   // 部署上生产变为http://www.dev.com/micro/，主会以此URL发送一个请求，去拿到需要加载的子应用html页面
    container: '#container',
  },
]),

因为主应用和微应用都不是部署在服务器根目录，又因为微应用不是部署在/main/的下级目录，

• 主应用前端包放在/mnt/software/ui/main/
• 子应用前端包放在/mnt/software/ui/micro/ 所以需要配置nginx代理

  location ~ ^/main/ {
            root  /mnt/software/ui;   
   }
  location ~ ^/micro/ {
	    root  /mnt/software/ui;
    }

如果微应用部署在主应用目录下/mnt/software/ui/main/micro/，那么微应用可以不用配nginx;

不同服务器部署

主应用和微应用部署在不同的服务器，使用 Nginx 代理访问；

做法就是将主应用服务器上一个特殊路径的请求全部转发到微应用的服务器上，即通过代理实现“微应用部署在主应用服务器上”的效果。

• 方案1，使用nginx代理到同域名下

举个例子，主应用部署在A服务器，微应用部署在B服务器，使用了不同的端口和域名，主应用使用8100端口，微应用使用默认的80端口。

• 主应用：http://www.main.com:8100/
• 子应用：http://www.dev.com/micro/，且子应用内调后端接口路径是http://www.dev.com/microapi/

假如entry的值为

"entry": "/micro/"  
//上生产环境后，将传化为 http://www.main.com:8100/micro/，
//并且会以此URL发送一个请求，去拿到需要加载的子应用html页面

此时，主应用的nginx需要配置代理如下

	location ~ ^/micro/ {
	    proxy_pass http://www.dev.com;
            proxy_set_header Host www.dev.com;
        }

	location ~ ^/microapi/ {
	    proxy_pass http://www.dev.com;
	    proxy_set_header Host www.dev.com;
	}

/micro/ 代理的是为了获取微应用引入的静态资源的

/microapi/ 是微应用后端接口代理

• 方案2，使用nginx配置跨域白名单

另外一种情况，不做nginx代理域名，qiankun在获取微应用的引入的静态资源的会报跨域错误，这个时候也可以选择在微应用的nginx上配置跨域白名单，如下，例子中配的是通配符。

        add_header 'Access-Control-Allow-Origin' '*';
        add_header Access-Control-Allow-Headers X-Requested-With;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

但实际上这个只能解决微应用静态资源跨域的问题，如果微应用内部的接口访问路径跟主应用访问不同，也会形成跨域，还是要配接口转发。如下

	location ~ ^/microapi/ {
	    proxy_pass http://www.dev.com;
	    proxy_set_header Host www.dev.com;
	}

参考连接

官方文档

qiankun-vue-demo