当前位置: 开发笔记 > 编程语言 > 正文

git前端工程实现ci_花椒前端基于GitLabCI/CD的自动化构建、发布实践

作者： | 来源：互联网 | 2023-08-19 18:52

【编者的话】在花椒搭建内部GitLab平台后，前端活动项目从SVN迁移到GitLab。本文介绍花椒前端团队如何基于GitLabCICD实现自动化构建及发布。在从SVN

【编者的话】在花椒搭建内部 GitLab 平台后&＃xff0c;前端活动项目从 SVN 迁移到 GitLab。本文介绍花椒前端团队如何基于 GitLab CI/CD 实现自动化构建及发布。

在从 SVN 迁移到 GitLab 和接入 GitLab CI/CD 的过程中&＃xff0c;特别感谢发布系统和服务端同学的大力支持。

一、目前的构建、发布流程在这部分&＃xff0c;我们先给出使用 GitLab CI/CD 的收益&＃xff0c;然后分别介绍使用 GitLab CI/CD 之前以及之后的构建、发布流程。

团队收益发布时间由平均 5 分钟减少到 1.5 分钟。从全程 5 分钟的手动操作&＃xff0c;到只需合并分支代码、自动化构建及发布的 1.5 分钟。

前端构建放到 CI/CD 中&＃xff0c;解决了本地构建可能导致线上代码打包后不一致的问题。

使用 GitLab CI/CD 前的构建、发布流程&＃xff1a;

开发完成后&＃xff0c;在本地进行 build&＃xff0c;build 后提交打包后的 HTML 文件。

打开发布系统&＃xff0c;发布 HTML 文件。

痛点&＃xff1a;

发布代码的操作流程长&＃xff0c;耗时。开发完成后&＃xff0c;发布代码时&＃xff0c;需要经过大量的手动操作&＃xff0c;加上发布系统慢&＃xff0c;每次发布大约需要 5 分钟。

每个人本地环境不一致&＃xff0c;线上代码不同的人发布有不一致的风险。

需要手动操作的费时点一共需要至少 8 次手动操作。

本地构建&＃xff1a;

执行 build 命令&＃xff0c;等待 build 完成。

build 完成后&＃xff0c;提交打包后的 HTML 文件。

发布代码&＃xff1a;

打开发布系统

选择发布项目及环境

打开发布页面

选择发布文件

填写发布信息

点击确认发布

使用 GitLab CI/CD 后的构建、发布发布代码 1 步到位&＃xff1a;只需将开发分支合并至发布环境对应的分支&＃xff0c;提交分支后&＃xff0c;GitLab CI/CD 自动进行构建、发布。

二、什么是 GitLab CI/CD这部分我们先简要介绍下 GitLab CI/CD&＃xff0c;然后介绍如何从零搭建一个 GitLab CI/CD。如果你想和更多 CI/CD 技术专家交流&＃xff0c;可以加我微信liyingjiese&＃xff0c;备注『加群』。群里每周都有全球各大公司的最佳实践以及行业最新动态。

简要介绍 GitLab CI/CD如下图所示&＃xff0c;提交代码到 GitLab 后&＃xff0c;满足指定条件后会触发 pipeline 进行自动化构建、发布。

Pipeline 可以理解为构建任务&＃xff0c;里面可以包含多个流程&＃xff0c;如下载依赖、运行测试、编译、部署。Pipeline 什么时候触发&＃xff0c;分为几个流程&＃xff0c;每个流程做什么&＃xff0c;是在项目的 .gitlab-ci.yml 文件中定义。

对于我们的活动项目而言&＃xff0c;Pipeline 主要包括了&＃xff0c;依赖下载&＃xff0c;build 代码&＃xff0c;发布到服务器这三个过程。后续实践部分会具体介绍。

GitLab CI/CD 整体流程GitLab CI/CD 的 pipeline 具体流程和操作在 .gitlab-ci.yml 文件中申明&＃xff0c;触发 pipeline 后&＃xff0c;由 GitLab Runner 根据 .gitlab-ci.yml 文件运行&＃xff0c;运行结束后将返回至 GitLab 系统。

