前端自动化部署Jenkins配置-Pipeline配置

广宝哥
632 阅读4分钟

Pipeline实际上就是通过代码的方式配置jenkins，不需要UI页面来配置，优点就是可移植性非常高

Pipeline是基于groovy语法的（groovy-lang.org/syntax.html)

如果你是完全小白, 参考入门文章:juejin.cn/post/702849… (前端自动化部署-使用Jenkins构建项目)

实践一下： 所有前端项目整合在一起打包，部署

假设现在有4个工程化的项目，而且迭代的频率不算很高的，这时候就可以放在一起，那个需要部署，就选择那一个

初始化Pipeline

  • 新建一个item,选择Pipeline,点击确认

image.png

  • 在Pipeline输入框写入代码

image.png

1.前端常常有好几个项目放在一起，需要部署到服务器上不同的目录，因此可以配置一个对象来描述每一个项目的差异配置

def projectMap = [
  'h5-businesses-v2': [
      'gitUrl': 'xxx',
    //   远程目录
      'remotePath': '/html5/root/xxx',
      // npm run build:dev构建的文件目录
      "buildDev": './dist/dev',
      // npm run build:test构建的文件目录
      "buildTest": './dist/test',
      // npm run build:dev2构建的文件目录
      "buildDev2": "./dist/dev",
    //   安装命令（可不填）
      "install": "pnpm install",
    //  可以增加配置，如node版本等等，但是这却取决于Liunx环境
      "node": "10.2.0"
    ]
]

这个配置可以知道，需要配置git地址，远程目录，npm run build:dev构建的文件目录，npm run build:test构建的文件目录，安装命令

可以增加配置，如node版本等等，这却取决于Liunx环境,是否装了nvm

2.parameters配置

parameters {
        // 选择框
        choice(name: 'project', choices: ['h5-businesses-v2', 'merchant-manage-system', 'h5-shopMapsAdmin', 'h5-shopMaps'], description: '项目名称,h5-businesses-v2,merchant-manage-system,h5-shopMapsAdmin,h5-shopMaps')
        // 输入框
        string(name: 'brand', defaultValue: 'dev', description: '请输入分支名称,如test, dev, feature/2023_09_27类似')
        // 选择框
        choice(name: 'env', choices: ['test', 'dev', 'dev2'], description: '环境，默认test环境')
        // 选择框
        choice(name: 'buildScript', choices: ['npm run build:test', 'npm run build:dev', 'npm run build:dev2'], description: '打包命令')
        // 勾选框
        booleanParam(name: 'install', defaultValue: false, description: '是否重新安装依赖')
    }

这个配置就是点击构建之前，选择的构建参数，这里设置有，项目名称，代码分支，服务器环境，运行脚本，是否需要安装依赖

3.拉取代码配置

git branch: "${params.brand}", credentialsId: "${credentialsId}", url: "${projectMap[projectKey].gitUrl}"
  • 拉取代码的需要需要git账号认证的id, 在Credentails目录下面就可以拿到认证过git账号的id

image.png

  • 如果没有id，可以新增一个，配置项如下，主要是输入git的账号名称和密码

image.png

4.部署

 script {
       if("${params.buildScript}" =~ /.*build:dev$/) {
           buildFile = "${projectMap[projectKey].buildDev}"
       } else if("${params.buildScript}" =~ /.*build:test$/) {
           buildFile = "${projectMap[projectKey].buildTest}"
       } else if("${params.buildScript}" =~ /.*build:dev2/) {
            buildFile = "${projectMap[projectKey].buildDev2}"
       }
   }
   
   sh("rm -rf /work/static/${params.env}${projectMap[projectKey].remotePath}")
   
   sh("cp -rf ${buildFile} /work/static/${params.env}${projectMap[projectKey].remotePath}")

当选择不同的构建命令，可以通过正则来匹配，获取构建命令打包生成文件的目录，这样子扩展性就比较强了

CDN资源如何上传

打包成功之后，就是上传资源了，如果是CDN,需要在liunx电脑安装上传工具，由CDN提供上传文件工具，可以参考阿里云上传示例: www.alibabacloud.com/help/zh/oss…

总结

不同公司的开发习惯不一样，应该根据自身情况来做适合团队开发习惯的配置。但是都有一个共同点：拉取代码，安装依赖，构建，部署，这些工作交给Jenkins来做，这些流程都是一样的。

