干货 | 携程 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镜像，此