前端项目基于GitLab-CI的持续集成/持续部署(CI/CD)

9,318 阅读4分钟

什么是持续集成/持续部署(CI/CD)?

个人理解,说白了就是把代码测试、打包、发布等工作交给一些工具来自动完成。这样可以提高效率,减少失误,开发人员只需要关心开发和提交代码到git就可以了。

怎么做?

  • 方式一: 使用web hooks,这种方式的原理就是在gitlab项目的Setting-Integrations设置中增加一个请求url和一个secret,如下图

    当触发钩子条件时,(一般是git push之后),gitlab会主动把secret带在请求头中去请求前面的url,后端服务接受到这个请求后并验证secret后,就可以为所欲为啦。这种方式不需要配置持续集成工具,但是需要自己单独专门写一个后端服务。由于今天主要使用下面的方式二,所以方式一的具体做法就不展开了,可以参考Gitlab Webhooks自动化部署实战

  • 方式二: 使用工具如gitlab-CI,这种方式的原理就是为项目在自己的服务器安装上注册gitlab-runner,注册会有一个token,服务器上运行gitlab-runner后,runner会轮询的发送带tokenhttp请求给gitlab,如果gitlab有任务了,(一般是git push),那么会把任务信息返回给runner,然后runner就开始调用注册时选的Executor(我是用的shell)来执行项目根目录下的配置文件.gitlab-ci.yml,执行后把结果反馈给gitlab。详细的工作原理请移步当谈到 GitLab CI 的时候,我们该聊些什么。对GitLab-CI,GitLab-Runner等概念有点混乱的同学,可以看看这篇文章。下面说说我个人的使用步骤:

    1. 在开发环境(如自己的windows上)开发前端项目(该项目我命名为ci-test),并推送到gitlab远程仓库中。这里是用vue-cli 3.0生成的vue项目,我个人习惯增加如下自定义配置

      //vue.config.js
      module.exports = {
          outputDir: 'app-page',          //自定义打包后的目录名,注意在.gitnore文件中也要忽略掉该目录
          baseUrl: './'                   //打包时使用相对路径
      }
      
    2. 服务器上配置nginx,并配置默认访问目录,例如我自己的配置是/app文件夹。具体做法请自行搜索。

    3. 安装nodegit,并在/app目录下克隆gitlab仓库中的代码,这时候服务器上就存在/app/ci-test目录了

    4. 服务器上安装gitlab-runner,具体方法请参考官方文档

    5. 服务器上注册一个Runner,具体方法参考官方文档,注意这里要填的url(一般是 https://gitlab.com)token,都在gitlab项目下的setting-CD/CD-Runners-Specific Runners里面找(如下图),

      而且要填的tags也是有用的,后面的.gitlab-ci.yml里面的tag选项必须是这里的tags里面的子项,最后executor这里我是填的shell

    6. 注册后修改gitlab-runner的权限

      sudo chown -R gitlab-runner:gitlab-runner /home/gitlab-runner
      sudo chmod -R 777 /home/gitlab-runner
      
    7. 开启gitlab-runner服务

      gitlab-runner run
      

      成功的话,会有一个绿点,如下图

    8. vue项目根目录下配置.gitlab-ci.yml文件,具体配置选项请看文档。我的配置如下:

          #当Runner通过轮询检测到gitlab上有任务时,就会执行这个文件
          #个人不是很熟yml的语法以及详细配置,都是找猫画虎的,求各位大神提出优化意见
      
          stages:
              - update
              - test
              - build
      
          #更新代码并且安装依赖
          update:     
              stage: update
              script:
                  - cd /app/ci-test       #先进入到项目目录下,下面同理
                  - git pull
                  - sudo npm install
              tags:                       #这里的tags一定要属于注册时填的tags中,下面同理
                  - update
          
          #执行单元测试
          test:
              stage: test
              script:
                  - cd /app/ci-test
                  - npm run test:unit
              tags:
                  - unitTest
          
          #打包
          build:
              stage: build
              script:
                  - cd /app/ci-test
                  - npm run build
              tags: 
                  - build
      
      
    9. .gitlab-ci.yml文件推送到gitlab仓库中,在gitlab项目页面中打开CI/CD-Pipelines,即可看到效果,如下图

      status那一列如果是绿色的passed则说明大功告成,以后每次只需要提交代码即可,再也不用手动测试部署了。这个时候去浏览器中打开相应的地址,就可以看到部署成功。我的是这样的:
      如果是红色的failed则说明执行某一个命令的时候出错了,这时候就会收到一封邮件告知失败原因。

参考