如今的前端项目已不像之前直接写完代码,扔到服务器直接运行了。免不了安装依赖,执行build过程,然后再将打包后的代码上传到服务器,可能还需要更改配置文件啥的。如此多的步骤严重影响开发的日常划水时间。所以jenkins自动化部署少不了。

前端jenkins打包编译发布项目流程-编程范儿

听说这个老头可以帮你做很多事

直接进入正题,登录进入jenkins后台,在Dashboard左侧菜单新建任务

前端jenkins打包编译发布项目流程-编程范儿

选择流水线任务类型,输入任务名称,可以是项目名称,然后确认,进入配置页面,该页面有四个Tab

General

主要是一些基本的配置项,可不填

构建触发器

主要是触发构建任务的条件配置,有的时候比如你想在你提交代码的时候就触发构建,或者合并代码到主分支的时候触发,可以通过gitee WebHook来配置生效,不需要自动触发构建的可以不需要理会

高级项目选项

(忽略)

流水线

这个是主要的内容,编写自定义的Pipeline script,类似于shell脚本

pipeline {
    agent any

 environment {
    CODE_REPOSITORY = 'git@gitee.com:argusai/cloth-client-manager-app.git'
  }

    stages { 
        stage('拉取代码') {
            steps {
                echo "fetch code from ${CODE_REPOSITORY}"
                deleteDir()
                git "${CODE_REPOSITORY}"
            }
        }
        
        stage('打包') {
            steps {
                echo 'package.....'
                sh "yarn install"
                sh "yarn build"
            }
        }
        
        stage('部署代码') {
            steps {
                echo ''
                sh "cp  -rf ./dist/*  /data/service/cloth-cloud/cloth-client-manager-app"
                sh "/data/service/cloth-cloud/cloth-client-manager-app-start.sh"
            }
        }
    }
}

整个构建过程,被我们自定义为三步,首先从git或者gitee拉取最新的代码到jenkins服务器,拉取之前先执行deleteDir()删除之前的代码目录;

第二步是执行命令编译打包的过程,yarn install 安装项目依赖,然后build出包,一般在项目根目录dist下面

第三步的过程就是将dist里面打包后的代码拷贝到服务器nginx配置的项目目录,并且执行一个shell脚本,目的是拷贝一份生产环境的配置到项目目录,(有的时候配置文件不方便打包进项目,随时修改的需要)如果项目部署和jenkins不在一个服务器,也可以通过其它的方式同步到生产服务器。

为了公司的内部协同,还可以在这里做很多事,例如配置钉钉机器人通知,将打包后的信息同步到工作群里。

最后配置好任务之后,试一下点击立即构建,可以清晰的看见每一步的完成进度

前端jenkins打包编译发布项目流程-编程范儿

如果哪一步出错了,还可以点击log来查找错误的输出日志进行跟踪

 

推荐

个人订阅号

前端jenkins打包编译发布项目流程-编程范儿