Docker + Jenkins + fis3 实现Web前端自动化压缩

本文采用的Jenkins BlueOcean版本做环境。使用Docker容器部署Jenkins,环境隔离与宿主机。

fis3的安装就不在多说,通过百度搜索能找到。

容器化的Jenkins出现的问题

docker版本Jenkins容器启动后独立于宿主机运行,并且采用的mini的Linux系统,比如宿主机能使用nodeJS命令,在容器内部通过挂载文件方式是不能运行命令的,容器系统与宿主机系统不兼容。

解决问题思路

首先在容器中部署nodejs是不现实的,如果需要销毁重启容器所有在容器里更变的内容全部消失。因此考虑使用宿主机通过远程命令方式执行fis3命令。

JenkinsBlueOcean版本支持Jenkinsfile流水线方式操作。

Jenkinsfile脚本

脚本中包含了IP地址替换,支持dev、test、prod三种部署环境。

pipeline {
   agent any

   stages {
           stage('FixApiIP') {
               steps {
                   echo "env: ${env.BRANCH_NAME}"
                   echo 'Deploying....'
                   sh '''
                       rm -rf /tmp/douruimi/*
                       mkdir -p /tmp/douruimi/$BRANCH_NAME/
                       cp -R ./ /tmp/douruimi/$BRANCH_NAME/
                       cd /tmp/douruimi/$BRANCH_NAME/

                      if [ "$BRANCH_NAME"  = "dev" ];then
                         sed -ie 's/localhost:8081/192.168.89.64:8090/g' static/lib/common.lib.js
                      fi
                      if [ "$BRANCH_NAME"  = "test" ];then
                         sed -ie 's/localhost:8081/192.168.89.64:8088/g' static/lib/common.lib.js
                      fi
                      if [ "$BRANCH_NAME"  = "prod" ];then
                         sed -ie 's/localhost:8081/192.168.89.65:8081/g' static/lib/common.lib.js
                      fi

                      echo "修改版本号 $VERSION ";
                      sed -ie "s/dev-version/$VERSION/g" static/lib/common.lib.js

                   '''
               }
           }
           stage('Deploy') {
               steps {
                  echo "env: ${env.BRANCH_NAME}"
                  echo 'Deploying....'
                  sh '''
                      cd /tmp/douruimi/$BRANCH_NAME/
                      scp -r /tmp/douruimi/$BRANCH_NAME root@192.168.89.61:/tmp/douruimi/;

                      ssh root@192.168.89.61 "source /etc/profile; cd /tmp/douruimi/$BRANCH_NAME && fis3 release -d ./dist;"


                      echo "将网页文件打包..."
                      ssh root@192.168.89.61 "cd /tmp/douruimi/$BRANCH_NAME/dist && tar -zcvf /tmp/douruimi/web-$BRANCH_NAME.tar.gz --exclude=.git ./"

                      # cp /tmp/douruimi/web-$BRANCH_NAME.tar.gz  web-$BRANCH_NAME-$VERSION.$(date +%Y%m%d%H%m%s).tar.gz



                      if [ "$BRANCH_NAME"  = "prod" ];then

                          echo "将打包文件发布到服务器..."
                          ssh root@192.168.89.61 "scp /tmp/douruimi/web-$BRANCH_NAME.tar.gz root@122.114.185.212:/home/data/nginx/html/douruimi/"

                          ssh root@192.168.89.64 "cd /home/data/nginx/html/douruimi/; tar -xf web-$BRANCH_NAME.tar.gz; rm -f web-$BRANCH_NAME.tar.gz;"
                      else
                          ssh root@192.168.89.61 "scp /tmp/douruimi/web-$BRANCH_NAME.tar.gz root@192.168.89.64:/home/data/nginx/html/douruimi/"
                          ssh root@192.168.89.64   "cd /home/data/nginx/html/douruimi/; tar -xf web-$BRANCH_NAME.tar.gz -C ./$BRANCH_NAME/; rm -f web-$BRANCH_NAME.tar.gz;"

                      fi


                  '''

               }
           }
       }
}

简单的fis配置


// 启用插件 fis.hook('relative'); // Global start fis.match('**', { // domain: '.', useHash: false, // release: '$0', relative: true }); fis.match('static/{app,lib,display}/**.js', { optimizer: fis.plugin('uglify-js') ,// js 压缩 }); fis.match('static/**.css', { optimizer: fis.plugin('clean-css') // css 压缩 });

注意:我的配置做了指定文件夹压缩js

Docker-compose 服务编排

通过docker-compose.yml 快速启动Jenkins BlueOcean容器。

docker-compose.yml文件配置如下:

version: '2'
services:
  docker:
    image: 'jenkinsci/blueocean'
    environment:
      TZ: 'Asia/Shanghai'
    restart: always
    ports:
      - '8089:8080'
    volumes:
      - /home/data/jenkins:/var/jenkins_home
      - /var/run/docker.sock:/var/run/docker.sock
      - /home/data:/home/data
      - /home/data/mavenRepository:/opt/mavenRepository
      - /opt/maven:/opt/maven
      - /opt/jdk:/opt/jdk
      - /opt/node:/opt/node
      - /opt/androidSdk:/opt/androidSdk
      - /opt/ndk/android-ndk-r10e:/opt/ndk/android-ndk-r10e
      - /root/.ssh:/root/.ssh
    privileged: true
    user: root

实现效果

配置了参数化构建在blueOcean里的效果。

image

做了一次成功的构建才算成功

image

来源: 雨林博客(www.yl-blog.com)