CI/CD（一）前端应用自动接入并部署到对象存储

10-31 DEVOPS,Golang Eric Winn 5 views

CI/CD（一）前端应用自动接入并部署到对象存储

10-31 5 views

环境

代码托管：gitlab
CI：tekton
pipline/task: 阿里云 serverless容器（spot实例且按秒计费）

工作流程

接入流程

配置webhook接收MR/push事件

提交.polaris-ci.yaml

根据公司研发规范灵活定义的统一 ci 模板

# 默认取仓库名
# name: "polaris"

# 项目名称，例如 "itnotebooks"
projectName: "itnotebooks"

# 编程语言类型和版本
language:
  # 项目使用的编程语言类型，例如 "node"
  type: "node"
  # 使用的编程语言版本，例如 "20.13.1"
  version: "20.13.1"

# 项目维护者或负责人的电子邮件地址，例如 "eng.eric.winn@gmail.com"
ownerEmail: "eng.eric.winn@gmail.com"

deploy:
  # 部署区域代码，例如 "cn-hongkong"
  regionCode: "cn-hongkong"
  # 部署类型，例如 "k8s"（Kubernetes）
  type: "k8s"
  # Helm chart 路径，用于在 Kubernetes 中部署应用，例如 "web/itnotebooks/[[APP_NAME]]"
  chart: "web/itnotebooks/[[APP_NAME]]"
  # 部署模板路径，例如 "web/templates/activity/itnotebooks"
  template: "web/templates/activity/itnotebooks"
  # 镜像仓库地址，例如 "itnotebooks-registry.cn-hongkong.cr.aliyuncs.com/default/web-[[APP_NAME]]"
  imageRegistry: "itnotebooks-registry.cn-hongkong.cr.aliyuncs.com/default/web-[[APP_NAME]]"
  # 日志项目名称，例如 "hk-fe"
  logProject: "hk-fe"
  # OSS（对象存储服务）存储桶名称，例如 "itnotebooks"
  ossBucket: "itnotebooks"
  # Kubernetes 服务类型，例如 "ClusterIP"
  serviceType: "ClusterIP"

  ports:
    # 容器端口，例如 3000
    - containerPort: 3000
      # 网络协议，例如 TCP
      protocol: TCP

notifications:
  # 飞书通知的 Chat ID，例如 "oc_c68fxxxxxxxxxxxxxxx522"
  larkChatId: oc_c6xxxxxxxxxxxxxxxxxxxb522

# 项目的构建配置
build:
  # 构建镜像前动作，如：安装依赖、编译等
  preScript: |
    DIST_NAME="dist"
    export NODE_PATH=${EX_NODE_MODULES_PATH}/node_modules

    test ! `which pnpm 2> /dev/null` &&  npm install -g pnpm
    test ! `which zx 2> /dev/null` &&  npm install -g zx
    test -d ${DIST_NAME} && rm -rf ${DIST_NAME}

    echo ">>>>>>>>>> 开始安装依赖..."
    pnpm install @vue/compiler-sfc
    pnpm install ${EX_PNPM_INSTALL_ARGS}

    echo ">>>>>>>>>> 开始编译..."
    pnpm build:${ENV_CODE}

    echo ">>>>>>>>>> 完成"
  # 构建脚本，将制品包构建成镜像
  buildScript: |
    IMAGE=${IMAGE_URL}:${ENV_CODE}-${IMAGE_TAG}
    cp -aRf ./supports/Dockerfile ./Dockerfile
  # 构建后动作，如：静态资源同步到 OSS
  postScript: |
    DIST_NAME="dist"
    STATIC_DIR="${DIST_NAME}/public"

    echo ">>>>>>>>>> 开始同步资源"
    echo "${STATIC_DIR}/ ===>>> ${OSS_BUCKET}/${OSS_SUB_DIR}/"
    ${OSS_EXEC} sync -f ${STATIC_DIR}/ ${OSS_BUCKET}/${OSS_SUB_DIR}/

    echo ">>>>>>>>>> 资源同步完成"

