升级Jenkins：发布和代理VUE项目

(海上生明月，_ _ _ _ _)

书接上回，在之前的几篇文章中，我们主要通过几篇文章来讲解了如何通过一个镜像，快速的创建Jenkins容器实例，然后搭建我们的持续集成和持续部署的平台，相关的文章呢如下，我这里简单列举一下，省得大家查找了：

文章目录

《CI/CD系列：使用Docker安装Jenkins》

《使用Jenkins来发布和代理.NetCore项目》

通过这两篇文章，我简单的说明了如何通过docker镜像来创建Jenkins镜像，并如何在此基础上，部署netcore项目，现在大家看到的我所有的ASP.NETCore项目，都是通过这种方式来搭建的，每次修改代码，只需要一键构建，即可部署，速度还是很快的，也有相应的操作日志，当然，还是不建议初学者这么玩儿，毕竟这是只为快，不求深入研究。

不过之前都是部署的都是后端项目，那如何构建前端项目呢？我也在视频里说到过如何处理：

视频目录

《Jenkins 安装与项目构建》

《Docker 部署VUE项目》

第一个视频是上边两篇文章的总结和操作，第二个视频，我也尝试了如何把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也融合进行了。

FROMjenkins/jenkinsSwitch to root to install .NET Core SDKUSERrootShow distro information!RUNuname -a && cat /etc/*releaseBased on instructiions at https://microsoft.com/net/download/linux-package-manager/debian9/sdk-currentInstall dependency for .NET Core 3RUNapt-get updateRUNapt-get install -y curl libunwind8 gettext apt-transport-httpsBased on instructions at https://microsoft.com/net/download/linux-package-manager/debian9/sdk-currentInstall microsoft.qpgRUNcurl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpgRUNmv microsoft.gpg /etc/apt/trusted.gpg.d/microsoft.gpgRUNsh -c echo "deb [arch=amd64] https://packages.microsoft.com/repos/microsoft-debian-stretch-prod stretch main" > /etc/apt/sources.list.d/dotnetdev.listInstall the .NET Core frameworkRUNapt-get updateRUNapt-get install -y dotnet-sdk-3.1Install the npmRUNapt-get install -y curl \&& curl -sL https://deb.nodesource.com/setup_14.x | bash - \&& apt-get install -y nodejs \&& curl -L https://npmjs.com/install.sh | shInstall cnpmRUNnpm install cnpm -gRUNnpm -vRUNcnpm -vSwitch back to the jenkins user.USERjenkins

除了NPM以外，也同时把CNPM给添加上了，反正不管你是墙里还是墙外的，都可以使用吧，最终的Jenkins包大小1.35个G，包括了dotnet的SDK、NPM/CNPM的组件Jenkins镜像文件，我是这么命名的，已经提交到了dockerhub：

dockerpull laozhangisphi/jenkins_with_dnt-cnpm_by_docker:latest

可能你会问，为啥不用之前的镜像呢？主要是害怕影响别人使用，使用新的镜像，直接拉取就行，1.3个G，可以好好的歇会儿了。

那现在有了新的镜像，那具体如何使用呢，继续往下看，有几点需要注意的。

●●●

升级我们的Jenkins管理平台

上边我们有了镜像，如果你感觉可以用，那就直接Pull拉取就行了，命令就在上边，从dockerhub中拉取到服务器宿主机即可，然后根据这个新的镜像，生成一个新的Jenkins容器即可：

dockerrun -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文件就很简单了：

FROMnginxMAINTAINERvueadminADDdist /usr/share/nginx/htmlADDvueadmin.nginx.conf /etc/nginx/nginx.confRUNchown nginx:nginx -R /usr/share/nginx/htmlEXPOSE80RUNecho build admin image successful!!

其中，又两个ADD，第一个就是Build以后的dist目录，第二个就是当前nginx服务的配置文件，毕竟要起服务，要做相应的配置，比如要url重写，或者压缩什么的。

2、自定义nginx配置文件

直接上代码

worker_processesauto;events{worker_connections1024;}http{includemime.types;default_typeapplication/octet-stream;gzipon;gzip_min_length5k;gzip_buffers416k;gzip_comp_level8;sendfileon;keepalive_timeout600;client_max_body_size20m;server{listen80;server_namelocalhost;location/ {root/usr/share/nginx/html;indexindex.html index.htm;try_files$uri$uri/ /index.html;}error_page500502503504/50x.html;location= /50x.html {roothtml;}}}

不要告诉我看不懂，主要注意下root根目录的地址要和Dockerfile一致，然后就是路由重写那句话，其他的就很简单。

3、配置.dockerignore

目前就是去掉某些文件和文件夹，不过目前看来，如果按照我下边的方案，可能作用不大，因为还是会把node_modules打包进去，如果你仅仅想把dist文件夹打包，那就需要换一种写法了，具体的私聊我吧，其实说白了，就是把Dockerfile文件放到dist文件夹下就行。

.DS_Storenode_moduleslocalenvfiles.env.local.env.*.localLogfilesnpm-debug.log*yarn-debug.log*yarn-error.log*

4、设计删除容器和镜像sh文件

这里先说下，为什么要设计这个sh文件。

我们之前说过，如果要修改代码，那就需要重新生成镜像，那一般的操作都是删除之前的镜像和容器，重新生成新的镜像和新的容器，这是很low也很简单的方案。

当然，你也可以来个版本控制线，每次加版本就行，我们公司是这么操作的，不过毕竟我这里用的Jenkins都是docker版本的，就不打算搞那么复杂的情况了，你可以自己尝试，思路就是每次生成的都可以加版本，然后也可以回退版本，保证在线项目一直可以正常访问状态，这也就是持续集成和持续部署的真谛。

现在依然使用删除的方案，但是如果删除的话，会有一个小问题，倘若第一次Jenkins执行，或者中间出错的话，执行stop和rm操作，会报错，这样Jenkins流程就走不下去，只能手动处理，那我们可以把这几个命令拿出来，放到sh文件里，就不会报错了，参考@提伯斯：

!/bin/bashdocker ps|grep${1}|whilereadi;doi;echo"容器已启动,详细信息:${i}，即将关闭";docker stop${1};docker rm${1};docker rmi${2};echo"已关闭容器,${1}";done;

其实我看还有的小伙伴是这么操作的，参考@Kawhi：

dockerstopblogcorecontainer ||true\&& docker rm blogcorecontainer ||true\&& dockerbuild-t blogcoreimage . \&& docker run -d -p8186:80--name blogcorecontainer blogcoreimage

就是使用 || 或者 && 命令可以避免这个问题，这个我没有尝试，你可以自己试试。

最终一个四个文件：

现在就需要配置Jenkins流程了。

配置Jenkins任务，生成容器并代理

1、创建任务，并配置

还是一个自由风格的任务，然后填写下面的步骤

如果没有更新包的话，可以不执行安装modulecnpm installgitcheckout .rm-f util/global.js\cp-rf /var/jenkins_home/workspace/SecurityConfig/Blog.Admin/global.js util/global.jscnpmrun buildchmod777 StopContainerImg.sh./StopContainerImg.shvueadmincontainer laozhangisphi/vueadminimgdockerbuild -t laozhangisphi/vueadminimg .dockerrun --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的监听：

其他的都不需要改，只需要修改下vueadmin这个域名的代理方式就行，之前是静态文件，现在是代理2001，反向代理还是8081.重启nginx，就可以看到一切正常了，注意jwt和ids4的切换。

●●●

打完收工，到今天，我们Jenkins的相关工作就真的迁移完成了，我们可以不用学会，甚至也可以不用学，毕竟不影响部署docker，因为我们下一步会有一个重头戏来替换，那就是K8s，下一个系列再见。

专心做技术

努力分享

了解更多精彩