gitlab CI + jenkins 实践

gitlab CI + jenkins 实践

使用gitlab CI

基于 Gitlab CI 快速构建持续集成环境

1.开启ci

开启ci只要在git仓库的根路径下创建一个.gitlab-ci.yml的yaml文件.
事例网站:https://gitlab.com/gitlab-examples
具体说名:

# 设置docker环境,只要https://hub.docker.com有的都可以下载
image: chenhuarong/green-link-frontend:test

# 设置缓存 path 为文件相对路径 必须是数组
cache:
  paths:
  - node_modules/

# 定义变量NODE_MODULES => 使用 $NODE_MODULES
variables:
  NODE_MODULES: "node_modules/"

# 阶段
stages:
  - dev
  - test
  - staging
  - master

# 运行前的脚本(配置自定义环境)
before_script:
  - npm install @fow/fow-view --registry=http://greenlink-jenkins.fowtest.com:7001
  - yarn install


################################  ci测试  ###########################################
# 测试
# 以下为每个独立测试
# stage 的值必须在之前的申明里面
# only  设置什么分之才会触发 该测试 (数组)
# script 测试运行的脚本
staging_build:
  stage: staging
  only:
    - staging
  script:
    - npm run build-test

# 开发
dev_build:
  stage: dev
  only:
    - dev
  script:
    - npm run build-dev

# master
master_build:
  stage: master
  only:
    - master
  script:
    - npm run build-prod

使用添加.gitlab-ci.yml文件之后,提交到gitlab之后,在该仓库的CI/CD=>Pipelines和Jobs就能看到打包结果.

2.前端打包流程

流程.png

1. 开发分之完成
2. merge到dev时触发CI进行pipeline
3. pipeline运行测试打包时,如果编译成功就把 (index.html+js+css+assert 上传oss服务器)
4. pipeline 结束触发pipeline事件,推送到jenkins触发jenkins的脚本事件
5. 运行jenkins脚本检查oss文件版本,删除多余版本,移动复制版本
6. 运行jenkins脚本下载index.html到本地nginx服务器文件路径下

遇到问题

1. 打包和下载包的时间过长?

解决方法:

• 使用自己的docker镜像,事先先使用yarn缓存好npm包
• 将npm包管理工具改成yarn

2. 上传oss文件超时?

解决方法:

• 超时,可能是路由查询路径过长
• 使用自己的docker镜像,手动添加dns国内服务器

3. oss版本文件管理

解决方法:

• jenkins构建的时候去管理查询oss文件