qiankun微前端部署（主/子应用部署在同一个服务）(2024.05.20更新~)

Alice_hhu

已于 2024-05-20 10:37:33 修改

阅读量1k

点赞数 10

分类专栏：前端前端部署 qiankun微前端文章标签： qiankun 微前端前端

于 2024-01-26 17:09:45 首次发布

本文链接：https://blog.csdn.net/weixin_40615155/article/details/135869853

版权

前端同时被 3 个专栏收录

9 篇文章 1 订阅

订阅专栏

前端部署

3 篇文章 0 订阅

订阅专栏

qiankun微前端

2 篇文章 0 订阅

订阅专栏

前端Docker部署方法可以参考👉🏻 前端Docker部署 http / https服务&使用 iframe嵌套页面遇到的问题&页面403 Forbidden问题

2024.05.20 去掉前端访问路径中的 /MicroBase/ 后缀（这个后缀被领导和同事吐槽了N次，终于找时间给去掉了，枯枯）（前一版的内容不做删除，留着记录一下做个比较）

一、部署配置

qiankun微前端改造配置就不记录了，只记录部署需要的配置
custpro：自定义的子应用名称

1. 主应用配置

（1） vue.config.js文件
（*非必要修改，为了容器目录文件结构工整好看。如果不改的话，以下所有涉及到 MicroBase目录的地方都不用改）
```
module.exports = {
	outputDir: 'MicroBase',
	...
}
```

（2）子应用注册信息

{
  "name": "custproApp",
  "entry": "/MicroCustpro/", // 子应用的 BASE_URL
  "entry_dev": "http://localhost:8080/",
  "container": "#appContainer",
  "activeRule": "app-custpro"
}

2. 子应用配置

（1）.env文件
```
BASE_URL = /MicroCustpro/
```

（2） vue.config.js文件

module.exports = {
	publicPath: process.env.BASE_URL,
	outputDir: 'MicroCustpro',
	...
}

（3）路由

export default new Router({
  base: window.__POWERED_BY_QIANKUN__ ? '/app-custpro/' : '/',
  ...
})

二、容器目录

	/usr/share/nginx/html
      |-- MicroBase # 对应主应用的编译包目录，如果主应用没有修改 outputDir，这里就还是默认的 dist
      |-- MicroCustpro

三、nginx配置

修改默认的 location / 配置

  location / {
    auth_request off;
    root   /usr/share/nginx/html/MicroBase; # 对应主应用的编译包目录，如果主应用没有修改 outputDir，这里就还是默认的 dist，不用修改
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

新增子应用相关的配置

  location /MicroCustpro/ {
    auth_request off;
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /MicroCustpro/index.html;
  }

四、浏览器访问路径

http://ip:port

五、部署脚本（参考）

	# docker stop custpro-web
	# docker rm custpro-web
	# docker run --name custpro-web -p 8080:80 -d nginx

	rm -rf /home/custpro_web/MicroBase
	rm -rf /home/custpro_web/MicroCustpro
	
	unzip /home/custpro_web/MicroBase.zip 
	unzip /home/custpro_web/MicroCustpro.zip
	
	docker cp /home/custpro_web/default.conf	custpro-web/etc/nginx/conf.d/
	
	docker cp /home/custpro_web/MicroBase	custpro-web:/usr/share/nginx/html # 对应主应用的编译包目录，如果主应用没有修改 outputDir，这里就还是默认的 dist，不用修改
	docker cp /home/custpro_web/MicroCustpro	custpro-web:/usr/share/nginx/html
	
	docker restart custpro-web

—— 以下是 2024.05.20 之前的版本，留着记录一下，方便参考和回溯 ——

一、部署配置

qiankun微前端改造配置就不记录了，只记录部署需要的配置
custpro：自定义的子应用名称

1. 主应用配置

（1）.env文件（2024.05.20 这个配置去掉，还改为原来的 BASE_URL = /）
```
BASE_URL = /MicroBase/
```

（2） vue.config.js文件

module.exports = {
	publicPath: process.env.BASE_URL,
	outputDir: 'MicroBase',
	...
}

（3）路由

export default new Router({
  base: process.env.BASE_URL,
  mode: 'history',
  ...
})

（4）子应用注册信息

{
  "name": "custproApp",
  "entry": "/MicroCustpro/", // 子应用的 BASE_URL
  "entry_dev": "http://localhost:8080/",
  "container": "#appContainer",
  "activeRule": "app-custpro"
}

2. 子应用配置

（1）.env文件
```
BASE_URL = /MicroCustpro/
```

（2） vue.config.js文件

module.exports = {
	publicPath: process.env.BASE_URL,
	outputDir: 'MicroCustpro',
	...
}

（3）路由（2024.05.20 去掉 /MicroBase这一层）

export default new Router({
  base: window.__POWERED_BY_QIANKUN__ ? '/MicroBase/app-custpro/' : '/',
  ...
})

二、容器目录（2024.05.20 去掉 htmlMicroBase和htmlMicroCustpro这一层）

	/usr/share/nginx/html
    |-- htmlMicroBase
      |-- MicroBase
    |-- htmlMicroCustpro
      |-- MicroCustpro

三、nginx配置

删除默认的 location / 配置（2024.05.20 这个配置不删了，改一下）

  # location / {
  #   auth_request off;
  #   root   /usr/share/nginx/html/dist;
  #   index  index.html index.htm;
  #   try_files $uri $uri/ /index.html;
  #   add_header 'Access-Control-Allow-Origin' '*' always;
  # }

新增以下两项配置（2024.05.20 /MicroBase/ 的配置改回原来的 / 默认配置，/MicroCustpro/的配置去掉 /htmlMicroCustpro这一层）

  location /MicroBase/ {
    auth_request off;
    root   /usr/share/nginx/html/MicroBase;
    index  index.html index.htm;
    try_files $uri $uri/ /MicroBase/index.html;
  }
  
  location /MicroCustpro/ {
    auth_request off;
    root   /usr/share/nginx/html/htmlMicroCustpro;
    index  index.html index.htm;
    try_files $uri $uri/ /MicroCustpro/index.html;
  }

四、浏览器访问路径（！重要！）/MicroBase/后缀去掉

http://ip:port/MicroBase/
一定要带上/MicroBase/，最后面的斜杠“/”不能丢，否则访问不到

五、部署脚本（参考）/htmlMicroBase和 /htmlMicroCustpro相关的配置修改一下

	# docker stop custpro-web
	# docker rm custpro-web
	# docker run --name custpro-web -p 8080:80 -d nginx

	rm -rf /home/custpro_web/MicroBase
	rm -rf /home/custpro_web/MicroCustpro
	
	unzip /home/custpro_web/MicroBase.zip 
	unzip /home/custpro_web/MicroCustpro.zip
	
	docker cp /home/custpro_web/default.conf	custpro-web/etc/nginx/conf.d/
	
	# 按照《二、容器目录》，需要多一层 htmlMicroBase和 htmlMicroCustpro目录，不知道怎么用脚本在容器里面新建文件目录，就在本地建了2个空文件夹拷贝到容器里面去
	# docker cp /home/custpro_web/htmlMicroBase	custpro-web:/usr/share/nginx/html
	# docker cp /home/custpro_web/htmlMicroCustpro	custpro-web:/usr/share/nginx/html
	
	docker cp /home/custpro_web/MicroBase	custpro-web:/usr/share/nginx/html/htmlMicroBase
	docker cp /home/custpro_web/MicroCustpro	custpro-web:/usr/share/nginx/html/htmlMicroCustpro
	
	docker restart custpro-web