Jenkins创建pipeline自动化部署vue

1. 安装插件NodeJS

1. 配置全局变量

2. 创建pipeline任务

1. 丢弃旧的构建

2. 参数化构建配置

3. 生成pipeline脚本代码

4. 点击进入流水线语法

找到checkout

5. 去gitlab仓库复制URL

6. 因为是vue的前端代码，需要配置nodejs，复制代码填入pipeline脚本

tools {
  nodejs 'node'
}

7. 指定分支需要填写之前参数化构建配置的内容，不然的话无法分辨对应的分支，复制代码，填入到脚本当中

checkout scmGit(branches: [[name: '${branch}']], extensions: [], userRemoteConfigs: [[credentialsId: '7800cad7-ea12-42f0-8b21-d122ca38daef', url: 'http://xxx.xxx.xxx.xxx/xxxx/daedalus_fe.git']])

8. 生成编译打包的脚本

sh '''node -v
npm install
npm -v
npm run build'''

9. 最后就是推送脚本的生成了

sshPublisher(publishers: [sshPublisherDesc(configName: 'sq-machine-001', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '/data1/nginx-data/dist', remoteDirectorySDF: false, removePrefix: 'dist', sourceFiles: 'dist/**')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])

10. 最终的pipeline脚本为

pipeline {
    agent any
    tools {
        nodejs 'node'
    }

    stages {
        stage('拉取vue项目') {
            steps {
                checkout scmGit(branches: [[name: '${branch}']], extensions: [], userRemoteConfigs: [[credentialsId: '7800cad7-ea12-42f0-8b21-d122ca38daef', url: 'http://xxx.xxx.xxx.xxx/xxxx/daedalus_fe.git']])
            }
        }
        
        stage('编译打包') {
            steps {
                sh '''node -v
                npm install
                npm -v
                npm run build'''
            }
        }
        
        stage('推送') { 
            steps {
                sshPublisher(publishers: [sshPublisherDesc(configName: 'sq-machine-001', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '/data1/nginx-data/dist', remoteDirectorySDF: false, removePrefix: 'dist', sourceFiles: 'dist/**')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: true)]) 
            }
        }

    }
}

保存

3. 尝试构建

1. 成功后去对应的服务器查看对应的目录下是否有文件

这样一个vue前端的pipeline的流水线就部署完成了