.gitlab-ci.yml 文件

.gitlab-ci.yml 文件是一个申明式文件&＃xff0c;用于定义 GitLab CI/CD 流程分为几个阶段&＃xff0c;每个阶段分别干什么。

关于具体干什么、怎么干&＃xff0c;主要使用命令行和脚本操作&＃xff0c;稍后会在实践部分做细致的介绍。

如果涉及一些逻辑的话&＃xff0c;会使用脚本&＃xff0c;我们的项目主要使用 Shell 脚本&＃xff0c;Python 脚本。

GitLab Runner

GitLab Runner 是 CI 的执行环境&＃xff0c;负责执行 gitlab-ci.yml 文件&＃xff0c;并将结果返回给 GitLab 系统。Runner 具体可以有多种形式&＃xff0c;docker、虚拟机或 shell&＃xff0c;在注册 runner 时选定方式。

从零搭建一个 GitLab CI/CD为了解整个流程&＃xff0c;可以在 GitLab 上建一个项目&＃xff0c;跑一跑整个 CI/CD 流程。

新建一个 GitLab 项目

新建一个自己的项目

配置 Runner

GitLab 提供了一些共享的 Runner&＃xff0c;我们可以不用处理 Runner。

新建 .gitlab-ci.yml 文件

拉取项目到本地

在项目根目录新建 .gitlab-ci.yml 文件

提交 .gitlab-ci.yml 文件

在项目的 CI/CD 中&＃xff0c;可以看到 CI/CD 的运行情况

.gitlab-ci.yml 文件示例&＃xff1a;

image: node

# 定义 stages

stages:

- build

- test

# 定义 job

build 阶段:

stage: build

script:

- echo "build stage"

# 定义 job

发布到测试环境:

stage: test

script:

- echo "test stage"

三、新项目接入 GitLab CI/CD 流程团队有新项目需要接入 GitLab CI/CD&＃xff0c;首先申请 GitLab 项目&＃xff0c;再让 GitLab 系统维护者帮忙配置 Runner&＃xff0c;编写 .gitlab-ci.yml 文件&＃xff0c;触发构建即可看 CI/CD 情况。

新建 GitLab 项目

配置 GitLab Runner

.gitlab-ci.yml 文件

目前已有两个新的项目路接入了 GitLab CI/CD&＃xff0c;接入情况不错&＃xff0c;根据文档进行操作过程比较顺利。

四、GitLab CI/CD 实践在实践部分&＃xff0c;这里着重介绍 GitLab Runner 和 .gitlab-ci.yml 文件&＃xff0c;主要的流程及遇到的问题和解决方案包含在 .gitlab-ci.yml 文件的介绍过程中。

GitLab RunnerGitLab Runner 一般由 GitLab 系统维护者管理&＃xff0c;配置后&＃xff0c;同类项目可以共享&＃xff0c;一般不需要进行修改。这里不进行具体介绍&＃xff0c;主要介绍下使用过程中的注意点&＃xff0c;具体使用可参考 GitLab Runner 文档。

GitLab Runner 使用流程&＃xff1a;

下载 GitLab Runner

使用 GitLab Runner

GitLab Runner 注意点

在使用 Runner 的过程中&＃xff0c;我们遇到了一些问题&＃xff0c;下面简要介绍问题及解决方案&＃xff0c;不做具体介绍。

配置 Runner 后&＃xff0c;push 代码&＃xff0c;出发了 pipeline&＃xff0c;但一直处于Pending状态

错误信息是&＃xff1a;This job is stuck, because you don’t have any active runners that can run this job

注册的 Runner&＃xff0c;默认情况下&＃xff0c;不会运用没有 tag 的 job&＃xff0c;可以在 Settings→CI/CD→Runners Settings&＃xff0c;去掉 Runner untagged jobs 即可。

GitLab Runner 的类型

