你在使用哪种编程语言?快来投票,亲手选出你心目中的编程语言之王 了解详情
写点什么

干货 | 携程 Web CI/CD 实践

2021 年 6 月 05 日

干货 | 携程 Web CI/CD 实践

一、背景

在携程的日常 Web 开发生命周期中,本地代码开发阶段可通过 NFES 框架(携程内部一个支持 SSR 框架,其中还包含许多公共基础业务模块及 UI 组件)来快速完成项目需求。但开发完代码之后常常会遇到如下几点问题:


  • 环境问题:Web/Node 资源本地构建/测试环境和生产环境差异化大,导致有些问题无法及时发现 

  • QA 流程:Web/Node 端提交代码流程没有规范的 QA 环节,代码质量不可控

  • 构建流程:资源本地构建与镜像构建是独立的,版本易混淆 

  • 代码开发完后的各个步骤比较分散,难集中管理

二、目标

通过引入 CI/CD 解决方案,建立完善的准备环境/测试/资源构建/镜像构建一整个流程的链路,使它可帮助项目以更快的速度和更高的质量来交付。

三、实现与实践

NFES 的 Web CI/CD 的实现,简单来说就是通过管道化 (GitDev Pipeline) 的执行过程来完成持续集成和持续交付,这篇文章先不涉及持续部署。


其管道 (Pipeline) 中集成 QA,资源构建,生成镜像等多个 Stage,而每个 Stage 中都包含详细的 Step 来完成其功能。接下来我们来详细从管道 (Pipeline) 中的 Stage/Step 的角度来介绍下 NFES 的 Web CI/CD。


管道在这里可以理解为实现目标的顶层组件,整个 NFES Web CI/CD 就是这样的组件组合而成。目前 Web/Node 相关的管道分为三个 Stage:



1)Install Stage


a. Install Step,安装用户项目下的依赖模块


2)Verify Stage

这里集成了三个 Step:


a. Lint Step,静态代码检测

b. Test Step,单元测试/UI 测试

c. Build Step,资源构建


3)SonarAndImage Stage


a. Sonar Step,Sonar 代码检测并上传,此步骤依赖于 Verify Stage 中的 Lint/Test Step

b. Image Step,构建 Docker 镜像,此步骤依赖于 Verify Stage 中的 Build Step


上面三个 Stage 是依次顺序执行,而在同个 Stage 中的多个 Step 则是并发执行的。这些执行顺序的控制可通过编写.gitlab-ci.yml 文件来完成。这里先简单介绍下.gitlab-ci.yml CI/CD 配置的编写。


.gitlab-ci.yml 是放在仓库根目录中的文件,默认仓库会去这个文件中读取 CI/CD 的相关配置。在此文件配置中你可以定义如下:


  • 定义环境变量 

  • 需要顺序或者并行运行的脚本命令 

  • 前后 Step 依赖关系 

  • 此 Step 所需使用缓存和设置缓存 

  • 触发的条件分支


具体常用配置代码如下:



#配置所需的基础镜像地址image: xxxxxxxxx
#配置相关变量variables: PROXY: http://proxy HTTP_PROXY: $PROXY
#配置Stages的名称及顺序stages: - Install - Verify
......# Install Stage的详细配置Test: #Step的名称 stage: Verify #属于哪个Stage artifacts: #配置产物存档文件,可在Pipeline运行界面取到配置的文件,但此存档只能保存默认一周 paths: - reports/ exclude: #忽略某些文件不作为产物存档文件 - .git - .git/** when: always cache: #配置缓存 key: keyName paths: - node_modules #所需缓存的文件/文件夹 policy: pull #如需获取缓存的文件,这里定制policy属性为pull allow_failure: true #此步骤是否允许失败,如果允许,即使步骤执行失败,仍旧可执行下个Stage dependencies: #配置此Step依赖哪个Step - Install script: #配置所需执行的命令 - cd /testFolder - node index only: - master #配置分支 只有配置的分支才会执行相关的Pipeline
......
复制代码


在日常开发使用中,携程的 GitDev CI/CD 则提供公用的配置模版,如用户没有特殊 Step 的需求,可通过选择 Step 模版或者选择应用类型模版来自动生成上面的配置文件,无需关注 yml 的详细配置。

接下来我们详细看下 NFES Web CI/CD 的 Install,Verify 和 SonarAndImage 三个 Stage 做了哪些事情?

3.1 Install Stage

