1

1.前言

之前一直用jeakins部署,最近了解了一下gitlab-ci,就想尝试一下,中途遇到很多坑。
简单的记录一下,然后谈一谈自己关于部署的一些理解。

2.gitlab-ci

简介

前端CICD我理解的就是代码通过本地各种校验后的不断集成到远程分支,然后触发一列行为(比如安装,打包,测试,部署)。
一般需要两个服务器,
一个是ci服务器,用来跑各种任务(安装,打包,测试,部署等等)
另外一个就是部署服务器,可以是一个nginx,来展示静态资源。
jeakins可以理解为一个ci服务器。
当然 gitlab本身也提供一个ci服务器,那就是gitlab-ci
这期间我遇到了好多坑,快崩溃了。

安装runner的坑

如果是gitlab项目,在setting-cicd中,左侧是私人的runner,右侧是其他人提供的runner
runner可以简单理解为ci服务器上跑的ci服务
但是需要注意的是别人的runner不一定适用你,因为人家的ci服务器上的环境也许是java环境,没装node,没装你需要的一些全局包。所以一般都需要自己做一个符合自己项目的前端通用runner。
image.png

第一步:runner服务器选择
首先如果你是个人gitlab项目,那么你可以找随便找一台服务器。但是你是公司的项目,最后找一台公司内网服务器安装,应该外网服务器不一定能访问你公司的自己搭的gitlab。
第二步:安装runner方式选择
安装的话可以参考官网安装,有几种方式.但是对于我来说,由于公司的服务器不能访问科学~上网~,下载安装包特别慢,慢到崩溃的那种,所以我直接采用先下载安装包,再安装的方式。注意linux x86_64 对应的安装包是amd64,别下错了。

第三步:安装全局依赖包
runner只是在ci服务器中一个服务,本地找不到包还是得从全局找。
所以需要ci服务器安装 git nvm(管理node) nrm (管理npm源) vue-cli-serve 等等一些常用的全局包。

第四步:注册runner
注册很简单,其实就是runner和gitlab建立链接

gitlab-runner register 按提示一步步来就行了,一定得是ci服务器能连的上gitlab才行
token和url在setting-runner里面找完事后就可以发现自定义runner多了一个且可用。
image.png

第五步:更改runner权限
肯定得用root权限执行,默认用户runner 公司的服务器不认
image.png

sudo gitlab-runner uninstall # 删除gitlab-runner

gitlab-runner install --working-directory /home/gitlab-runner --user root   # 安装并设置--user(设置为root)

sudo service gitlab-runner restart  # 重启gitlab-runner

ps aux|grep gitlab-runner  # 查看当前runner用户

3.跑通部署服务

.gitlab-ci.yml

项目根目录下面添加.gitlab-ci.yml文件,每次提交的时候gitlab根据该文件启动runner。
具体的含义大家自己去搜,我只说几个关键的地方。

  • runner有名字,我的runner叫fyy,tag参数用来执行需要触发的runner
  • stage是阶段,一般有三个阶段(加上单元测试、集成测试之类的代码检测的可以是四个)
  • 每阶段完成,生成的文件会被删除,所以需要cache缓存一下
  • only参数指定只有哪个分支变化才触发runner

runner-1.png
runner-restorecache.png

一个可用的参考的脚本

stages:
  - install
  - build
  - deploy
cache: # 缓存
  paths:
    - node_modules
    - dist
第一阶段-install:
  tags:
    - fyy
  stage: install
  script:
    - pnpm install
    - echo '依赖安装成功!'
  only:
    - mono-dp

第二阶段-build:
  tags:
    - fyy
  stage: build
  script:
    - pnpm buildTest
    - echo '测试环境代码打包成功!'
  only:
    - mono-dp

第三阶段-deploy:
  tags:
    - fyy
  stage: deploy
  script:  # 具体的部署方式,这里是常规的部署,也可以容器化部署
    - cd dist
    - tar -cf dist.tar --exclude=./dist.tar .
    - 具体的shell脚本(ssh链接,拷贝到指定目录,解压之类的)
  only:
    - mono-dp

npm安装的坑

这个时候基本上可以了,mono-dp push 上去会触发ci操作,在pipeline里面可以看到流程。
我遇到的问题是npm安装的时候会报一些错,这个应该是我pnpm.lock文件有问题引起的。
排查问题可以直接登录远程服务器手动试一试,手动在runner的项目目录里面/home/gitlab-runner/builds/-qUnF6qy/0/webproject/convergencemarketing/npm insatll build排查下,这个时候不要走ci流程了,会很慢。

runner 打包的坑

我遇到的问题是项目有些依赖走的全局包,比如有个包叫chalk,没写进Package里,ci的时候由于Package里没有就不会安装,导致打包错误
解决方案就是排查下,项目不要有依赖全局包的,全部改成本地的
但是vue-cli-serve这种就没办法,只能ci服务器全局去装

4.总结与思考

最后亮一下成功的截图
image.png
总体来说和jekins很类似,比较适合团队开发与大型项目开发,流程比较清楚。
但是缺点也是有的,感觉比较慢,我这个项目大概12分钟 这还是有pnpm+缓存。
对于我这种小公司小项目,直接本地打包传上去部署(走自己写的部署服务,或者直接使用上传软件或者自定义plugin)会不会更适合一点(能控制在1分钟)。


Runningfyy
1.3k 声望661 粉丝