基于 GitLab CI 搭建前端自动构建环境

2018-07-12 admin

什么是持续集成 ?

持续集成(Continuous integration,简称CI)指的是,频繁地(一天多次)将代码集成到主干。

GitLab CI

什么是 GitLab CI ?

GitLab CIGitLab Continuous Integration (Gitlab 持续集成)的简称。从 GitLab 的 8.0 版本开始,GitLab 就全面集成了 Gitlab-CI,并且对所有项目默认开启。只要在项目仓库的根目录添加 .gitlab-ci.yml 文件,并且配置了 Runner (运行器),那么每一次合并请求(MR)或者 push 都会触发 CI pipeline

如果一切运行正常,你将得到与 commit 关联的标记。如图:

build-success

什么是 Pipeline ?

一次 Pipeline 其实相当于一次构建任务,里面可以包含多个流程,如安装依赖、运行测试、编译、部署测试服务器、部署生产服务器等流程。 任何提交或者 Merge Request 的合并都可以触发 Pipeline,如下图所示:


+------------------+           +----------------+
|                  |  trigger  |                |
|   Commit / MR    +---------->+    Pipeline    |
|                  |           |                |
+------------------+           +----------------+

什么是 Stages ?

Stages 表示构建阶段,说白了就是上面提到的流程。 我们可以在一次 Pipeline 中定义多个 Stages,这些 Stages 会有以下特点:

  • 所有 Stages 会按照顺序运行,即当一个 Stage 完成后,下一个 Stage 才会开始
  • 只有当所有 Stages 完成后,该构建任务 (Pipeline) 才会成功
  • 如果任何一个 Stage 失败,那么后面的 Stages 不会执行,该构建任务 (Pipeline) 失败

因此,StagesPipeline 的关系就是:

+--------------------------------------------------------+
|                                                        |
|  Pipeline                                              |
|                                                        |
|  +-----------+     +------------+      +------------+  |
|  |  Stage 1  |---->|   Stage 2  |----->|   Stage 3  |  |
|  +-----------+     +------------+      +------------+  |
|                                                        |
+--------------------------------------------------------+

什么是 Jobs ?

Jobs 表示构建工作,表示某个 Stage 里面执行的工作。 我们可以在 Stages 里面定义多个 Jobs,这些 Jobs 会有以下特点:

  • 相同 Stage 中的 Jobs 会并行执行
  • 相同 Stage 中的 Jobs 都执行成功时,该 Stage 才会成功
  • 如果任何一个 Job 失败,那么该 Stage 失败,即该构建任务 (Pipeline) 失败

所以,JobsStage 的关系图就是:


+------------------------------------------+
|                                          |
|  Stage 1                                 |
|                                          |
|  +---------+  +---------+  +---------+   |
|  |  Job 1  |  |  Job 2  |  |  Job 3  |   |
|  +---------+  +---------+  +---------+   |
|                                          |
+------------------------------------------+

安装配置

安装环境为 Ubuntu 16.04.4 LTS (GNU/Linux 4.4.0-105-generic x86_64)docker 版本为 Docker version 18.03.1-ce, build 9ee9f40

  • 安装 gitlab-ci-multi-runner

# For Debian/Ubuntu
curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-ci-multi-runner/script.deb.sh | sudo bash

# For RHEL/CentOS
curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-ci-multi-runner/script.rpm.sh | sudo bash


sudo docker images

如何使用 GitLab CI ?

  • 在项目根目录创建 .gitlab-ci.yml 文件,文件代码如下:

stages 定义 Stages,默认有三个 Stages,分别是 buildtestdeployJob.only 定义只有 develop 分支会触发相关的 Jobs


stages:
    - build
job1:
    # 是否开启 debug 模式
    # variables:
    #     CI_DEBUG_TRACE: "true"
    stage: build
    tags:
        - 新建 runner 的标签
    only:
        - develop
    script:
        - cd public
        - npm i
        - npm run build

process-1

  • 记下 URLToken,留以注册 runner 使用

注册 runner

  • 注册 runner,runner 注册成功之后,你会在 pipeline 配置页面看见 specific runners 下多出了你刚新增的 runner

sudo gitlab-ci-multi-runner register

# Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com )

你的 URL

# Please enter the gitlab-ci token for this runner

你的 Token

# Please enter the gitlab-ci description for this runner

my-runner

# Please enter the gitlab-ci tags for this runner (comma separated)

my-runner

Whether to run untagged builds [true/false]:

false

Whether to lock Runner to current project [true/false]:

false

# Please enter the executor: shell, docker, docker-ssh, ssh?

docker

# Please enter the Docker image (eg. ruby:2.1):

node:9.4.0


sudo gitlab-ci-multi-runner unregister --url url地址 --token tocken值


sudo gitlab-ci-multi-runner status


sudo gitlab-ci-multi-runner list


sudo vim /etc/gitlab-runner/config.toml

大功告成

切换到项目 Pipelines 页面,发现出现以下情况,则代表你的 runner 已经配置完成,你的每一次提交都会触发 runner

process-2

备注

  • 使用 GitLab CI 克隆私有仓库时候,会提示 Host key verification failed

    需要做如下配置,Key 写入 SSH_PRIVATE_KEYValue 写入 服务器 private SSH key。然后在 .gitlab-ci.yml 文件前面写入如下代码,并保存。

process-3


before_script:
    - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )'
    # Run ssh-agent (inside the build environment)
    - eval $(ssh-agent -s)
    # Add the SSH key stored in SSH_PRIVATE_KEY variable to the agent store
    - ssh-add <(echo "$SSH_PRIVATE_KEY")
    - mkdir -p ~/.ssh
    - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'

参考链接

Getting GitLab CI to clone private repositories

用 GitLab CI 进行持续集成

原文链接:https://segmentfault.com/a/1190000015614947

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35860.html

文章标题:基于 GitLab CI 搭建前端自动构建环境

相关文章
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
CIO最为关注的六大企业移动应用平台
2014年10月18日,由北大信息化与管理研究中心、北大CIO班教务办、大华南IT高管共赢圈联合主办,CIO时代网承办的2014“北大CIO中国行-深圳站”活动顺利举行。会上,来自各大企业的CIO、移动应用专家等140余人共聚一堂,共同探讨...
2015-11-12
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
windows 下安装nodejs 环境变量设置
要设置两个东西,一个是PATH上增加node.exe的目录C:\Program Files\nodejs,一个是增加环境变量NODE_PATH,值为C:\Program Files\nodejs\node_modules 一、下载 去nod...
2017-03-18
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Windows系统下使用Sublime搭建nodejs环境
1.下载nodejs,并安装ok后,配置好环境变量。 2.下载sublime text3 3.在package install 包中新增node插件(或者直接去SublimeText-Nodejs插件(https://github.com/...
2017-03-22
nodejs搭建本地服务器并访问文件的方法
安装node:https://nodejs.org/en/download/ 在本地建立目录:f:/nodetest,在该目录下新建index.html作为我们将要访问的内容。新建server.js作为node开启的入口: $ cd f:&...
2017-03-13
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
回到顶部