React-umi+qiankun配置与部署同台、多台Nginx

【前言】由于生产项目需要微前端统一登录加管理，并且可能会部署在一台nginx也可能多台nginx。因此技术调研期间，自己使用umi分别创建了主应用与子应用，并在本地搭建两个Nginx环境，部署同一台、各自部署都写了个实践，欢迎大家一起讨论，一起学习。

本文涉及：

• 创建配置父应用
• 创建配置子应用
• 父子应用mock联调
• 父子应用分开部署在nginx上
• 父子应用部署到同一nginx上

1. 创建并配置主应用

由于前面有一篇文档介绍了怎么使用qiankun搭建微前端，这里就简单写点步骤。子应用与主应用我都是用了history: { type: 'hash', }

1.1 创建主应用

mkdir mainapp
cd mainapp
yarn create @umijs/umi-app
yarn install 或者 npm install

1.2 配置qiankun

配置qiankun，我这里直接使用的是umi自带的插件。
安装qiankun、qiankun插件

yarn add qiankun 或者 npm install qiankun --save-D
yarn add @umijs/plugin-qiankun -D 或者 npm install @umijs/plugin-qiankun --save-D

1.3 装载子应用

config.js或者.umirc.ts文件中进行配置

export default defineConfig({
  ...,
  qiankun: {
    master: {
      apps: [
        {
          name: 'subApp',
          entry: '//localhost:8021',// 本地启动的子项目访问地址
          // entry: 'http://localhost:8081/sub/#' // 部署nginx的子项目访问地址
        },
      ],
    },
  },
})

我这里使用的是路由配置，其他方式的配置请去umi官网查看。
routes配置

export default defineConfig({
routes:[
  { path: '/index', component: '@/pages/index' },
  {
        name: 'subApp',// 独一无二名称
        path: '/subApp',
        microApp: 'subApp',
  },
],
proxy:{
'/test': {
      target: 'http://10.10.10.10:8080',// http请求后台部署服务，这里随意写的，前后端部署不在一个服务器上，本地联调或者部署需要配置代理（父应用也需要，否则不能访问）
      changeOrigin: true,
      secure: false,
    },
}
})

1.4 父应用页面

src/pages/index.tsx

import React from 'react';

const Index = () => {
  return (
    
我是父应用
  );
};
export default Index;

1.5 父应用设置值（父子传值）

在src/app.js中，qiankun官方定义一个方法usQiankunStateForSlave()中return出去的数据就是可以发送给子应用的，具体原理可看umi官方

export function useQiankunStateForSlave() {
    const [masterState, setMasterState] = useState({});
  
    return {
      masterState,
      setMasterState,
      token:"xxxx-xxxx-xxxx-xxxx"
    };
  }

2. 创建并配置子应用

简要说明下子应用的创建

2.1 新建子应用

mkdir subApp
cd subApp
yarn create @umijs/umi-app
yarn install 或者 npm install

根目录下创建.env文件，里面写PORT=8121
package.json中新建name:'subApp'

2.2 配置qiankun

安装qiankun插件

yarn add @umijs/plugin-qiankun -D 
或者 npm install @umijs/plugin-qiankun --save-D

config.js或者.umirc.ts文件中进行配置

export default defineConfig({
  ...,
  qiankun: {
    slave: {},
  },
routes:[
 { path: '/', component: '@/pages/index' },
],
proxy:{
'/test': {
      target: 'http://10.10.10.10:8080',// http请求后台部署服务，这里随意写的，前后端部署不在一个服务器上，本地联调或者部署需要配置代理（父应用也需要，否则不能访问）
      changeOrigin: true,
      secure: false,
    },
}
})

2.3 创建测试页面

src/pages/index.tsx

import React from 'react';

const Index = () => {
  return (
    
我是子应用
  );
};
export default Index;

src/pages/index.service.ts

export async function testGet() {
  return http('/test/getFunction', {
    method: 'GET'
  });
}

2.4 接收父应用的数据（父子传值）

在index.tsx页面中加入如下代码

import { useModel } from 'umi';
const masterProps = useModel('@@qiankunStateFromMaster');
const {setMasterState} = masterProps;

return(
{JSON.stringify(masterProps)}
)

到此为止，父应用启动起来，子应用启动起来，
http://localhost:8120/可访问父应用
http://localhost:8120/subApp可访问子应用

3. 父子应用联调mock

3.1. 父子应用配置-package.json

在父、子应用的package.json中都配置以下代码

"start": "umi dev",
    "start:lt": "cross-env MOCK=none REACT_APP_ENV=lt umi dev",

下载cross-env包
npm install cross-env --save-D

3.2. 以mock启动联调

将子应用的mock/*所有文件拷贝到父应用的mock/目录下，然后子应用npm run start，父应用npm run start 则可以使用mock的方式进行父子应用联调

4. 父子应用各自部署nginx

4.1 父应用部署

父应用config.js中装载子应用的地方entry修改成entry: 'http://localhost:8081/sub/#'然后使用npm run build打包
将打包后dist目录下的代码拷贝到nginx1的html目录下，
打开conf/nginx.conf，配置如下

server {
        listen       8080;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
        location /sub/ {
            proxy_pass http://localhost:8080/sub/;
            
            proxy_set_header  Host  $host:$server_port/; 
        }
        location /test/{
            proxy_pass http://10.10.10.10:8080/test/;
            proxy_buffers 4 2048k;
            proxy_busy_buffers_size 2048k;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

使用start nginx启动nginx1
./nginx -s stop关停
./nginx -s reload更改conf文件后重新加载

4.2 子应用部署

在打包之前，请在config.js中配置publicPath:'/sub/'
使用npm run build打包
将打包后dist目录下的代码拷贝到nginx2的html/sub目录下，
打开conf/nginx.conf，配置如下

server {
        listen       8081;
        server_name  localhost;
        
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Allow-Credentials' 'true';

        location /sub {
            try_files $uri /$uri /sub/index.html; 
        }
        location /test/{
            proxy_pass http://10.10.10.10:8080/test/;
            proxy_buffers 4 2048k;
            proxy_busy_buffers_size 2048k;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

使用start nginx启动
至此 可根据http://localhost:8080访问父项目
根据http://localhost:8081/sub/访问子项目
父访问子：http://localhost:8080/#/subApp

5. 父子应用部署在同一nginx

5.1 父子应用部署同一端口

为了适应刚才的包，我们直接使用端口8081

server {
        listen       8081;
        server_name  localhost;
        location / {
            try_files $uri /$uri /index.html; 
        }
        location /sub {
            try_files $uri /$uri /sub/index.html; 
        }
        
        
        location /test/{
            proxy_pass http://10.10.10.10:8080/test/;
            proxy_buffers 4 2048k;
            proxy_busy_buffers_size 2048k;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

5.2 父子应用部署不同端口

为了适应刚才的包，我们父应用部署在8080，子应用在8081

server {
        listen       8080;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
        
        location /test/{
            proxy_pass http://10.10.10.10:8080/test/;
            proxy_buffers 4 2048k;
            proxy_busy_buffers_size 2048k;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

server {
        listen       8081;
        server_name  localhost;
        location /sub {
            try_files $uri /$uri /sub/index.html; 
        }
        
        location /test/{
            proxy_pass http://10.10.10.10:8080/test/;
            proxy_buffers 4 2048k;
            proxy_busy_buffers_size 2048k;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

【如有问题请在下方留言】