写点什么

干货 | 携程 Web CI/CD 实践

  • 2021-06-05
  • 本文字数:3321 字

    阅读完需:约 11 分钟

干货 | 携程 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-06-05 07:003157

评论 1 条评论

发布
用户头像
什么流水线平台
2023-08-19 09:24 · 北京
回复
没有更多了
发现更多内容

节能环保LED显示屏为什么是未来发展趋势?

Dylan

LED显示屏 led显示屏厂家

bboss http负载均衡器使用指南

大河

HTTP bboss httpproxy

校区多,客情管理难?看中进教育使用明道云的新解法

明道云

Kyligence 亮相 Gartner 2022 数据与分析峰会,解锁数据智能新潜力

Kyligence

数据管理 指标中台

AntDB最新成果亮相全球分布式云大会,推动企业数字化变革深入

亚信AntDB数据库

AntDB

最常见的两个Jenkins问题,以及解决方法

龙智—DevSecOps解决方案

ci CI/CD CI/CD管道

入门机器学习?还是先抢救一下数学吧!

博文视点Broadview

BulkProcessor异步批处理组件使用

大河

elasticsearch bboss bulkprocess

技术分享 | 测试平台开发-前端开发之数据展示与分析

霍格沃兹测试开发学社

2022 世界人工智能大会|人工智能与开源技术先锋论坛即将开幕

Kyligence

开源技术 人工智能大会

NFT平台开发:NFT数字馆藏平台开发

开源直播系统源码

数字藏品软件开发 数字藏品开发 数字藏品系统

技术分享 | 测试人员必须掌握的测试用例

霍格沃兹测试开发学社

兆骑科创人才引进服务平台,线上直播路演,投融资对接

兆骑科创凤阁

Elasticsearch添加修改删除索引文档

大河

elasticsearch bboss

这份SVN命令备忘清单,请查收

龙智—DevSecOps解决方案

svn 版本控制系统

字节跳动基于 ClickHouse 优化实践之“查询优化器”

字节跳动数据平台

OLAP Clickhouse 查询优化 数据库开发 数据引擎

项目经理和ScrumMaster可以是同一个人吗?

ShineScrum

Scrum 敏捷 ScrumMaster 项目经理

兆骑科创创新创业服务平台,海内外高层次人才引进,赛事承办

兆骑科创凤阁

厚积薄发--一文带您了解阿里云 RocketMQ 轻量版消息队列(MNS)

阿里巴巴云原生

阿里云 RocketMQ 云原生 消息队列

网络组件axios可以在OpenHarmony上使用了

OpenHarmony开发者

Open Harmony

技术分享 | 这些常用测试平台,你们公司在用的是哪些呢?

霍格沃兹测试开发学社

快速上手Elasticsearch bboss restclient

大河

elasticsearch bboss restclient

bboss数据同步ETL工具介绍

大河

elasticsearch ETL bboss

如何应对ITSM难题,打造现代化、高效的ITSM解决方案?

龙智—DevSecOps解决方案

ITSM ITSM软件 ITSM解决方案

如何建立开源战略

龙智—DevSecOps解决方案

开源 漏洞修复 漏洞检测 漏洞管理

技术分享 | 专项测试技术初识Hook

霍格沃兹测试开发学社

Http/Https插件使用指南

大河

https HTTP Data ETL bboss

蓝牙5.0简介、nRF52832 BLE样例工程框架及main函数初始化流程简析

矜辰所致

蓝牙 启动流程 8月月更 nRF52832

技术分享 | 这些常用测试平台,你们公司在用的是哪些呢?

霍格沃兹测试开发学社

GOPS现场 | 对话龙智董事长何明,探讨DevOps安全新概念

龙智—DevSecOps解决方案

运维 GOPS大会 GOPS全球运维大会

移动端App自动化之触屏操作自动化

霍格沃兹测试开发学社

干货 | 携程 Web CI/CD 实践_架构_携程技术_InfoQ精选文章