使用 Gitlab CI/CD 自动打包和部署微前端

image: node:20.16.0
variables:
  # 为了避免主应用以及其他子应用重新打包，可以指定主应用的稳定版本 artifact id，也可以不传让主应用取最新的 artifacts
  SPECIFIED_BASE_JOB_ID: 9044
cache:
  paths:
    - ./node_modules

frontend_build:
  stage: build
  tags:
    - frontend_build
  artifacts:
    name: "app1"
    paths:
      - app1 # 构建后的文件夹名称
      - shared_vars.env # 需要分享的变量
    expire_in: 5 days
  script:
    - echo "BUILD_JOB_ID=$CI_JOB_ID" > shared_vars.env
    - |- 
        if [ "$ENV" ]; then
          # 如果 env 存在，那么子应用的 pipeline 是从外部触发的
          echo "ENV from external";
        else 
          # 反之，那就从 commit 信息中提取
          if [[ $CI_COMMIT_TAG =~ ^PRO.* ]]; then 
            ENV="pro";
          else
            ENV="dev";
          fi;
        fi;
        echo "ENV=$ENV" >> shared_vars.env
    # 开始打包
    - npm i
    - npm run build:$ENV

frontend_base_trigger:
  stage: build
  dependencies:
    - frontend_build
  needs: ["frontend_build"]
  tags:
    - frontend_build
  script:
    - source shared_vars.env
    - echo "trigger base app pipeline with $ENV"
    - if [ -z "$BASE_REF" ]; then BASE_REF="master"; fi; echo $BASE_REF;
    # 通过当前 job token，主应用的 ref 以及仓库 id 为凭据调用 pipline
    # 如果不需要打包主应用，那么就通过 SPECIFIED_BASE_JOB_ID 指定稳定版本的 artifacts
    - curl -v POST
     --form token=$CI_JOB_TOKEN
     --form ref=$BASE_REF
     --form "variables[PRE_JOB_ID]=$BUILD_JOB_ID"
     --form "variables[PRE_PROJECT_ID]=$CI_PROJECT_ID"
     --form "variables[SPECIFIED_BASE_JOB_ID]=$SPECIFIED_BASE_JOB_ID"
     --form "variables[ENV]=$ENV"
     "https://gitlab.bicitech.cn/api/v4/projects/${BASE_PROJECT_ID}/trigger/pipeline"

frontend_build:
  stage: build
  tags:
    - frontend_build
  artifacts:
    name: "dist"
    paths:
      - dist/
      - shared_vars.env
    expire_in: 5 days
  before_script:
   # unzip 用于解压 artifacts
    - sudo apt update && apt install -y unzip
  script:
    - echo "$CI_PIPELINE_SOURCE-$PRE_NAME-$PRE_JOB_ID-$PRE_REF_NAME"
    - |- 
        if [ "$ENV" ]; then
          echo "ENV from external";
        else 
            if [[ $CI_COMMIT_TAG =~ ^PRO.* ]]; then 
              ENV="pro";
            else
              ENV="dev";
            fi;
        fi;
        if [ -z "$PRE_JOB_ID" ]; then
          export PRE_JOB_ID
          export PRE_PROJECT_ID
        fi;
        export ENV
        # 下载以及整合子应用
        bash ./getMicoFrontend.sh
        BUILD_IMAGE_PATH="${镜像地址}:${CI_JOB_ID}"
        declare -p ENV BUILD_JOB_ID BUILD_IMAGE_PATH SUB_BUILD_JOB_ID SUB_BUILD_PROJECT_ID > shared_vars.env

#!/bin/bash

base_project_id="your id"

download () {
  curl --location --output artifact.zip "https://gitlab.bicitech.cn/api/v4/projects/$2/jobs/$1/artifacts?job_token=$CI_JOB_TOKEN"
  if [ -f artifact.zip ]; then
    if [ "$2" == "$base_project_id" ]; then
      unzip -o "artifact.zip" -d "./"
    else
      mkdir "dist/micoFrontendApps"
      unzip -o "artifact.zip" -d "dist/micoFrontendApps"
    fi
  fi
}
if [ "$SPECIFIED_BASE_JOB_ID" ]; then 
  download $SPECIFIED_BASE_JOB_ID $base_project_id
else 
  npm i
  npm run build:${ENV}
fi

if [ "$PRE_JOB_ID" ]; then 
  download $PRE_JOB_ID $PRE_PROJECT_ID
fi

frontend_image_build:
  stage: deploy
  dependencies:
    - frontend_build
  tags:
    - frontend_deploy
  image:
    name: gcr.io/kaniko-project/executor:v1.9.0-debug
    entrypoint: [""]
  script:
    - source ./shared_vars.env
    # 授权: 将用户名密码等授权信息 base64 处理之后保存在 `/kaniko/.docker/config.json`
    - echo "{\"auths\":{\"${CI_REGISTRY}\":{\"auth\":\"$(echo -n ${CI_REGISTRY_USER}:${CI_REGISTRY_PASSWORD} | base64)\"}}}" > /kaniko/.docker/config.json
    - | 
      if [ -e "${CI_PROJECT_DIR}/dist" ]; then
        # 打包镜像
        /kaniko/executor --context "${CI_PROJECT_DIR}" --dockerfile "${CI_PROJECT_DIR}/Dockerfile" --destination "${BUILD_IMAGE_PATH}"
      else
        echo "dist dir is not exist"
        exit 1
      fi

frontend_image_deploy:
  stage: deploy
  dependencies:
    - frontend_build
    - frontend_image_build
  tags:
    - frontend_deploy
  image: registry.cn-hangzhou.aliyuncs.com/haoshuwei24/kubectl:1.16.6
  script:
    - source ./shared_vars.env
    - mkdir -p $HOME/.kube
    - echo "$KUBE_CONFIG" > $HOME/.kube/config  # 解码并配置 Kubernetes 认证
    - sed -e "s~\${BUILD_IMAGE_PATH}~$BUILD_IMAGE_PATH~g" ./k8s.yaml > ./k8s_copy.yaml # 替换 k8s 配置中的镜像地址
    - kubectl apply -f ./k8s_copy.yaml

curl --location --output artifact.zip "https://gitlab.example.cn/api/v4/projects/${CI_PROJECT_ID}/jobs/${CI_JOB_ID}/artifacts?job_token=$CI_JOB_TOKEN"

curl --request POST \
     --form token=TOKEN \
     --form ref=main \
     --form "variables[UPLOAD_TO_S3]=true" \
     "https://gitlab.example.com/api/v4/projects/123456/trigger/pipeline"