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

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

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

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

选择流水线任务类型，输入任务名称，可以是项目名称，然后确认，进入配置页面，该页面有四个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不在一个服务器，也可以通过其它的方式同步到生产服务器。

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

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

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