Install Stage 中只包含一个 Step,即执行安装用户项目下的模块依赖。此阶段安装结束后的 nodemodules 则会作为缓存给之后的 Step 使用,可节省很多不必要的重复安装模块的时间。当然如果在同一个 commitID 的情况下,多次执行这个 Install Stage,则后面几次安装的 nodemodules 其实就是取第一次安装的缓存。

3.2 Verify Stage

Verify Stage 默认会包含三个步骤 Lint,Test,Build。这个 Stage 其实是一个规范的 QA 环节,而 Build 的 Step 为什么要放在此处,就是想构建与测试并发执行,从而缩短整个 Pipeline 的运行时间。


详细的各个 Step 的实现如下:


1)Lint Step 集成了 eslint 静态代码检测功能


静态代码检测功能通过封装的全局模块来完成代码检测,其默认使用 eslint:recommended 推荐规则。如用户需要自定义 eslint 规则可以直接把规则写在当前项目的 eslintrc.json 文件中,模块会自动整合其默认规则。如想要忽略检查某些文件,则把规则写在.eslintignore 文件中。执行完成后会生成 eslint-report.json,此文件会作为 artifacts 可在 pipeline 的 step 任务页面中直接下载查看,也会通过后面的 Sonar Step 上传到 Sonar。


2)Test Step 集成了单元测试以及 UI 测试 


集成的单测框架又可分为 mocha 和 jest,Web 端统一使用 jest,NFES 测试镜像中默认已有 jest 相关模块,如无特殊需求则不需要在用户项目的依赖中安装测试相关依赖的模块。如需自定义 jest 相关配置可写在用户项目下的 jest.config.js 中。单元测试的运行命令统一为:npm run test,其执行结果会以 html/json/clover/lcov 输出,输出结果中 lcov 和 clover.xml 文件与 GitDev 做集成,使其结果与代码的 commitID 进行绑定,这样每次代码提交就可在界面上直接查看本次提交代码的具体单测运行结果。这里也可设置对每次代码提交的单元测试覆盖率的要求,如其覆盖率不低于 60%,否则不能进行下一步骤。


每次代码提交的 CommitID 的单元测试结果展示如下:



集成的 UI 测试是作为一个可选 Step,我们提供了集成 puppeteer/cucumber 的镜像,用户如有 UI 测试的需求可自行在 Test Stage 中添加该 UI Test Step。在 UI 测试中增加了视频录制的功能,每个 Case 对应一个视频,等用户的 UI Cases 执行完成后,则会自动生成报表并发布到资源站点上,方便用户查看及排查问题。


UI 测试报表结果中录制视频(部分截图)展示如下:


3)Build Step 集成页面的资源构建 


这里的构建其实就是把在线构建搬到了 Pipeline 的 Build Step 中。首先是构建环境的搭建,分为两块:框架所需的依赖模块环境和用户项目依赖的模块环境。


关于 NFES 框架的依赖模块环境,Build Step 使用的构建镜像中已经集成了 NFES 项目所需的开发态模块(我们对开发态模块加载做了些优化,把如 Babel 插件,webpack,loader 等通用的模块全都集成到 cli 的全局模块中,然后预装到构建镜像)。执行构建时,更改构建时项目所需开发态模块路径指向预装路径,这样就可以不需要安装框架依赖模块。而对于用户项目依赖的模块环境则可以重用 Install Stage 中的 node_modules 中的缓存,这两点使用户项目安装模块的时间大幅度减少。


搭建完构建环境后,执行相关在线构建命令开始构建,构建的过程及日志都可通过 Pipeline 界面得到。构建完成后接下来是构建产物的处理。这里的 NFES 项目构建产物可分为 Web 端资源/node 服务端资源。Web 端的资源可以直接发布并获得相应的资源地址,此 Web 资源地址也会及时更新到 node 服务端资源中的资源路径。最后通过配置中 artifacts 属性来确定哪些 node 端的资源文件需要上传给下一步 Image Stage 来构建发布镜像。

3.3 SonarAndImage Stage

SonarAndImage 包含了 Sonar 和 Image 两个 Step, 这个 Stage 是目前管道中最后一个专门收集与处理前面依赖 Step 产物的 Stage。


1)Sonar Step 

此步骤是依赖于 Test 和 Lint 这两个 Step, 用来收集依赖的这两个 Step 执行的结果并上传至 Sonar 中。用户可以在 sonarqube 的网站查看历史的代码质量报告。


