【Gitlab CI】CentOS 7 使用 gitlab-runner 实现 Vue 项目自动化构建

Gitlab 在 8.0 后默认集成 CI 功能,相比 Hook 来说可以说是更加简单一些,可以省去在服务器自行书写 Hook 接收者的麻烦

但实际使用起来也踩了很多坑,在此记录并分享

环境配置

CentOS 7 + git + docker

git 安装步骤请自行搜索(因为我忘了)

docker 安装参见 CentOS 7 安装 docker

配置 SSH key

将 .ssh/id_rsa.pub 的内容复制添加到 Gitlab 的 SSH key

不会操作请参见 Gitlab 上的官方教程

【Gitlab CI】CentOS 7 使用 gitlab-runner 实现 Vue 项目自动化构建_第1张图片

安装 gitlab-runner

这里有两种选择,通过 rpm 包安装或通过 docker 安装,本文选择的是 docker

重要的事情说三遍:不要百度!不要百度!不要百度!(虽然你可能是百度才看到这篇文章)

直接按照官网步骤进行即可:https://docs.gitlab.com/runner/install/docker.html

注册 runner

继续参照官网教程:https://docs.gitlab.com/runner/register/index.html#docker

注册时前两个需要输入的 url 和 token 来自你的 Gitlab 项目

【Gitlab CI】CentOS 7 使用 gitlab-runner 实现 Vue 项目自动化构建_第2张图片

其它选项:

Please enter the gitlab-ci description for this runner
(只是一个介绍,随意填写)
Please enter the gitlab-ci tags for this runner (comma separated):
(不填写,这里我们不介绍 tag 相关)
Please enter the executor: ssh, docker+machine, docker-ssh+machine, kubernetes, docker, parallels, virtualbox, docker-ssh, shell:
docker (选择了docker才会有下一步)
Please enter the Docker image (eg. ruby:2.6):
nnode:9.2.1-alpine (使用node的镜像,这也是我们不需要node环境的原因)

注册完毕后,去 Gitlab 项目中检查 Runner 是否连接

【Gitlab CI】CentOS 7 使用 gitlab-runner 实现 Vue 项目自动化构建_第3张图片

绿色的小圆点表示连接成功,可以进入下一步

编写 .gitlab-ci.yml

原理在此不做详述

stages:
  - build

build:
  stage: build
  only:
    - master
  script:
    - node -v
    - npm config set registry https://registry.npm.taobao.org
    - npm install
    - npm run build

commit 并 push 这个文件,会发现 Gitlab 已经在执行任务,右侧的圆圈就是我们的 build 流程

如果想实时观察控制台输出,请点击左侧的 running ,然后点击下方 pipeline 的当前任务查看控制台输出

正常情况下,能够完成 build 任务

接下来你需要做的,就是按照个人情况修改 .gitlab-ci.yml 文件(如将生成的 dist 拷贝至 nginx 相关目录等),实现构建完成到部署的工作(如果不理解可以去 我的这篇博文 找找灵感)

踩坑

安装

上面各项必须的安装都是本人亲自试验成功的版本,希望能够减少一些大家安装失败的尝试

用户

在注册没有使用 docker 选项前,我使用的是 shell,此时 gitlab-runner 会通过一个名为 gitlab-runner 的用户执行 shell 脚本

这里首先需要你创建一个名为 gitlab-runner 的用户,并授予一定的权限

令人不解的是,gitlab-runner 运行的服务器和路径都是我的服务器和 /home/gitlab-runner,但它仿佛和我的服务器完全不在一个频道上,我服务器上的文件和 node 在他眼里都好像不存在(ls 存在的目录输出不存在,node 找不到命令)

在折腾了很久都无法解决的情况下,我不得以转而使用 docker

node 镜像

原本使用的 node:6-alpine 执行 npm install 会卡死,添加淘宝源并换用 node:9.2.1-alpine 可解决

缓存

如果将 install 和 build 设为两步而在 .yml 中没有写入 cache 相关的配置

在进行 build 时 install 安装的 node_module/ 其实已经被删掉了,所以会报 vue-cli-service 不存在

你可能感兴趣的:(郝项目)