envs:
  # 环境代码，用于查询对应的环境信息，取值范围：prod、pre、test、dev
  - env: dev
    # 触发部署的 Git 事件，例如 push
    pushEvent: push
    # 触发部署的分支名称列表，例如 dev/xxx
    branches:
      - dev/xxx
    deploy:
      # OSS 存储的子目录路径，例如 "static/[[ENV_CODE]]/[[APP_NAME]]"
      ossSubDir: "nuxt/[[ENV_CODE]]/[[APP_NAME]]"
      # 日志存储名称，例如 "[[APP_NAME]]-test"
      logStore: "[[APP_NAME]]-test"
      # Kubernetes 集群 API 地址，例如 "https://xxxxxxxxxx:6443"
      cluster: "https://xxxxxxx:6443"
      # Kubernetes Ingress 类，例如 "alb-hk-fe-test"
      ingressClass: "alb-hk-fe-test"
      # 部署的域名，例如 "[[ENV_CODE]].activity.itnotebooks.com"
      domain: "[[ENV_CODE]].activity.itnotebooks.com"
      # 是否启用 TLS，例如 false
      tlsEnable: false
      # 部署路径前缀，例如 "/activity/[[APP_NAME]]"
      prefixPath: "/activity/[[APP_NAME]]"
  - env: prod
    # 触发部署的 Git 事件，例如 push
    pushEvent: push
    # 触发部署的分支名称列表，例如 master
    branches:
      - master
    deploy:
      # OSS 存储的子目录路径，例如 "static/[[ENV_CODE]]/[[APP_NAME]]"
      ossSubDir: "static/[[ENV_CODE]]/[[APP_NAME]]"
      # 日志存储名称，例如 "itnotebooks"（注释掉的示例）
      # logStore: "itnotebooks"
      # Kubernetes 集群 API 地址，例如 "https://xxxxxxxxx:6443"
      cluster: "https://xxxxxxxxxxx:6443"
      # Kubernetes Ingress 类，例如 "alb-prod"
      ingressClass: "alb-prod"
      # 部署的域名，例如 "activity.itnotebooks.com"
      domain: "activity.itnotebooks.com"
      # 是否启用 TLS，例如 true
      tlsEnable: true
      # 部署路径前缀，例如 "/activity/[[APP_NAME]]"
      prefixPath: "/activity/[[APP_NAME]]"
      # 是否启用自动扩展，例如 true
      autoScale: true

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

# 默认取仓库名

# name: "polaris"

# 项目名称，例如 "itnotebooks"

projectName: "itnotebooks"

# 编程语言类型和版本

language:

# 项目使用的编程语言类型，例如 "node"

type: "node"

# 使用的编程语言版本，例如 "20.13.1"

version: "20.13.1"

# 项目维护者或负责人的电子邮件地址，例如 "eng.eric.winn@gmail.com"

ownerEmail: "eng.eric.winn@gmail.com"

deploy:

# 部署区域代码，例如 "cn-hongkong"

regionCode: "cn-hongkong"

# 部署类型，例如 "k8s"（Kubernetes）

type: "k8s"

# Helm chart 路径，用于在 Kubernetes 中部署应用，例如 "web/itnotebooks/[[APP_NAME]]"

chart: "web/itnotebooks/[[APP_NAME]]"

# 部署模板路径，例如 "web/templates/activity/itnotebooks"

template: "web/templates/activity/itnotebooks"

# 镜像仓库地址，例如 "itnotebooks-registry.cn-hongkong.cr.aliyuncs.com/default/web-[[APP_NAME]]"

imageRegistry: "itnotebooks-registry.cn-hongkong.cr.aliyuncs.com/default/web-[[APP_NAME]]"

# 日志项目名称，例如 "hk-fe"

logProject: "hk-fe"

# OSS（对象存储服务）存储桶名称，例如 "itnotebooks"

ossBucket: "itnotebooks"

# Kubernetes 服务类型，例如 "ClusterIP"

serviceType: "ClusterIP"

ports:

# 容器端口，例如 3000

- containerPort: 3000

# 网络协议，例如 TCP

protocol: TCP

notifications:

# 飞书通知的 Chat ID，例如 "oc_c68fxxxxxxxxxxxxxxx522"

larkChatId: oc_c6xxxxxxxxxxxxxxxxxxxb522

# 项目的构建配置

build:

# 构建镜像前动作，如：安装依赖、编译等

preScript: |

DIST_NAME="dist"