2)Image Step 

此步骤是依赖于 Build Step,它是获取 Build 的构建产物与基础镜像一起构建出发布镜像并推送到 Hub 中,为接下来的应用发布做准备。到此步骤整个 NFES Web CI/CD 的流程就结束了。

四、小结

以上就是整个 NFES Web CI/CD 的实现与实践。目前几乎所有的 NFES 项目都已经切到 CI/CD 的流程上,它带来了集中式流程化管理,一站式对用户透明的资源构建与镜像构建更简单快捷,开发效率得到了很大的提高。


作者简介

西杰,携程软件技术专家,关注前端技术及其生态,致力于提升前端开发效能及质量。


本文转载自:携程技术(ID:ctriptech)

原文链接:干货 | 携程 Web CI/CD 实践

2021 年 6 月 05 日 07:002158

评论

发布
暂无评论
发现更多内容

代码也能“杀”虫:此虫,真虫非Bug也

华为云开发者社区

代码 华为云 modelarts

云算力矿机租赁挖矿APP系统开发|云算力矿机租赁挖矿软件开发

开發I852946OIIO

系统开发

“持证”就能上岗 京东绿色内推招聘通道开启

京东科技开发者

云计算 大数据 程序人生

智慧公安大数据可视化分析平台开发,重点人员管控平台建设

WX13823153201

要想软件“一想之美”,UI测试少不了

华为云开发者社区

软件 测试 华为云

边缘计算安全技术研究

华为云原生团队

云计算 大数据 云原生 边缘计算 华为云

软件界旷世之架:测试驱动开发(TDD)之争

华为云开发者社区

软件 测试 TDD 代码 devcloud

一个正确的编程思维

程序员吴师兄

28天写作

SpringCloud从入门到精通02---支付模块01

Felix

Yarn RM写ZNode超数据量限制bug修复

笨小康

大数据 zookeeper YARN

技术实录 | 灵雀云基于 OVN 的 Kubernetes 网络架构解析

York

灵雀云 Kubernetes k8s Kube-OVN

新思科技网络安全研究中心发现Bouncy Castle中的漏洞

InfoQ_434670063458

新思科技 Bouncy Castle

Kube-OVN 0.6.0 发布,支持 IPv6、流量镜像及更多功能

York

灵雀云 Kubernetes k8s Kube-OVN

Python进阶系列文章汇总

Kaito

Python 爬虫

Java中定时器Timer致命缺点(附学习方法)

叫练

定时任务 高效学习 多线程 定时器 技术学习

volatile 关键字精讲

伯阳

Java volatile 关键字 后端开发 多线程与高并发

Hive的调优你都知道那些?

大数据老哥

大数据 hadoop hive

价值 - 价值的底色(一)

石云升

读书笔记 投资 28天写作 价值

大作业一:架构设计方案评审

Nick~毓

Spark HistoryServer日志解析&清理异常

笨小康

大数据 spark hdfs

软件测试--缺陷报告

测试人生路

软件测试

Kube-OVN v 0.7.0 发布,IPAM、子网和安全功能增强

York

灵雀云 Kubernetes k8s Kube-OVN

VUE项目性能优化实践——通过懒加载提升页面响应速度

Geek_Willie

Vue

灵雀云Kube-OVN:基于OVN的开源Kubernetes网络实践

York

灵雀云 Kubernetes k8s Kube-OVN

如果你听说过 Elastic Certified Engineer

escray

七日更 28天写作 死磕Elasticsearch 60天通过Elastic认证考试

文档驱动开发模式在 AIMS 中的应用与实践

华为云开发者社区

Web 代码 API 文档

ETL都没弄懂,谈什么大数据 ?我用一分钟给你整明白

智分析

ETL

SpringCloud从入门到精通01---父项目创建

Felix

SpringCloud Eureka 高可用架构

Kube-OVN 0.5.0 发布,支持 NetworkPolicy、用户自定义网卡和MTU

York

灵雀云 Kubernetes k8s Kube-OVN

再谈自研开源Kube-OVN, 设计思路及实现原理

York

灵雀云 Kubernetes k8s Kube-OVN

从七日更,到28天写作挑战,我无法拒绝的原因

梁龙先森

前端 编程语言 28天写作

PingCAP DevCon 现场直播

PingCAP DevCon 现场直播

干货 | 携程 Web CI/CD 实践-InfoQ