【复制攻城狮日志】docker搭建jenkins拉取svn代码，打包vue项目部署到nginx上

↑开场图一张，故事靠编辑↑前言打开搜索引擎，输入“复制攻城狮”，并且找到最新的记录已经是去年4月份的了，也就是说我又一年没有总结自己的成长了。过惯了“温水煮青蛙”的日子，无论是经验水平还是薪资收入，都被同时期的同龄人远远甩在后面。年初以来，一直在家“云办公”，各种打包发布需求困扰着我。由于种种原因，小作坊模式的开发团队依然使用svn进行代码托管，无力更改，无力吐槽。我们的项目是完全前后台分离的。前端用的是Vue，大家都知道。之前，是一位美丽善良的考姐。使用公司测试打包专用电脑手动打包发布到服务器静态目录，然后手动测试。后来打包的繁重任务落到了前端，重复的步骤让人厌烦：在本地电脑新建目录拉取svn代码-->安装npm依赖-->打包不同环境-->上传服务器静态目录，简单繁琐的工作，通过EasyConnect连接公司内网的速度慢得可以绝望。终于后端看不下去了，提出了我用docker的想法。不幸的是，我没有在前端使用docker进行部署。随便在nginx静态文件服务器下面丢一个文件夹；后台又问我打包命令之类的，然后就没了。鉴于后端部署docker和jenkins一键发布，想了想，前端也可以用jenkins一键发布！不就是把我在本地手动输入的npm命令丢给jenkins去做吗？就去做吧，就去做吧！无需运维，撸起袖子干！写的不妥还望指正！用docker安装jenkins虽然公司的机器已经用docker部署了jenkins，但是抱着学习的态度，我又用我的乞丐版阿里云ECS操作了一遍。copy操作之后，会在合适的8080端口启动一个jenkins服务。关于docker的内容，这里就不展开了，因为我也不太了解。详情可以关注下方图雀社区的docker火爆教程。需要一杯茶才能开始。Docker真的只需要一杯茶。那我这里就直接安装jenkins了。更详细的安装文档，请一步步安装Jenkins。那么我这里就简单三步，三行命令分分钟启动一个jenkins服务。拉取jenkins镜像dockerpulljenkins/jenkins新建文件夹用于磁盘挂载mkdir/home/jenkinsstartservicedockerrun-itd--namejenkins-p8080:8080-p50000:50000--privileged=true-v/home/jenkins:/var/jenkinsjenkins/jenkins很少见，没有rollover也没有bug。这里第一次打开会提示把密码放在/var/jenkins_home/secrets/initialAdminPassword中。当然服务器上没有这个文件，需要进入docker容器。当然也可以直接通过安装日志查看：dockerlogsjenkins。dockerps-adockerexec-itjenkins/bin/bashcat/var/jenkins_home/secrets/initialAdminPassword嗯，密码我拿到了，复制试试吧！O98K，等一口茶，确认密码，我们来到了初始化页面jenkinsinitializationrollover当我点了安装标签，等待初始化完成的时候，时间一点一点过去了，看着上面的红叉满屏的一动不动的进度条，让我焦急起来，一种不祥的预感涌上心头。十分钟过去了，二十分钟过去了，三十分钟过去了……jenkins卡在了GettingStartedHuh，一定是碰壁了！看到安装有问题，第一感觉就是撞墙了，那我们改一下配置文件吧！然后先进入jenkins容器。一开始以为结果是jenkins容器根目录下的Permissiondenied。以为上一步的密码存放在/var/jenkins_home/secrets/initialAdminPassword中，于是去/var/jenkins_home/目录下看了一下，成功找到了/var/jenkins_home/updates/default.json，想放心打开看看是什么配置导致jenkins插件安装这么慢。结果忘记docker容器默认是没有vi或者vim的。首先通过dockercp将文件复制到新建的/home/jenkins目录下，查看default.json的配置。果然“一枝红杏出墙”，接下来的目标就是将connectionCheckUrl字段改成墙内地址。dockercpjenkins:/var/jenkins_home/updates/default.json/home/jenkins/vi/home/jenkins/default.json考虑到我安装了vi或者vim还没有爬出坑，这里通过mainenvironment修改后，复制到容器中，但是也掉坑了，直接复制坑不生效。这里我先进入jenkins容器备份default.json，将主环境修改后的配置文件复制到jenkins容器/tmp目录下，然后移动到/var/jenkins_home/updates/目录下。然后将配置文件复制到主环境中，验证是否替换成功。dockercp/home/jenkins/default.jsonjenkins:/tmp/dockerexec-uroot-itjenkins/bin/bashmv/var/jenkins_home/updates/default.json/var/jenkins_home/updates/default.json.bakmv/tmp/default.json/var/jenkins_home/updates/default.json退出dockercpjenkins:/var/jenkins_home/updates/default.json/home/jenkins/default.json.bakvi/home/jenkins/default.json.bakdone修改配置后，重启即可。如果正常，就可以进入账号注册页面了。如果还是显示很多红叉，右下角retry的左边应该有一个skip选项。历经几个世纪，插件终于装好了，新手上路啦！Vue项目预览为了高度还原我们简单繁琐的打包场景，特意在码云上新建了一个SVN项目（不是福宝里的），并初始化了一些简单的配置，比如区分环境，给打包文件加上时间注释等.Vue项目配置或者webpack配置可以参考VueCLI官方文档。webpack配置，推荐带你深度解锁Webpack系列。本demovuedemo项目地址：svn://gitee.com/hu-qi/vue-demo.env文件区分环境变量.env#在所有环境下加载，默认development.env.test#仅用于测试模式下加载。env.prod#它只在生产模式下加载package.json通过定义不同的指定来区分运行/打包不同的环境。"serve":"vue-cli-serviceserve--modedevelopment","serve:test":"vue-cli-serviceserve--modetest","serve:prod":"vue-cli-serviceserve--modeprod","dev":"vue-cli-servicebuild--modedevelopment","build":"vue-cli-servicebuild--modeprod","test":"vue-cli-servicebuild--modetest”，vue.config.js简单配置webpack输入目录，通过BannerPlugin插件在每个chunk文件的header添加自定义时间注解，以区分是否是最新版本。constwebpack=require('webpack');module.exports={publicPath:'./',outputDir:process.env.outputDir,configureWebpack:{plugins:[newwebpack.BannerPlugin(newDate().toLocaleString())]}};获取业务代码中的环境配置访问process.env.env设置的环境配置参数//...通过package.json运行预览中定义的指令可以达到预期的效果。打包预览通过package.json中定义的打包，可以分别展示dev、test、prod文件夹，文件中的时间标注符合预期。发布到nginx这里我还是通过docker安装nginx，将打包后的文件夹上传到nginx的静态目录，实现发布。在这里，docker安装nginx，我只是简单安装：dockerpullnginx//Pullnginxdockerrun-d--namenginxtest-p80:80nginx//开始测试验证配置mkdir-p/home/nginx/{conf,html,logs}//宿主新建配置文件夹dockercpnginxtest:/etc/nginx/nginx.conf/home/nginx/conf/nginx.conf//复制配置文件dockerstopnginxtest//stopnginxtestdockerrmnginxtest//删除nginxtestdockerrun--namenginx-d-p80:80-v/home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf-v/home/nginx/logs:/var/log/nginx-v/home/nginx/html:/usr/share/nginx/htmlnginx//运行官方的nginx并挂载到宿主机上，将打包后的文件放到宿主机的/home/nginx/html即可正常访问。我这里上传的prod文件夹可以通过***/prod访问。Jenkins打包发布Vue项目。回顾一下测试姐纯手工打包发布的步骤：svn拉取代码-->安装npm安装依赖包-->npm运行build打包prod-->上传prod到服务器nginx静态目录（包括备份之前的版本）。通过学习和实践，通过给jenkins安装一些插件，我们可以很轻松的拉取代码，安装NodeJS，连接服务器执行shell，构建完进程，点击按钮，一切就交给你了到jenkins了，我们再也不怕测试姐姐找我打包了。Jenkins安装插件和nodejs我这里根据我们打包要求安装的插件主要有SubversionPlug-in、PublishOverSSH、NodeJSPlugin。插件安装在系统管理-->插件管理-->可选插件中。搜索对应的插件并安装。nodejs的安装在系统管理-全局工具配置-NodeJS。默认情况下，此选项不可用。安装NodeJS插件后，它将可用。这里我安装的是默认的Node版本，一般根据实际情况设置。另外设置镜像cnpm--registry=https://registry.npm.taobao.orgPublishoverSSHsettings我们已经安装了PublishOverSSH插件，在系统管理中可以找到对应的设置位置-->系统设置。在这里我们配置我们要部署的服务器。在下面的步骤中，我们通过执行shell脚本将部署好的服务器打包发布。配置jenkins构建任务如果你也有幸遭受打包的困扰，那么你我一定已经在脑海深处有了一些简单的rm-rf、mv、tar等命令。我这里的新项目命名为vueDemo\-prod。选择对应的项目-->配置，进入项目配置。首先，我配置了General丢弃旧的构建，保留3天的构建日，最多保留10个构建；然后我选择从svn中拉取代码进行源代码管理。然后搭建环境，我们在下面的步骤中使用之前安装好的节点进行打包。环境准备好了，接下来就是施工了。这里我们选择执行shell。命令主要与前端项目中配置的打包命令一致，压缩后用于后续上传。构建完成后的最后操作是连接发布服务器，仍然以shell命令的形式进行文件上传、备份、解压。确保打包后的文件夹最终发布到/home/nginx/html。基本上，如果你设置它，没有什么大问题。保存应用程序并单击立即构建。喝茶时间，坐等jenkins搭建成功！关于调试，前路未必一帆风顺。从上图可以看出，即使构建成功，我也踩了很多坑。通过之前构建失败的日志，我们可以很清楚的定位问题并解决。当然整个过程也很方便调试。可以在项目首页面板的工作区查看具体代码，点击某个构建历史进入，然后查看控制台输出，可以看到每次构建失败的具体原因。遇到过很多问题，包括node安装失败，时间不是标准时间，一些shell命令写的不对，导致构建失败；我什至遇到了dockerrestartjenkins还是无法网页的问题。失败并不可怕，可怕的是失败后不想再尝试！在家“云办公”结束的那段时间，我有很多机会写这篇实践记录文章，但惯性太强，在实践过程中也屡屡碰壁。不过最终还是有幸拍出了这部水文，期待评论区大佬们批评指正！