使用coding自动化集成部署vue/react

上一篇有记录到使用jenkins实现自动化部署web项目，这篇讲一下如何使用codin部署

1.创建项目

首先注册一个coding账号并创建一个项目

2.录入凭证

通过上图点击左下角的项目设置进入页面，点击左下角开发者选择》凭证管理》录入凭证

凭证名称：随便填个
root：填写服务器的root
密码：填写服务器的密码

3.制作仓库

这一步的目的是打包后的压缩包自动上传到该目录

地址：web 可以写别的，只是个名称，用来指定仓库

4.构建计划

点击确定后就可以进行相应配置了，也可以从外边进入设置，如题

5.构建配置（重点）

当前还是选择默认即可

接下来重点的地方来了

这里的配置参数可以实现打包动态化，也就是说传入什么参数，比如ip、端口、分支等，就会实现动态打包，而不是局限于某个ip或者分支，这里设置的变量会在文本编辑器中使用

6.配置 Jenkinsfile

复制我这段即可，然后做一些修改即可

pipeline {
  agent any
  stages {
    stage('检出') {
      steps {
        checkout([$class: 'GitSCM',
        branches: [[name: GIT_BUILD_REF]],
        userRemoteConfigs: [[
          url: GIT_REPO_URL,
          credentialsId: CREDENTIALS_ID
        ]]])
      }
    }
    stage('安装依赖') {
      steps {
        sh 'npm install -g cnpm --registry=https://registry.npm.taobao.org'
        sh 'cnpm install'
      }
    }
    stage('执行构建') {
      steps {
        echo '开始构建'
        sh 'npm run build'
        echo '构建完成'
      }
    }
    stage('压缩制品dist') {
      steps {
        echo '压缩中...'
        sh 'tar -zcf dist.tar.gz dist/'
        echo '压缩完成.'
         sh 'ls'
      }
    }
      stage('上传制品') {
        steps {
          echo '开始上传'
          codingArtifactsGeneric(files: 'dist.tar.gz', repoName: 'web', version: '${env.GIT_BUILD_REF}')
        }
      }
    stage('部署至服务器') {
      steps {
        script {
          def remote= [:]
          remote.name = "my-remote-server"
          remote.host = "${REMOTE_HOST}"
          remote.allowAnyHosts = true
          // 服务器远程地址
          def remotePath = "/www/wwwroot/coding.muge.chat"
            // 使用当前项目下的凭据管理中的 用户名 + 密码 凭据
            withCredentials([usernamePassword(
              credentialsId: "${REMOTE_CRED}",
              passwordVariable: 'password',
              usernameVariable: 'userName'
            )]) {

              // SSH 登陆用户名
              remote.user = userName
              // SSH 登陆密码
              remote.password = password
              stage("执行ssh脚本") {
                echo '开始执行脚本' 
                // SSH 上传文件到远端服务器
                sshPut remote: remote, from: './dist.tar.gz', into:remotePath
                // 解压缩
                sshCommand remote: remote, command: "tar -zxf ${remotePath}/dist.tar.gz -C ${remotePath}/"
                // 删除压缩文件
                sshCommand remote: remote, sudo: false, command: "rm -f ${remotePath}/*.tar.gz"
                // /将dist文件夹所有内容移动到上一级
                sshCommand remote: remote, sudo: false, command: "mv ${remotePath}/dist/* ${remotePath}/"
                // 删除dist文件夹
                sshCommand remote: remote, sudo: false, command: "rm -rf ${remotePath}/dist"
                echo '脚本执行结束' 
              }
            }
        }

      }
    }
  }
}

7.开始构建

以上配置完，构建即可

8.扩展

既然通过配置参数，可以实现动态打包。那，我的项目怎么用的到这些参数呢。
比如我要在coding上配置打包参数 ip 、 port 、 name
拿vue2举例，首先在项目根路径中创建 vue.config.js ，使用以下命令便可以获取传入参数

// npm需要这么拿
const {npm_config_ip:ip,npm_config_port:port,npm_config_name:name} = process.env
// 自定义参数ip port name
// 获取定义参数
console.log(ip,'ip');
console.log(port,'port');
console.log(name,'name');

通过这些参数就可以实现动态打包
参数形式一定要通过 **–**params ，一定要在前面加上 – 两杠
打包的时候把命令改为npm run build --ip=127.0.1
拿步骤6举例
首先配置了如下参数

原本代码

    stage('执行构建') {
      steps {
        echo '开始构建'
        sh 'npm run build'
        echo '构建完成'
      }
    }

更改后的代码

    stage('执行构建') {
      steps {
        echo '开始构建'
        sh 'npm run build --ip=npm run build --ip=${IP} --port=${PORT} --name=${NAME} '构建完成'
      }
    }

引号中变量需要 使用 "${你的变量}"表示

9.结束语

到此jenkins和coding之前端自动化部署项目已学习完成了，是不是觉得挺有意思的