有三种类型的 Runner&＃xff0c;Shared Runners 在整个系统所有项目都可以使用&＃xff0c;Group Runners 注册后&＃xff0c;同一个项目下的不同代码库共享&＃xff0c;Specific Runners 需要给项目单独配置&＃xff0c;使用 Specific Runners 注意考虑是否需要关闭 Shared Runners、和 Group Runners。

Shared Runners

Specific Runners

Group Runners

在 GitLab CI 中使用 Docker

在部署到阿里云时&＃xff0c;需要在 GitLab CI/CD 中使用 Docker 打镜像发布。可以参考 Building Docker images with GitLab CI/CD。

在 GitLab CI/CD 中访问 Runner 宿主机目录

我们使用的 Runner executor 是 Dokcer&＃xff0c;在 Dokcer volumes 中配置需要访问的目录。

.gitlab-ci.yml 文件活动项目 .gitlab-ci.yml 文件如下&＃xff0c;下面主要通过活动项目的 .gitlab-ci.yml 文件来介绍我们的实践过程、.gitlab-ci.yml 详细的用法&＃xff0c;可参考 GitLab CI/CD Pipeline Configuration Reference 文档。

.gitlab-ci.yml 文件介绍

image 是执行 CI/CD 依赖的 Docker 基础镜像。镜像中有 Node、Yarn、Dalp(内部 rsync 工具)。

stages 中定义了我们的 pipeline 分为以下几个过程&＃xff1a;

下载依赖阶段 pre_build

构建阶段 build

发布阶段 deploy

stage 申明当前的阶段&＃xff0c;在 stages 中使用

variables 用于定义变量

before_script 执行 script 前的操作

script 当前 stage 需要执行的操作

changes 指定 stage 触发条件

refs 指定 stage 触发的分支

image: registry.huajiao.com/gitlab-ci/node-yarn:v1.4

variables:

# $CI_PROJECT_PATH &＃xff1a; 项目id,用于项目唯一区分本项目与其它项目

# $CI_PROJECT_DIR &＃xff1a; 本地项目路径

# $PROCESS_PATH &＃xff1a; 临时文件目录(包括日志和一些临时文件)

NODE_MODULES_PATH: /runner-cache/frontend/$CI_PROJECT_PATH/$CI_BUILD_REF_NAME/node_modules

stages:

- pre_build

- build

- deploy

下载依赖:

before_script:

# 无 node_modules 文件时&＃xff0c;新建 node_modules 文件

- /bin/bash ./ci/mkdir.sh $NODE_MODULES_PATH

# 软链 node_modules 到宿主机

- ln -s $NODE_MODULES_PATH .

- cd webpack&＃64;next

stage: pre_build

script:

- echo "yarn install"

- yarn install --network-timeout 60000

only:

changes:

- webpack&＃64;next/package.json

refs:

- test

- test-99

- test-128

- master

- ci

- feature/ci-test

构建:

stage: build

variables:

CI_COMMIT_BEFORE_SHA_PATH: /mnt/gv0/gitlab-runner-cache/$CI_PROJECT_PATH

CI_COMMIT_BEFORE_SHA_FILE_NAME: $CI_BUILD_REF_NAME.sh

CI_COMMIT_BEFORE_SHA_FILE: /mnt/gv0/gitlab-runner-cache/$CI_PROJECT_PATH/$CI_BUILD_REF_NAME.sh

before_script:

# 建存此次 CI CI_COMMIT_SHA 的文件

- /bin/bash ./ci/mkfile.sh $CI_COMMIT_BEFORE_SHA_PATH $CI_COMMIT_BEFORE_SHA_FILE_NAME

# 软链 node_modules 到宿主机

- ln -s $NODE_MODULES_PATH .

- rm -rf php/share/*

- cd webpack&＃64;next

script:

# 缓存上次ci

- source $CI_COMMIT_BEFORE_SHA_FILE

- echo "CI_COMMIT_BEFORE_SHA&＃61;$CI_COMMIT_SHA" > $CI_COMMIT_BEFORE_SHA_FILE

- python3 ../ci/build.py # 编译

- /bin/bash ../ci/commit.sh # 提交编译结果

only:

changes:

- www_src/**/*