image.png

image.png

示例代码

def projectMap = [
    'h5-businesses-v2': [
      'gitUrl': 'xxx',
    //   远程目录
      'remotePath': '/html5/xxx',
      // npm run build:dev构建的文件目录
      "buildDev": './dist/dev',
      // npm run build:test构建的文件目录
      "buildTest": './dist/test',
      // npm run build:dev2构建的文件目录
      "buildDev2": "./dist/dev",
    //   安装命令（可不填）
      "install": "pnpm install"
    ],
    "merchant-manage-system": [
      'gitUrl': 'xxx',
      "remotePath": "/admin/xxx",
       "buildDev": './dist/development',
       "buildTest": './dist/test',
       "install": "pnpm install"
    ],
    "h5-shopMapsAdmin": [
      'gitUrl': 'xxx',
      "remotePath": "/html5/xxx",
      "buildDev": './dist',
      "buildTest": './dist',
      "buildDev2": "./dist",
      "install": "pnpm install"
    ],
    'h5-shopMaps': [
        'gitUrl': 'xxx',
        "remotePath": "/html5/xxx",
        "buildDev": './dist',
        "buildTest": './dist',
        "buildDev2": "./dist",
        "install": "npm install"
    ],
    // "h5-businesses": [
    //   "gitUrl": 'xxx',
    //   "remotePath": "/html5/xxx",
    //     "buildDev": './dist',
    //     "buildTest": './dist',
    //     "buildDev2": "./dist",
    //     "install": "npm install"
    // ]
]
def credentialsId = 'xxx'


pipeline {
    agent any
    // 一开始配置不会生效，点击构建配置才会显示，这应该是jenkins的bug
    parameters {
        choice(name: 'project', choices: ['h5-businesses-v2', 'merchant-manage-system', 'h5-shopMapsAdmin', 'h5-shopMaps'], description: '项目名称,h5-businesses-v2,merchant-manage-system,h5-shopMapsAdmin,h5-shopMaps')
        
        string(name: 'brand', defaultValue: 'dev', description: '请输入分支名称,如test, dev, feature/2023_09_27类似')
        
        choice(name: 'env', choices: ['test', 'dev', 'dev2'], description: '环境，默认test环境')
        
        choice(name: 'buildScript', choices: ['npm run build:test', 'npm run build:dev', 'npm run build:dev2'], description: '打包命令')
        
        booleanParam(name: 'install', defaultValue: false, description: '是否重新安装依赖')
    }
    environment {
        projectKey = "${params.project}"
        buildFile = './dist'
    }
    
    stages {
        stage('pull code') {
            steps {
                dir("./${params.project}"){
                    
                    git branch: "${params.brand}", credentialsId: "${credentialsId}", url: "${projectMap[projectKey].gitUrl}"
                 }
            }
        }
        
        stage("install") {
            steps {
                dir("./${params.project}"){
                    sh("node -v")
                    sh("npm -v")
                    script {
                        if("${params.install}"=="true") {
                            if("${projectMap[projectKey].install}") {
                                 sh("${projectMap[projectKey].install}")
                            } else {
                                sh("npm install")
                            }
                        }
                    }
                }
            }
        }
        
        stage("build") {
            steps {
                dir("./${params.project}"){
                    sh("${params.buildScript}")
                }
            } 
        }
        
        stage("deploy") {
            steps {
                dir("./${params.project}"){
                  
                   script {
                       if("${params.buildScript}" =~ /.*build:dev$/) {
                           buildFile = "${projectMap[projectKey].buildDev}"
                       } else if("${params.buildScript}" =~ /.*build:test$/) {
                           buildFile = "${projectMap[projectKey].buildTest}"
                       } else if("${params.buildScript}" =~ /.*build:dev2/) {
                            buildFile = "${projectMap[projectKey].buildDev2}"
                       }
                   }
                   
                   sh("rm -rf /work/static/${params.env}${projectMap[projectKey].remotePath}")
                   sh("cp -rf ${buildFile} /work/static/${params.env}${projectMap[projectKey].remotePath}")
                   sh("chmod -R 777 /work/static/${params.env}${projectMap[projectKey].remotePath}")
                }
            }
        }
    }
}

qq讨论群: 475870039

avatar
文章
阅读
粉丝