通过Jenkins自动化构建VUE前端项目

Jenkins奴隶机配置

• 首先登录奴隶机，确保奴隶机有JDK，没有则下载解压JDK。下面简单描述下安装JDK过程
  • ORACLE官网下载个JDK,比如jdk-8u241-linux-x64.tar.gz
  • 挪到想要的路径下，比如/home/: mv jdk-8u241-linux-x64.tar.gz /home/
  • 解压: tar -zxvf jdk-8u241-linux-x64.tar.gz
  • 至此，JDK就放在/home/jdk1.8.0_241/
  • 配置bin: cd /usr/bin/ & ln -s /home/jdk1.8.0_241/bin/java

  • 测试下是否正确配置: java -version，如下则正常

    
    image.png
• 登录Jenkins，在Jenkins首页：Manage Jenkins -> Manage Nodes and Clouds,进入到节点配置界面
  image.png
• 然后点击新建节点，配置信息，其中启动方式要改成Launch agents via SSH
  image.png
• 保存后，Master就会开始尝试连接奴隶机，此时会报错，提示没有奴隶机的ssh指纹信息，可以如下解决：
  • 登录Master所在机器A，通过A去登录奴隶机所在机器B
  • 注意因为Jenkins使用Docker部署的，因此Master所在机器在Docker Container内，进去使用：docker exec -it xxx bash
  • 然后ssh一次：ssh root@B
  • 这样A的know_hosts里面就有B的指纹信息了

• 在重启代理尝试连接奴隶机,成功后如图

  
  image.png

创建Jenkins自动化构建任务

• 首先创建一个用于登录Gitlab的凭证

  • Manage Jenkins -> Manage Credentials

  • 添加凭据
    

    image.png

  • 创建完毕后，记得复制凭证id，用于编写流水线时要用到

• 到插件管理，搜索DingTalk插件，安装重启Jenkins
  • 这边是DingTalk插件使用说明,传送门
• 到插件管理，搜索NodeJS插件，安装重启Jenkins
• 然后到全局工具配置，NodeJS新增，填写名字，选择版本
• 首页->新建item，进入任务创建页
• 填入名字，选择流水线，开始填写流水线脚本

pipeline {
    agent {
        label '226.243'
    }
    stages {
        stage('Preparation') {
            steps {
              git branch: 'develop', credentialsId: 'Gitlab-Jenkins', url: 'http://192.168.1.1/xxxxx.git'       
            }
        }
        stage('Clean') {
            steps {
                sh'''
                    touch pid
                    pid=`cat pid`
                    if [ -n "$pid" ]
                    then 
                        echo "kill pid"
                        kill -9 $pid 2>&1
                    else
                        echo "application is already stopped"
                    fi
                    rm -rf dist/
                '''     
            }
        }
        stage('Build') {
            steps{
                script {
                    nodeHome = tool 'NodeJS10_24'
                }
                withEnv(["NODE_HOME=$nodeHome"]) {
                     sh'''
                        export JENKINS_NODE_COOKIE=dontKillMe
                        export PATH=$PATH:$NODE_HOME/bin
                        $NODE_HOME/bin/npm i -g http-server
                        $NODE_HOME/bin/npm install
                        $NODE_HOME/bin/npm run build:prod
                        cd dist
                        nohup $NODE_HOME/bin/http-server -p 9009 > ../run_log.out 2>&1 &
                        echo "$!" > ../pid
                    '''
                }
            }
        }
    }
    post { 
        always { 
          echo 'always'
        } 
        success { 
            // 当此Pipeline成功时打印消息 
            echo 'success' 
            dingtalk (
                        robot: 'robot1',
                        type: 'LINK',
                        title: '前端构建成功',
                        text: [
                            '点击直接跳转到页面'
                        ],
                        messageUrl: 'http://xxxx.com',
                        picUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic2%2Fcover%2F00%2F44%2F98%2F5814c9627afc2_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619152494&t=4eb45fe7198c51f8bf54968f5dcc75d1'
                    )
        } 
        failure { 
            //当此Pipeline失败时打印消息
            echo 'failure'
            dingtalk (
                        robot: 'robot1',
                        type: 'TEXT',
                        text: [
                            '前端构建失败'
                        ]
                    )
        } 
        unstable { 
            //当此Pipeline 为不稳定时打印消息 
            echo 'unstable'         
        } 
        aborted { 
            //当此Pipeline 终止时打印消息
            echo 'aborted'
            dingtalk (
                        robot: 'robot1',
                        type: 'TEXT',
                        text: [
                            '前端构建被终止'
                        ]
                    )
        } 
        changed { 
            //当pipeline的状态与上一次build状态不同时打印消息 
            echo 'changed'             
        }         
    }
}

配置自动触发

• 到插件管理中搜索Gitlab，安装Gitlab触发器
• 然后到item中触发器就会多出一个Build when a change is pushed to GitLab. GitLab webhook URL:xxxx
• 将URL复制到Gitlab项目中，通过Setting->Webhook添加该url和token.