【前言】由于生产项目需要微前端统一登录加管理，并且可能会部署在一台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 (
<div>我是父应用</div>
);
};
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 (
<div>我是子应用</div>
);
};
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(
<div>{JSON.stringify(masterProps)}</div>
)
到此为止，父应用启动起来，子应用启动起来，
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;
}
}
【如有问题请在下方留言】
