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里的效果。
做了一次成功的构建才算成功