refs:

- test

- test-99

- test-128

- master

- ci

测试发布:

stage: deploy

variables:

PROCESS_PATH: /mnt/gv0/gitlab-runner-cache/deploy/process/$CI_JOB_ID # 目录不要换&＃xff0c;用于日志服务器获取日志展示

script:

- mkdir $PROCESS_PATH # 建立发布临时路径&＃xff0c;存放发布配置中间文件和结果日志用

- dplt $CI_PROJECT_DIR/.deploy_test.yml $CI_PROJECT_PATH $CI_PROJECT_DIR/php/ $PROCESS_PATH

# dplt 发布yml配置

- echo "发布完成&＃xff0c;错误日志查看http://new.admin.wolffy.qihoo.net/log?path&＃61;"$PROCESS_PATH

- echo &＃96;ls $PROCESS_PATH/*.log&＃96;

only:

changes:

- php/**/*

refs:

- test

下载依赖阶段(pre_build stage)

下载依赖的方案是&＃xff1a;当 package.json 文件发生变化时&＃xff0c;触发 pre_build stage&＃xff0c;执行 yarn install。下载的 node_modules 放在宿主机下&＃xff0c;执行时通过软链获取依赖。

构建阶段(build stage)

构建阶段&＃xff0c;分为 3 部分&＃xff1a;

diff 文件变化

前端 build

commit build 后结果

diff 文件变化

每次 CI 时&＃xff0c;将当前 CI commit SHA(CI_COMMIT_SHA 变量)存在文件中&＃xff0c;存为 CI_COMMIT_BEFORE_SHA 变量&＃xff0c; diff 时&＃xff0c;git diff 当前 CI 与上次 commit SHA 的变化。

前端 build

根据 git diff 的变化情况&＃xff0c;确定本次需要打包的项目。

commit 打包后生成的 HTML 文件

在 GitLab CI/CD 提交代码时&＃xff0c;使用 Git 凭证存储&＃xff0c;提交打包后的 HTML 文件。Git 凭证存储细节可参考凭证存储文档。

发布阶段(deploy stage)

发布阶段&＃xff0c;使用内部的 rsync 工具 dplt 将打包后的 HTML 文件部署。dplt 可配置集群、机器列表。

五、目前的问题及后续方向对于一个持续集成&＃xff0c;虽然实现了自动构建和发布&＃xff0c;但缺少关键的测试环节。

借助于 GitLab CI/CD&＃xff0c;我们实现了线上环境的一致&＃xff0c;但本地开发环境和线上环境仍然不一致&＃xff0c;可能存在本地没有问题&＃xff0c;线上出现问题的情况。

从 SVN 切到 Git 开发后&＃xff0c;分支管理策略&＃xff0c;分支命名规范&＃xff0c;commit message 规范&＃xff0c;CodeReview 等&＃xff0c;在团队中需要逐步规范。

原文链接&＃xff1a;https://mp.weixin.qq.com/s/0VtDFv5bxJp2OyJGufBV0w

推荐阅读

io
大量研发销售产品设计市场岗位！

关于我们EMQ是一家全球领先的开源物联网基础设施软件供应商，服务新产业周期的IoT&5G、边缘计算与云计算市场，交付全球领先的开源物联网消息服务器和流处理数据 ... [详细]

蜡笔小新 2023-12-13 21:02:32
io
clone的fork与pthread_create创建线程有何不同

本文讨论了clone的fork与pthread_create创建线程的不同之处。进程是一个指令执行流及其执行环境，其执行环境是一个系统资源的集合。在调用系统调用fork创建一个进程时，子进程只是完全复制父进程的资源，这样得到的子进程独立于父进程，具有良好的并发性。但是二者之间的通讯需要通过专门的通讯机制，另外通过fork创建子进程系统开销很大。因此，在某些情况下，使用clone或pthread_create创建线程可能更加高效。 ... [详细]

蜡笔小新 2023-12-12 20:00:06
io
scrapy存入excel时，excel文件被反复擦除重写。文件大小始终不超过100k，请问这种情况改如何解决