export NODE_PATH=${EX_NODE_MODULES_PATH}/node_modules

test ! `which pnpm 2> /dev/null` && npm install -g pnpm

test ! `which zx 2> /dev/null` && npm install -g zx

test -d ${DIST_NAME} && rm -rf ${DIST_NAME}

echo ">>>>>>>>>> 开始安装依赖..."

pnpm install @vue/compiler-sfc

pnpm install ${EX_PNPM_INSTALL_ARGS}

echo ">>>>>>>>>> 开始编译..."

pnpm build:${ENV_CODE}

echo ">>>>>>>>>> 完成"

# 构建脚本，将制品包构建成镜像

buildScript: |

IMAGE=${IMAGE_URL}:${ENV_CODE}-${IMAGE_TAG}

cp -aRf ./supports/Dockerfile ./Dockerfile

# 构建后动作，如：静态资源同步到 OSS

postScript: |

DIST_NAME="dist"

STATIC_DIR="${DIST_NAME}/public"

echo ">>>>>>>>>> 开始同步资源"

echo "${STATIC_DIR}/ ===>>> ${OSS_BUCKET}/${OSS_SUB_DIR}/"

${OSS_EXEC} sync -f ${STATIC_DIR}/ ${OSS_BUCKET}/${OSS_SUB_DIR}/

echo ">>>>>>>>>> 资源同步完成"

envs:

# 环境代码，用于查询对应的环境信息，取值范围：prod、pre、test、dev

- env: dev

# 触发部署的 Git 事件，例如 push

pushEvent: push

# 触发部署的分支名称列表，例如 dev/xxx

branches:

- dev/xxx

deploy:

# OSS 存储的子目录路径，例如 "static/[[ENV_CODE]]/[[APP_NAME]]"

ossSubDir: "nuxt/[[ENV_CODE]]/[[APP_NAME]]"

# 日志存储名称，例如 "[[APP_NAME]]-test"

logStore: "[[APP_NAME]]-test"

# Kubernetes 集群 API 地址，例如 "https://xxxxxxxxxx:6443"

cluster: "https://xxxxxxx:6443"

# Kubernetes Ingress 类，例如 "alb-hk-fe-test"

ingressClass: "alb-hk-fe-test"

# 部署的域名，例如 "[[ENV_CODE]].activity.itnotebooks.com"

domain: "[[ENV_CODE]].activity.itnotebooks.com"

# 是否启用 TLS，例如 false

tlsEnable: false

# 部署路径前缀，例如 "/activity/[[APP_NAME]]"

prefixPath: "/activity/[[APP_NAME]]"

- env: prod

# 触发部署的 Git 事件，例如 push

pushEvent: push

# 触发部署的分支名称列表，例如 master

branches:

- master

deploy:

# OSS 存储的子目录路径，例如 "static/[[ENV_CODE]]/[[APP_NAME]]"

ossSubDir: "static/[[ENV_CODE]]/[[APP_NAME]]"

# 日志存储名称，例如 "itnotebooks"（注释掉的示例）

# logStore: "itnotebooks"

# Kubernetes 集群 API 地址，例如 "https://xxxxxxxxx:6443"

cluster: "https://xxxxxxxxxxx:6443"

# Kubernetes Ingress 类，例如 "alb-prod"

ingressClass: "alb-prod"

# 部署的域名，例如 "activity.itnotebooks.com"

domain: "activity.itnotebooks.com"

# 是否启用 TLS，例如 true

tlsEnable: true

# 部署路径前缀，例如 "/activity/[[APP_NAME]]"

prefixPath: "/activity/[[APP_NAME]]"

# 是否启用自动扩展，例如 true

autoScale: true

部署效果

任务开始时

tekton 流水线

任务部署异常

任务部署成功

如果想赏钱，可以用微信扫描下面的二维码，一来能刺激我写博客的欲望，二来好维护云主机的费用；另外再次标注博客原地址 itnotebooks.com 感谢！

版权属于: Eric

原文地址: https://www.itnotebooks.com/?p=1685

转载时必须以链接形式注明原始出处及本声明。

CI/CD（一）前端应用自动接入并部署到对象存储

CI/CD（一）前端应用自动接入并部署到对象存储

欢迎留言 取消回复

欢迎留言取消回复