gitlab 持久化部署 gitlab持续集成打包发布

转载

mob6454cc6f27a3 2024-05-20 13:07:40

文章标签 gitlab 持久化部署前端 javascript git ViewUI 文章分类 运维

什么是持续集成/持续部署（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会轮询的发送带token的http请求给gitlab,如果gitlab有任务了，（一般是git push），那么会把任务信息返回给runner，然后runner就开始调用注册时选的Executor（我是用的shell）来执行项目根目录下的配置文件.gitlab-ci.yml，执行后把结果反馈给gitlab。详细的工作原理请移步当谈到 GitLab CI 的时候，我们该聊些什么。对GitLab-CI,GitLab-Runner等概念有点混乱的同学，可以看看这篇文章。下面说说我个人的使用步骤：

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

//vue.config.js
module.exports = {
    outputDir: 'app-page',          //自定义打包后的目录名，注意在.gitnore文件中也要忽略掉该目录
    baseUrl: './'                   //打包时使用相对路径
}
复制代码

服务器上配置nginx，并配置默认访问目录，例如我自己的配置是/app文件夹。具体做法请自行搜索。
安装node和git，并在/app目录下克隆gitlab仓库中的代码，这时候服务器上就存在/app/ci-test目录了
服务器上安装gitlab-runner，具体方法请参考官方文档
服务器上注册一个Runner,具体方法参考官方文档,注意这里要填的url(一般是 https://gitlab.com)和token，都在gitlab项目下的setting-CD/CD-Runners-Specific Runners里面找(如下图)，
而且要填的tags也是有用的，后面的.gitlab-ci.yml里面的tag选项必须是这里的tags里面的子项，最后executor这里我是填的shell
注册后修改gitlab-runner的权限

sudo chown -R gitlab-runner:gitlab-runner /home/gitlab-runner
sudo chmod -R 777 /home/gitlab-runner
复制代码

开启gitlab-runner服务

gitlab-runner run
复制代码

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

在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

复制代码

将.gitlab-ci.yml文件推送到gitlab仓库中，在gitlab项目页面中打开CI/CD-Pipelines，即可看到效果，如下图
status那一列如果是绿色的passed则说明大功告成，以后每次只需要提交代码即可，再也不用手动测试部署了。这个时候去浏览器中打开相应的地址，就可以看到部署成功。我的是这样的：如果是红色的failed则说明执行某一个命令的时候出错了，这时候就会收到一封邮件告知失败原因。