怀疑是每次都在新建文件，具体代码如下 ... [详细]

蜡笔小新 2023-12-13 17:53:49
go
sklearn数据集库中的常用数据集类型介绍

本文介绍了sklearn数据集库中常用的数据集类型，包括玩具数据集和样本生成器。其中详细介绍了波士顿房价数据集，包含了波士顿506处房屋的13种不同特征以及房屋价格，适用于回归任务。 ... [详细]

蜡笔小新 2023-12-13 17:45:15
web
svnWebUI：一款现代化的svn服务端管理软件

svnWebUI是一款图形化管理服务端Subversion的配置工具，适用于非程序员使用。它解决了svn用户和权限配置繁琐且不便的问题，提供了现代化的web界面，让svn服务端管理变得轻松。演示地址：http://svn.nginxwebui.cn:6060。 ... [详细]

蜡笔小新 2023-12-11 11:01:10
io
云原生应用最佳开发实践之十二原则（12factor）

目录简介一、基准代码二、依赖三、配置四、后端配置五、构建、发布、运行六、进程七、端口绑定八、并发九、易处理十、开发与线上环境等价十一、日志十二、进程管理当 ... [详细]

蜡笔小新 2023-12-09 09:35:02
js
大坑|左上角_pycharm连接服务器同步写代码(图文详细过程)

篇首语：本文由编程笔记#小编为大家整理，主要介绍了pycharm连接服务器同步写代码(图文详细过程)相关的知识，希望对你有一定的参考价值。pycharm连接服务 ... [详细]

蜡笔小新 2023-10-17 19:47:17
list
python字符串随机生成密码_Mac OS生成随机密码的Python脚本

很多时候在注册一些比较重要的帐号，或者使用一些比较重要的接口的时候，需要使用到随机字符串，为了方便，我们设计这个脚本需要注意 ... [详细]

蜡笔小新 2023-10-17 18:20:12
web
markdown [软件代理设置]

本文由编程笔记#小编为大家整理，主要介绍了markdown[软件代理设置]相关的知识，希望对你有一定的参考价值。 ... [详细]

蜡笔小新 2023-10-17 18:19:28
install
Django学习笔记之djangodebugtoolbar使用指南

介绍django-debug-toolbar是一组可配置的面板，可显示有关当前请求响应的各种调试信息，并在单击时显示有关面板内容的更多详细信息。github地址文档地址安装配置1. ... [详细]

蜡笔小新 2023-10-17 15:14:27
install
Hadoop （CDH4发行版）集群部署（部署脚本，namenode高可用，hadoop管理）

前言折腾了一段时间hadoop的部署管理，写下此系列博客记录一下。为了避免各位做部署这种重复性的劳动，我已经把部署的步骤写成脚本，各位只需要按着本文把脚本执行完，整个环境基本就部署 ... [详细]

蜡笔小新 2023-10-16 15:11:51
get
使用TortoiseSVN避免删除文件 - Avoid Deletions of Files using TortoiseSVN

IamsettingupApacheserverwithTortoiseSVNforalocalsourcecoderepository.Ihaveobservedt ... [详细]

蜡笔小新 2023-10-16 09:24:18
merge
双十一在家学用 Git

对于所有的开发者来说，掌握一门代码版本控制系统都是必须的，无论是自己做项目，团队合作，工作中的合作，都离不开版 ... [详细]

蜡笔小新 2023-10-15 18:14:34
io
Hadoop之Yarn

目录1Hadoop1.x和Hadoop2.x架构区别2Yarn概述3Yarn基本架构4Yarn工作机制5作业提交全过程6资源调度器7任务的推测执行1Hadoop1.x和Hadoo ... [详细]

蜡笔小新 2023-10-15 12:16:30
install
vsCode配置通过Github同步(Settings Sync)

vsCode配置通过Github同步(Settings Sync) ... [详细]

蜡笔小新 2023-10-16 20:41:08

Tags | 热门标签

RankList | 热门文章