升级Jenkins：发布和代理 VUE 项目
(海上生明月，_ _ _ _ _)
书接上回，在之前的几篇文章中，我们主要通过几篇文章来讲解了如何通过一个镜像，快速的创建Jenkins容器实例，然后搭建我们的持续集成和持续部署的平台，相关的文章呢如下，我这里简单列举一下，省得大家查找了：
通过这两篇文章，我简单的说明了如何通过docker镜像来创建Jenkins镜像，并如何在此基础上，部署netcore项目，现在大家看到的我所有的ASP.NETCore项目，都是通过这种方式来搭建的，每次修改代码，只需要一键构建，即可部署，速度还是很快的，也有相应的操作日志，当然，还是不建议初学者这么玩儿，毕竟这是只为快，不求深入研究。
不过之前都是部署的都是后端项目，那如何构建前端项目呢？我也在视频里说到过如何处理：
第一个视频是上边两篇文章的总结和操作，第二个视频，我也尝试了如何把vue项目构建镜像和代理发布等，今天我讲的内容，是在这两篇视频都已经看过的基础上的，如果没看的，建议看看，不然可能有点儿懵。
今天的主题就是：如何通过Jenkins来持续集成前端VUE项目，当前其他前端项目以此类推，触类旁通。
PS：其实除了Jenkins，你还可以简单的通过Github的YML来实现，这也更类似容器编排的味道，下个系列在尝试k8s的时候，我会用yml着手入门。
（基本的核心项目都在这里了）
构建时间基本30秒左右，总体来说还行。
文章来源：老张的哲学
升级Jenkins镜像，以适应前端项目
在上个文章中，我们说到了使用我自己创建的一个组合镜像，来创建Jenkins容器，为什么要使用组合镜像，是因为我们在构建aspnetcore项目的的时候，要使用dotnet命令，当然，我一直想着，如果像挂载docker一样，能把dotnet.exe这种给挂载到Jenkins的容器上就好了，但是我没有找到，这样就不得不把aspnetcore的SDK给融合到Jenkins的镜像里，这也就是我为什么要创建组合镜像的原因，如果读这篇文章的你，正好会把dotnet给挂载到容器上，那欢迎指导一下，不胜感激。
好啦，言归正传，如果想要在Jenkins容器中来部署前端项目，那就肯定离不开build操作来生成dist静态文件，那也就更离不开npm了。
这不，我仿照之前在Jenkins中能使用dotnet的SDK的写法，继续升级了下镜像，把npm也融合进行了。
FROM jenkins/jenkins# Switch to root to install .NET Core SDKUSER root# Show distro information!RUN uname -a && cat /etc/*release# Based on instructiions at https://www.microsoft.com/net/download/linux-package-manager/debian9/sdk-current# Install dependency for .NET Core 3RUN apt-get updateRUN apt-get install -y curl libunwind8 gettext apt-transport-https# Based on instructions at https://www.microsoft.com/net/download/linux-package-manager/debian9/sdk-current# Install microsoft.qpgRUN curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpgRUN mv microsoft.gpg /etc/apt/trusted.gpg.d/microsoft.gpgRUN sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/microsoft-debian-stretch-prod stretch main" > /etc/apt/sources.list.d/dotnetdev.list'# Install the .NET Core frameworkRUN apt-get updateRUN apt-get install -y dotnet-sdk-3.1# Install the npmRUN apt-get install -y curl \&& curl -sL https://deb.nodesource.com/setup_14.x | bash - \&& apt-get install -y nodejs \&& curl -L https://www.npmjs.com/install.sh | sh# Install cnpmRUN npm install cnpm -gRUN npm -vRUN cnpm -v# Switch back to the jenkins user.USER jenkins
除了NPM以外，也同时把CNPM给添加上了，反正不管你是墙里还是墙外的，都可以使用吧，最终的Jenkins包大小1.35个G，包括了dotnet的SDK、NPM/CNPM的组件Jenkins镜像文件，我是这么命名的，已经提交到了dockerhub：
docker pull laozhangisphi/jenkins_with_dnt-cnpm_by_docker:latest可能你会问，为啥不用之前的镜像呢？主要是害怕影响别人使用，使用新的镜像，直接拉取就行，1.3个G，可以好好的歇会儿了。
那现在有了新的镜像，那具体如何使用呢，继续往下看，有几点需要注意的。
● ● ●
升级我们的Jenkins管理平台
上边我们有了镜像，如果你感觉可以用，那就直接Pull拉取就行了，命令就在上边，从dockerhub中拉取到服务器宿主机即可，然后根据这个新的镜像，生成一个新的Jenkins容器即可：
docker run -u root --rm -d -p 3000:8080 --name jenkins \-v /etc/localtime:/etc/localtime \-v /usr/bin/docker:/usr/bin/docker \-v /var/run/docker.sock:/var/run/docker.sock \-v /home/dockerVolumes2/jenkins_home:/var/jenkins_home \laozhangisphi/jenkins_with_dnt-cnpm_by_docker
这里的挂载时区好像还是不行，应该需要在上边加一个参数，具体我忘了，建议爱学习的可以研究下，我会在下边评论区留言，当然你可以直接直接在管理平台上修改，执行脚本命令：
System.setProperty('org.apache.commons.jelly.tags.fmt.timeZone', 'Asia/Shanghai')现在我们生成了一个新的容器，那你肯定会问，这样之前的项目，不就需要一个个迁移，重新配置一遍了么？
不会的！
如果你是用我上个文章里写的，将工作区间（主要是代码和Jenkins配置），项目配置文件（主要是项目appconfig.json、log日志文件，以及图片等）都挂载到了宿主机的话，相关的内容和数据都没有丢的，还是可以打开端口下的网站，平台一毛一样。
不信可以打我，而且我之前视频讲解过，挂载是什么意思，如果还怀疑的话，就是要么没挂载，要么没学会。
这个时候就可以把之前的镜像和容器删了，注意你这个新Jenkins的容器端口，要在nginx监听的哟。
目前我项目里一共这么多镜像和容器，然后也有其他的小Task，但是没有数据库：
（全部镜像）
（正在运行容器）
看看系统配置使用情况：
目前这么多已经使用快3个G内存了，所以说，如果搞Jenkins这一套逻辑的话，至少来个2核4G的吧，我这是8G，一年也就几百块钱。
好啦，现在环境已经配置好了，剩下的就是今天的重点，持续集成VUE项目了。
● ● ●
打包 VUE 项目镜像
其实这个具体的写法和上篇部署ASP.NETCore是类似的，我这里快速的说一下吧：
1、创建Dockerfile文件
之前我们说过的，部署vue项目，其实就是起一个nginx服务即可，那配置Dockerfile文件就很简单了：
FROM nginxMAINTAINER vueadminADD dist /usr/share/nginx/htmlADD vueadmin.nginx.conf /etc/nginx/nginx.confRUN chown nginx:nginx -R /usr/share/nginx/htmlEXPOSE 80RUN echo 'build admin image successful!!'
其中，又两个ADD，第一个就是Build以后的dist目录，第二个就是当前nginx服务的配置文件，毕竟要起服务，要做相应的配置，比如要url重写，或者压缩什么的。
2、自定义nginx配置文件
直接上代码
worker_processes auto;events {worker_connections 1024;}http {include mime.types;default_type application/octet-stream;gzip on;gzip_min_length 5k;gzip_buffers 4 16k;gzip_comp_level 8;sendfile on;keepalive_timeout 600;client_max_body_size 20m;server {listen 80;server_name localhost;location / {root /usr/share/nginx/html;index index.html index.htm;try_files $uri $uri/ /index.html;}error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}}}
不要告诉我看不懂，主要注意下root根目录的地址要和Dockerfile一致，然后就是路由重写那句话，其他的就很简单。
3、配置.dockerignore
目前就是去掉某些文件和文件夹，不过目前看来，如果按照我下边的方案，可能作用不大，因为还是会把node_modules打包进去，如果你仅仅想把dist文件夹打包，那就需要换一种写法了，具体的私聊我吧，其实说白了，就是把Dockerfile文件放到dist文件夹下就行。
.DS_Storenode_modules# local env files.env.local.env.*.local# Log filesnpm-debug.log*yarn-debug.log*yarn-error.log*
4、设计删除容器和镜像sh文件
这里先说下，为什么要设计这个sh文件。
我们之前说过，如果要修改代码，那就需要重新生成镜像，那一般的操作都是删除之前的镜像和容器，重新生成新的镜像和新的容器，这是很low也很简单的方案。
当然，你也可以来个版本控制线，每次加版本就行，我们公司是这么操作的，不过毕竟我这里用的Jenkins都是docker版本的，就不打算搞那么复杂的情况了，你可以自己尝试，思路就是每次生成的都可以加版本，然后也可以回退版本，保证在线项目一直可以正常访问状态，这也就是持续集成和持续部署的真谛。
现在依然使用删除的方案，但是如果删除的话，会有一个小问题，倘若第一次Jenkins执行，或者中间出错的话，执行stop和rm操作，会报错，这样Jenkins流程就走不下去，只能手动处理，那我们可以把这几个命令拿出来，放到sh文件里，就不会报错了，参考@提伯斯：
docker ps|grep ${1}|while read i;do i;echo "容器已启动,详细信息:${i}，即将关闭";docker stop ${1};docker rm ${1};docker rmi ${2};echo "已关闭容器,${1}" ;done;
其实我看还有的小伙伴是这么操作的，参考@Kawhi：
docker stop blogcorecontainer || true \&& docker rm blogcorecontainer || true \&& docker build -t blogcoreimage . \&& docker run -d -p 8186:80 --name blogcorecontainer blogcoreimage
就是使用 || 或者 && 命令可以避免这个问题，这个我没有尝试，你可以自己试试。
最终一个四个文件：
现在就需要配置Jenkins流程了。
配置Jenkins任务，生成容器并代理
1、创建任务，并配置
还是一个自由风格的任务，然后填写下面的步骤
# 如果没有更新包的话，可以不执行安装module#cnpm installgit checkout .rm -f util/global.js\cp -rf /var/jenkins_home/workspace/SecurityConfig/Blog.Admin/global.js util/global.jscnpm run buildchmod 777 StopContainerImg.shvueadmincontainer laozhangisphi/vueadminimgdocker build -t laozhangisphi/vueadminimg .docker run --name=vueadmincontainer -d -v /etc/localtime:/etc/localtime -it -p 2001:80 laozhangisphi/vueadminimg
这里有几点，我需要啰嗦下：
1、之前netcore的时候，我都是每次构建就删除工作区间，但是这次是vue项目，如果每次都删除的话，都需要执行install工作，那我们可以尝试用 git checkout 和git pull来保证代码最新，同时不要勾选删除指令。
2、我这里还是用了配置文件，所以你可以参考global.js写法，配置ids4和jwt。
3、StopContainerImg.sh，就是上文提到的文件，用来替换stop和rm命令。
到这里就完成了整体历程，剩下最后一步代理了。
2、修改反向代理配置
现在docker已经多了一个镜像和容器，并监听2001端口，你需要理解一下，为什么会监听2001端口，因为我们启动的本来就是一个nginx服务。
web服务没问题了，那现在就需要反向代理了，毕竟要调后端接口，很简单，在宿主机的nginx.conf中，配置vueadmin的监听：
重启nginx，就可以看到一切正常了，注意jwt和ids4的切换。
● ● ●
打完收工，到今天，我们Jenkins的相关工作就真的迁移完成了，我们可以不用学会，甚至也可以不用学，毕竟不影响部署docker，因为我们下一步会有一个重头戏来替换，那就是K8s，下一个系列再见。