Gitlab-CI/CD 前端自动化部署

基本概念

CI/CD：

CI，Continuous Integration，为持续集成。即在代码构建过程中持续地进行代码的集成、构建、以及自动化测试等；有了 CI 工具，我们可以在代码提交的过程中通过单元测试等尽早地发现引入的错误；

CD，Continuous Deployment，为持续交付。在代码构建完毕后，可以方便地将新版本部署上线，这样有利于快速迭代并交付产品。

GitLab CI/CD

GitLab CI/CD（以下简称 gitlab-ci）是一套基于 GitLab 的 CI/CD 系统，通过在项目根目录下配置 .gitlab-ci.yml 文件，可以控制 ci 流程的不同阶段，例如 install/检查/编译/部署服务器。gitlab 平台会扫描 .gitlab-ci.yml 文件，并据此处理 ci 流程

ci 流程在每次团队成员 push/merge 后之后触发。每当你 push/merge 一次，gitlab-ci 都会检查项目下有没有 .gitlab-ci.yml 文件，如果有，它会执行你在里面编写的脚本，并完整地走一遍从 intall => eslint 检查=>编译 =>部署服务器的流程

准备

本机环境

• 系统： CentOS 8
• gitlab：GitLab Community Edition 14.2.3
• node：10.24.0

本案例需要依赖 gitlab，如果没有安装的话， 可以看 gitlab 搭建 这篇文章

并确保配置了 SSH Key，如果没有配置，可以看 生成 ssh-key 并导入到 gitlab 这篇文章

在 gitlab 创建一个新项目

不要勾选创建 README.me 选项

在本地创建一个新项目

然后在 本地 创建一个 hello-world 项目，这里以 Vue 为例

vue create hello-world

初始化 git 并添加远程仓库为刚刚创建的 gitlab 的 hello-word 地址

cd hello-world
git init
git remote add origin [gitlab 上 hello-world 的地址]
git add .
git commit -m "Initial commit"
git push -u origin master

获取注册令牌

推送成功后，进入到项目的设置 => CI/CD => Runner 选项，复制出下面的注册令牌

准备工作已就绪，开始安装 gitlab-ci 工具

安装 gitlab-runner

添加源

CentOS

curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.rpm.sh | sudo bash

Debian/Ubuntu

curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.deb.sh | sudo bash

安装 gitlab-runner

CentOS

sudo yum install gitlab-runner

Debian/Ubuntu

sudo apt-get install gitlab-runner

注册 gitlab-runner 账号

sudo gitlab-runner register

• url：gitlab 地址或者 http://localhost:GITLAB_PORT/(gitlab 和 gitlab-runner 需在同一台服务器上)
• token：项目的 token，就是刚刚复制的注册令牌
• name：runner 的名字，用于区分 runner，随意
• tags：用于匹配任务（jobs）和执行任务的设备（runner）
• executor：执行环境，一般是 shell

启动 gitlab-runner

sudo service gitlab-runner start

此时 gitlab-runner 就配置完成了，但是我们还有最后关键的一步要处理：编写 gitlab-ci 配置文件

CI 配置文件

当有新内容 push 到仓库后，GitLab 会查找是否有 .gitlab-ci.yml 文件，如果文件存在， runner 将会根据该文件的内容开始 build 本次 commit。 .gitlab-ci.yml 使用 YAML 语法， 需要格外注意缩进格式，要用空格来缩进，不能用 tabs 来缩进。

在本地项目下新建 .gitlab-ci.yml，配置大致如下

stages: # 所有阶段任务
  - test
  - build
  - deploy

before_script:
  - echo "这是执行 test_job 之前会执行的脚本"

test_job: # 创建一个名为 test_job 的任务
  stage: test # 阶段任务，与 stages 对应
  only: # 告诉 Runner 这个名为 test_job 的任务，只在master分支上执行
    - master
  script: # 要执行的脚本
    - npm install
    - npm run test

  tags: # 注册时输入的 tag 名
    - deploy

build_job:
  stage: build
  only:
    - master
  script:
    - echo "============ 开始构建 ============"
    - npm run build
    - echo "============ 构建完成 ============"

  tags:
    - deploy

deploy_job:
  stage: deploy
  only:
    - master
  script:
    - cp -r dist/* /data/dynamic/blog/ # 复制打包好的文件到 web 服务器文件目录下
    - echo "============ 部署完成 ============"

  tags:
    - deploy

提示

关于更多 gitlab-ci 配置文件参数介绍可以前往 https://docs.gitlab.com/ee/ci/yaml/ 查看，在此不过多介绍

重新推送，然后回到 gitlab 仓库，会发现流水线已经开始执行了

完成

点进去能看到我们刚刚创建的几个任务

点击任务详情，就可以看到当前任务的输出控制台了

任务顺序会按照配置文件中的 stages 依次执行，至此 gitlab 流水线全部配置完成

遇到的问题

push 之后一直显示 pending，点进去之后报错，没有分配的 runner。

这个可能是 gitlab-runner register 的时候配置了 tags，而 .gitlab-ci.yml 中没有设置 tags，导致没有分配的 runner。可以点击 runner(上图中绿点后面被遮住的部分)查看 runner 的 tags 并在.gitlab-ci.yml 中进行相应配置。

忘记设置了哪些 tags 或者需要新增修改 tags

去 gitlab => 顶部管理中心 => 概览 => Runner => 编辑项目对应的 Runner => 设置标签选项

bash: xxx: command not found

检查服务器本地是否安装了 node，以及 npm 全局安装了 vue 脚手架

如果确认都配置了，往下看

runner 运行过程中报错没有权限

CI 默认执行用户为 gitlab-runner，可以通过以下命令查看。

ps aux | grep gitlab
# --user 后面就是执行命令的账号

进入 runner 配置文件修改

vi /etc/systemd/system/gitlab-runner.service
# 找到 --user 之后的用户名改成 root
# 执行以下命令
systemctl daemon-reload
systemctl restart gitlab-runner

或者直接重装 runner

gitlab-runner uninstall # 删除 gitlab-runner
gitlab-runner install --working-directory /home/gitlab-runner --user root # 重新以 root 用户下载 gitlab-runner
systemctl restart gitlab-runner # 重启 gitlab-runner