2. .gitlab-ci.yml 文件
活动项目 .gitlab-ci.yml 文件如下,下面主要通过活动项目的 .gitlab-ci.yml 文件来介绍我们的实践过程、.gitlab-ci.yml 详细的用法,可参考 GitLab CI/CD Pipeline Configuration Reference 文档(https://docs.gitlab.com/ee/ci/yaml/README.html)
2.1 .gitlab-ci.yml 文件介绍
image 是执行 CI/CD 依赖的 Docker 基础镜像。镜像中有 Node、Yarn、Dalp(内部 rsync 工具)。
stages 中定义了我们的 pipeline 分为以下几个过程:
1. 下载依赖阶段 pre_build
2. 构建阶段 build
3. 发布阶段 deploy
stage 申明当前的阶段,在 stages 中使用
variables 用于定义变量
before_script 执行 script 前的操作
script 当前 stage 需要执行的操作
changes 指定 stage 触发条件
refs 指定 stage 触发的分支
image: registry.huajiao.com/gitlab-ci/node-yarn:v1.4variables:# $CI_PROJECT_PATH :项目id,用于项目唯一区分本项目与其它项目# $CI_PROJECT_DIR :本地项目路径# $PROCESS_PATH :临时文件目录(包括日志和一些临时文件)NODE_MODULES_PATH: /runner-cache/frontend/$CI_PROJECT_PATH/$CI_BUILD_REF_NAME/node_modulesstages:- pre_build- build- deploy下载依赖:before_script:# 无 node_modules 文件时,新建 node_modules 文件- /bin/bash ./ci/mkdir.sh $NODE_MODULES_PATH# 软链 node_modules 到宿主机- ln -s $NODE_MODULES_PATH .- cd webpack@nextstage: pre_buildscript:- echo 'yarn install'- yarn install --network-timeout 60000only:changes:- webpack@next/package.jsonrefs:- test- test-99- test-128- master- ci- feature/ci-test构建:stage: buildvariables:CI_COMMIT_BEFORE_SHA_PATH: /mnt/gv0/gitlab-runner-cache/$CI_PROJECT_PATHCI_COMMIT_BEFORE_SHA_FILE_NAME: $CI_BUILD_REF_NAME.shCI_COMMIT_BEFORE_SHA_FILE: /mnt/gv0/gitlab-runner-cache/$CI_PROJECT_PATH/$CI_BUILD_REF_NAME.shbefore_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@nextscript:# 缓存上次ci- source $CI_COMMIT_BEFORE_SHA_FILE- echo 'CI_COMMIT_BEFORE_SHA=$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: deployvariables:PROCESS_PATH: /mnt/gv0/gitlab-runner-cache/deploy/process/$CI_JOB_ID # 目录不要换,用于日志服务器获取日志展示script:- mkdir $PROCESS_PATH # 建立发布临时路径,存放发布配置中间文件和结果日志用- dplt $CI_PROJECT_DIR/.deploy_test.yml $CI_PROJECT_PATH $CI_PROJECT_DIR/php/ $PROCESS_PATH# dplt 发布yml配置- echo '发布完成,错误日志查看http://new.admin.wolffy.qihoo.net/log?path='$PROCESS_PATH</span></span></code><code style="padding: 0px; max-width: 1000%; white-space: pre; display: flex; position: relative; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; box-sizing: border-box !important; overflow-wrap: break-word !important;"> - echo `ls $PROCESS_PATH/*.log`only:changes:- php/**/*refs:- test
2.2 下载依赖阶段(pre_build stage)
下载依赖的方案是:当 package.json 文件发生变化时,触发 pre_build stage,执行 yarn install。下载的 node_modules 放在宿主机下,执行时通过软链获取依赖。
2.3 构建阶段(build stage)
构建阶段,分为 3 部分
1. diff 文件变化
2. 前端 build
3. commit build 后结果
2.3.1 diff 文件变化
每次 CI 时,将当前 CI commit SHA(CI_COMMIT_SHA 变量)存在文件中,存为 CI_COMMIT_BEFORE_SHA 变量, diff 时,git diff 当前 CI 与上次 commit SHA 的变化。
2.3.2 前端 build
根据 git diff 的变化情况,确定本次需要打包的项目。
2.3.3 commit 打包后生成的 HTML 文件
在 GitLab CI/CD 提交代码时,使用 Git 凭证存储,提交打包后的 HTML 文件。Git 凭证存储细节可参考凭证存储文档(https://git-scm.com/book/zh/v2/Git-工具-凭证存储)
2.4 发布阶段(deploy stage)
发布阶段,使用内部的 rsync 工具 dplt 将打包后的 HTML 文件部署。dplt 可配置集群、机器列表。
五、目前的问题及后续方向
1. 对于一个持续集成,虽然实现了自动构建和发布,但缺少关键的测试环节。
2. 借助于 GitLab CI/CD,我们实现了线上环境的一致,但本地开发环境和线上环境仍然不一致,可能存在本地没有问题,线上出现问题的情况。
3. 从 SVN 切到 Git 开发后,分支管理策略,分支命名规范,commit message 规范,CodeReview 等,在团队中需要逐步规范。
六、主要参考资料
持续集成是什么?(http://www.ruanyifeng.com/blog/2015/09/continuous-integration.html)
什么是 CI/CD?(https://www.redhat.com/zh/topics/devops/what-is-ci-cd)
GitLab Docs(https://docs.gitlab.com/)
Introduction to CI/CD with GitLab(https://docs.gitlab.com/ee/ci/introduction/)
用 GitLab CI 进行持续集成(https://scarletsky.github.io/2016/07/29/use-gitlab-ci-for-continuous-integration/)
如何实现前端工程的持续集成与持续部署?(https://www.zhihu.com/question/60194439)
基于 GitLab CI 的前端工程CI/CD实践(https://github.com/giscafer/front-end-manual/issues/27)





































苏公安网备 32011402010933号