CPBF v2.1.3 | CPBF v2.1.3

DevOps流水线

平台配置

本地hosts文件添加配置：

javascript

192.101.65.87 paas.chinapost-test.com.cn
192.101.65.88 inte-project.chinapost.com.cn
192.101.65.88 inte-measure.chinapost.com.cn 
192.101.65.88 inte-devops.chinapost.com.cn 
192.101.65.88 inte-platform.chinapost.com.cn

创建Dockerfile

dockerfile

FROM 192.101.10.113/nsf/openjdk:nsf-skywalking-openjdk8

RUN In -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo 'Asia/Shanghai' > /etc/timezone
RUN mkdir -p /standard-price-atom
WORKDIR /standard-price-atom
EXPOSE 9004

ADD ./standard-price-atom-business/target/standard-price-atom-business-1.0.0.jar

ENV JAVA_OPTS="" SW_AGENT_NAME="standard-price-atom" SW_AGENT_AUTHENTICATION="MzEtdGVzdA==" SW_AGENT_COLLECTOR_BACKEND_SERVICES="apm-otel-collector.sgp-pre.chinapost.com.cn:11800"

ENTRYPOINT exec java -javaagent:/nsf/nsf-boot.jar=standard-price-atom -javaagent:/skywalking/skywalking-napm-bin-8.5.0-latest/agent/skywalking-agent.jar -Dskywalking_config=/skywalking/skywalking-napm-bin-8.5.0-latest/agent/config/agent.config $JAVA_OPTS -jar standard-price-atom-business-1.0.0.jar

创建凭证

凭证管理-代码库凭证-创建凭证

创建代码源

持续交付-代码源-创建GitLab代码源-关联

创建流水线-后端

创建流水线，选择Java+Maven+Docker全流程，编辑流水线信息，点击确定创建流水线。

流水线列表中点击编辑，详细配置如下：

执行流水线-执行成功

创建流水线-前端

创建Dockerfile到工程目录下

FROM 192.101.10.113/public/nginx:1.18
ADD ./dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx
EXPOSE 80
EXPOSE 443

容器云配置

yaml

apiVersion: v1
kind: ConfigMap
metadata:
  creationTimestamp: '2023-02-14T10:10:55Z'
  lables:
    system: cpdsp
  managedFields:
    - apiVersion: V1
      fieldsType:
        'f:data':
          .: {}
          'f:default.conf': {}
        'f:metadata':
            'f:labels':
              .: {}
              'f:system': {}
      manager: okhttp
      operation: Update
      time: '2023-02-14T10:10:55Z'
  name: productui
  namespace: sgp-prd-demo
  resourceVersion: '149831809'
  selfLink: /api/v1/namespaces/sgp-prd-demo/configmaps/productui
  uid: 09dc2455-635c-4dbb-a2dc-d1accd577eb0
data:
  default.conf: |-
    server {
        listen          80:
        server_name     localhost:
        
        location / {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers *;
        add_header Access-Control-Allow-Methods *;
        root  /usr/share/nginx/html;
        index  index.html  index.htm;
        try_files $url/ /index.html =404;
      }
  
    }

微前端跨域配置

方案一：主应用域名下配置子应用二级路径

通过nginx代理成微应用的访问地址。例如主应用域名为 dev.pruduction.com.cn，微应用访问地址为dev.pruduction.com.cn/mychild
.env.development 配置

javascript

 # 请求前缀
 VITE_APP_BASE_URL_PREFIX='/fontapi'
 # 静态资源地址
 VITE_APP_STATIC_URL=/child/images/guide
 # 构建资源公共路径
 VITE_PUBLIC_PATH=/child/images/guide/

vite.config.ts : build 添加outDir，base修改如下

javascript

 build: {
      outDir: `dist${loadEnv(mode, process.cwd()).VITE_PUBLIC_PATH}`,
 }

base: loadEnv(mode, process.cwd()).VITE_PUBLIC_PATH,

src\views\upms\common\http\index.ts和src\views\dashboard\common\http\index.ts的代码替换为：新模块已更改

javascript

import { createAxios } from '/@/utils/axios';
import { warpperEnv } from '@build/index';
const { VITE_APP_BASE_URL_PREFIX } = warpperEnv();
export const sysPreFix = VITE_APP_BASE_URL_PREFIX + '/sys';

export const sysHttp = createAxios({
  requestOptions: {
    urlPrefix: sysPreFix,
  },
});

在登录页验证码位置，添加请求前缀src\views\sys\login\index.vue：代码123行

vue

<el-image:style="{ width: verifyCodeImageWidth + 'px', height: '100%' }"
:src="`${VITE_APP_BASE_URL_PREFIX}/sys/image/code?randomStr=${randomStr}`">
    264行  
const { VITE_APP_TITLE, VITE_APP_BASE_URL_PREFIX } = warpperEnv();

子应用nginx配置

javascript

location /fontapi/sys {
       add_header 'Access-Control-Allow-Credentials' 'true';
       add_header 'Access-Control-Allow-Origin' '*';
       add_header 'Access-Control-Allow-Headers' '*';
       add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PATCH, PUT';
       add_header 'Content-Type' 'application/json; charset=utf-8';
       if ($request_method = 'OPTIONS') {
           return 204;
       }
       # 请求转发
       proxy_pass http://100.5.6.64:9090/sys/;
 }

主应用nginx配置
- mychild就是在主域名下指定的，访问微应用的二级路径，通过nginx代理到真正的微应用服务器。如果在流水线中，localhost:8084要替换成相应的，容器内地址配置菜单时：微应用管理-新增微应用-微应用地址：主应用域名/mychild
- child/images/guide 是微应用代码所在的真实位置，跟微应用打包时，输出的目标名称需要一致（outDir）
- fontapi 微应用添加的统一请求前缀，避免微应用请求被主应用nginx拦截。

方案二：主应用域名下配置子应用二级路径
- 在主应用中，通过微应用自己的域名访问。例如主应用域名为 dev.pruduction.com.cn，微应用访问地址为dev.price.com.cn
- 配置菜单时：微应用管理-新增微应用-微应用地址：dev.price.com.cn
- 微应用代码无需修改
- 微应用nginx
- 主应该nginx