微前端在流水线中的两种部署方案 ​

前言 ​

如无特殊需求，推荐使用方案一。微前端中涉及跨域的问题，都通过nginx解决，如果后端代码中有解决跨域的模块，需要删除，避免重复解决跨域导致报错。

以下所有方案，主应用和微应用都是单独部署的，可参考流水线部署文档。

方式一：主、子应用均在容器云部署，并且子应用接受二级目录访问 ​

访问地址，如：
主应用 访问地址：dev.pruduction.com.cn  
子应用微应用使用地址： dev.pruduction.com.cn/abc ，独立访问地址：dev.price.com.cn/abc

具体实现步骤

修改微应用配置 ​

• （1）.env.micro：修改如下三个字段的值。

# 请求前缀
VITE_APP_BASE_URL_PREFIX=     # 该配置，如果主应用和子应用共用一套权限管理后端，可以不用配置
# 静态资源地址
VITE_APP_STATIC_URL=/abc
# 构建资源公共路径
VITE_PUBLIC_PATH=/abc/

编译 & Dockerfile配置 ​

• （1）主应用

  • Dockerfile

    FROM 192.101.10.113/public/nginx:1.18
      ADD ./dist/ /usr/share/nginx/html/
      COPY nginx.conf /etc/nginx/
      CMD ["nginx", "-c", "/etc/nginx/nginx.conf","-g","daemon off;"]
      EXPOSE 80
      EXPOSE 443

  • 编译命令(.env.production) npm run build

• （2）子应用

  • Dockerfile

    FROM 192.101.10.113/public/nginx:1.18
    ADD ./dist/ /usr/share/nginx/html/
    # COPY nginx.conf /etc/nginx/
    # CMD ["nginx", "-c", "/etc/nginx/nginx.conf","-g","daemon off;"]
    EXPOSE 80
    EXPOSE 443

  • 编译命令（.env.micro） npm run build-micro

nginx配置 ​

• （1）主应用 无需配置

• （2）子应用 无需配置(不使用自定义nginx配置)

容器云配置(ingress) ​

• (1)主应用

  Ingress :
  域名: dev.pruduction.com.cn
  路由配置：
  /     ->  cpvf-main:80
  /sys  ->  upms-service:9090
  /sso  ->  upms-service:9090

• (2)子应用

  • Ingress 1(作为子应用):

  域名: dev.pruduction.com.cn
  路由配置：
  /abc     ->  cpvf-micro:80

  • Ingress 2(作为独立应用进行访问):

  域名: dev.price.com.cn
  路由配置：
  /abc     ->  cpvf-micro:80
  /sys  ->  upms-service:9090
  /sso  ->  upms-service:9090

主应用添加子应用菜单 ​

平台管理 - 微应用管理 添加一条记录

方式二：主、子应用均在容器云部署，但子应用需要使用根目录进行访问 ​

访问地址，如：
主应用 访问地址：dev.pruduction.com.cn  
子应用 访问地址：dev.price.com.cn

修改微应用配置 ​

无需修改配置

编译 & Dockerfile配置 ​

• （1）主应用

  • Dockerfile

    FROM 192.101.10.113/public/nginx:1.18
    ADD ./dist/ /usr/share/nginx/html/
    COPY nginx.conf /etc/nginx/
    CMD ["nginx", "-c", "/etc/nginx/nginx.conf","-g","daemon off;"]
    EXPOSE 80
    EXPOSE 443

  • 编译命令(.env.production)

    npm run build

• （2）子应用

  • Dockerfile

    FROM 192.101.10.113/public/nginx:1.18
    ADD ./dist/ /usr/share/nginx/html/
    COPY nginx.conf /etc/nginx/
    CMD ["nginx", "-c", "/etc/nginx/nginx.conf","-g","daemon off;"]
    EXPOSE 80
    EXPOSE 443

  • 编译命令（.env.production）

    npm run build

nginx配置 ​

• （1）主应用

无需配置

• （2）子应用

  需要配置跨域

  • a.处理前端跨域

  • b.处理请求地址跨域

    如下图：

    需要将前端统一的/api请求转发到后端
    如：/api/sys  -> http://upms-server.wfwkj.svc.cluster.local:9090/sys
    /api/sso  -> http://upms-server.wfwkj.svc.cluster.local:9090/sso

容器云配置(ingress) ​

• (1)主应用

  Ingress :
  域名: dev.pruduction.com.cn
  路由配置：
  /     ->  cpvf-main:80
  /sys  ->  upms-service:9090
  /sso  ->  upms-service:9090

• (2)子应用

  Ingress :
  域名: dev.price.com.cn
  路由配置：
  /     ->  cpvf-micro:80

主应用添加子应用菜单 ​

平台管理 - 微应用管理 添加一条记录

配置hosts ​

由于使用独立域名，需要将所有主、子应用域名添加到hosts映射文件中