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

一、部署配置

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

1. 主应用配置

• （1）.env文件

  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）路由

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

二、容器目录

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

三、nginx配置

• 删除默认的 location / 配置

    # 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;
    # }
  

• 新增以下两项配置

    location /MicroBase/ {
      auth_request off;
      root   /usr/share/nginx/html/htmlMicroBase;
      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;
    }
  

四、浏览器访问路径（！重要！）

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

五、部署脚本（参考）

	# 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