当前位置: 首页 > Web前端 > vue.js

Jenkins+docker实现前端和nodejs服务器的自动发布

时间:2023-04-01 00:03:07 vue.js

前言现代软件工程强调持续集成的能力,而持续集成的一个重要环节就是持续部署。也就是本文的重点,自动化部署。本文将从头开始讲述各个环节的原理和实现方法。jenkins+docker安装安装docker只需要一条命令即可安装:curl-fsSLhttps://get.docker.com|bash-sdocker--mirrorAliyun输入命令,回车等待一会,看到如下信息安装完成:root@iZwz92akl2vtt9nu4w6lq7Z:~#curl-fsSLhttps://get.docker.com|bash-sdocker--mirrorAliyun#执行docker安装脚本,commit:3d8fe77c2c46c5b7571f94b42793905e5b3e42e4+sh-c'>/dev/null'+sh-c'DEBIAN_FRONTEND=noninteractiveapt-getinstall-y-qqapt-transport-httpsca-证书curl>/dev/null'+sh-c'curl-fsSL"https://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg"|apt-keyadd-qq->/dev/null'Warning:apt-keyoutputshouldnotbeparsed(stdoutisnotaterminal)+sh-c'echo"deb[arch=amd64]https://mirrors.aliyun.com/docker-ce/linux/ubuntufocalstable">/etc/apt/sources.list.d/docker.list'+sh-c'apt-getupdate-qq>/dev/null'+'['-n''']'+sh-c'apt-getinstall-y-qq--no-install-recommendsdocker-ce>/dev/null'+sh-c'dockerversion'Client:Docker引擎-社区版本:20.10.3API版本:1.41Go版本:go1.13.15Git提交:48d30b5内置:2021年1月29日星期五14:33:21OS/Arch:linux/amd64上下文:默认实验:trueServer:Docker引擎-社区引擎:版本:20.10.3API版本:1.41(最低版本1.12)Go版本:go1.13.15Git提交:46229ca内置:2021年1月29日星期五14:31:32OS/Arch:linux/amd64实验:falsecontainerd:Version:1.4.3GitCommit:269548fa27e0089a8b8278fc4fc781d7f65a939brunc:Version:1.0.0-rc92GitCommit:ff819c7e9184c13b7c2607fe6c30ae19403a7affdocker-init:Version:0.19.0GitCommit:de40ad0IfyouwouldliketouseDockerasanon-rootuser,youshouldnowconsideradding您的用户加入“docker”组,例如:sudousermod-aGdockeryour-userRemem请注意,您必须注销并重新登录才能生效!警告:将用户添加到“docker”组将授予运行容器的能力,这些容器可用于在docker主机上获得root权限。有关详细信息,请参阅https://docs.docker.com/engine/security/security/#docker-daemon-attack-surface。执行一次查看版本的命令再次确认安装成功:root@iZwz92akl2vtt9nu4w6lq7Z:~#dockerversionClient:Docker引擎-社区版本:20.10.3API版本:1.41Go版本:go1.13.15Git提交:48d30b5内置:2021年1月29日星期五14:33:21OS/Arch:linux/amd64上下文:默认实验:trueServer:Docker引擎-社区引擎:版本:20.10.3API版本:1.41(最低版本1.12)Go版本:go1.13.15Git提交:46229ca内置:2021年1月29日星期五14:31:32OS/Arch:linux/amd64实验:falsecontainerd:Version:1.4.3GitCommit:269548fa27e0089a8b8278fc4fc781d7f65a939brunc:Version:1.0.0-rc92GitCommit:ff819c7e9184c13b7c2607fe6c30ae19403a7affdocker-init:Version:0.19.0GitCommit:de40ad0本文使用的服务器系统是Ubuntu20.0464位,其它系统安装过程similar在docker上安装jenkins,执行如下命令:dockerrun\-uroot\--rm\-d\-p8080:8080\-p50000:50000\-vjenkins-data:/var/jenkins_home\-v/var/run/docker.sock:/var/run/docker.sock\jenkinsci/blueocean等待下载安装,出现以下信息说明安装完成:root@iZwz92akl2vtt9nu4w6lq7Z:~#dockerrun\>-uroot\>--rm\>-d\>-p8080:8080\>-p50000:50000\>-vjenkins-data:/var/jenkins_home\>-v/var/run/docker.sock:/var/run/docker.sock\>jenkinsci/blueoceanUnabletofindimage'jenkinsci/blueocean:latest'locallylatest:从jenkinsci/blueocean801bfaa63ef2拉取:拉取完成755713f1a3c1:拉取完成eb3cc996a4d2:拉取完成53fff950d571:拉取完成f6936a1aec24e7a:Pullf7complete5a6a1322c53804d:拉取完成6f3525ef00e6:拉取完成d105e9324027:拉取完成3bd288623327:拉取完成0c464039fb0b:拉取完成25248a2f7ff6:拉取完成80aea1f6597d:Pu将完成9597a90cd370947fb:Pullcomplete6dc19b8b34e0:PullcompleteDigest:sha256:27955db4139f933fa831638f99608b0ceb504e88ce82bcbbc80e41bfcfdcca45Status:Downloadednewerimageforjenkinsci/blueocean:latest1f2b65eac96879b8ab1717edc25ccf508bd2dac2702ac3e924ce74667227a190更多安装细节请参考:jenkins安装同样我们运行dockerps-a确认是否正确安装并启动了jenkinsroot@iZwz92akl2vtt9nu4w6lq7Z:~#dockerps-aCONTAINERIDIMAGECOMMANDCREATEDSTATUSPORTSNAMES1f2b65eac968jenkinsci/blueocean"/sbin/tini--/usr/..."2小时前Up2小时0.0.0.0:8080->8080/tcp,0.0.0.0:50000->50000/tcpfervent_brown以上信息说明jenkins已经安装并启动。这个时候我们用浏览器打开:服务器地址:8080,可以看到如下页面:需要输入的管理员密码在jenkins打印的日志里面,我们回到服务器端执行以下命令:dockerlogs1f2b65eac968其中1f2b65eac968是jenkins容器的CONTAINERID,我们执行dockerps-a命令可以看到执行命令后,在终端中找到这个字符串:**********************************************************************************************************************************************************************************************************需要Jenkins初始设置。已创建管理员用户并生成密码。请使用以下密码继续安装:f12938a211dc4402a7e679a71e1962e3也可在以下位置找到:/var/jenkins_home/secrets/initialAdminPassword*****************************************************************************************************************************************************************************************************将随机字符串复制进去,返回浏览器,在管理员密码的文本框中输入字符串,然后单击继续按钮。等待一段时间后,进入如下页面,点击安装推荐插件。接下来就进入插件安装的等待流程。安装完成后会进入创建管理员的页面,填写相关信息即可创建管理员。接下来进入实例配置页面,我们不做任何改动,点击保存完成。至此我们已经成功安装了jenkins+docker环境。安装jenkins插件AliyunOSS上传插件插件:AliyunOSSUploader功能:用于上传前端静态文件到阿里云的OSS。创建pipelinejenkins的pipeline是一个多分支pipeline,pipeline会完成我们的自动化测试发布等一系列任务。点击页面左侧打开蓝海:点击创建新流水线选择一个码仓类型,然后填写你的前端码仓地址,填写码仓的用户名和密码,点击CreatePipeline创建前端代码测试、构建、上传cdn任务节点进入pipeline编辑页面,点击+创建节点,命名为fe。点击设置,设置node运行环境为:docker,node:14.8.0-alpine3.12,node的版本号根据项目调整,在最合理的状态下,开发环境、测试环境的node版本、施工环境、生产环境都要一致。让我们开始添加步骤,展开步骤列表,然后单击添加步骤。注:示例前端工程基于vuecli。如果直接使用webpack,相关命令会有所不同。第一步:安装依赖步骤目的:安装前端依赖,用于后续测试、构建等步骤。步骤类型:Shell脚本内容:npminstall步骤2:单元测试步骤目的:运行单元测试,如果进程报错,整个任务将中断。步骤类型:Shell脚本内容:npmruntest注意:这里只是为了单元测试,实际情况可能还需要端到端测试,多加一步即可。第三步:构建前端代码步骤目的:如果测试通过,则打包构建前端代码。步骤类型:Shell脚本内容:npmrunbuild步骤四:暂存index.html步骤目的:构建完成后暂存前端入口html文件,后续步骤会用到。Steptype:StashsomefilestobeusedinlaterinbuildContent:以上内容根据自己项目的情况修改目录和名称。如果是多页项目,需要重复多次这个步骤,临时存放多个入口的html文件save。第五步:上传前端代码到阿里云的OSS步骤目的:将构建好的前端代码上传到阿里云的OSS(相当于cdn)。步骤类型:阿里云OSS上传内容:创建服务器代码测试、搭建、生成docker镜像节点本文服务器使用nodejs语言,使用eggjs框架。如果您使用php或java作为后台语言,相关设置会有所不同。点击fe节点后面的+,创建一个节点,命名为service。让我们开始添加步骤,展开步骤列表,然后单击添加步骤。第一步:在git上拉取服务端代码步骤目的:在git上拉取服务端代码。步骤类型:Git内容:需要在jenkins的凭证管理中添加凭证id,如下图,填写git的用户名和密码,然后自定义一个凭证id。第二步:将前端入口html放到服务器代码的指定目录中在fe节点的第四步,我们暂时保存了前端index.html,现在我们先进入服务器代码的具体目录(你想放置这个文件目录),然后把这个index.html拿出来放到这个目录下。这样你的服务器代码就可以在用户访问时返回index.html文件的内容。步骤目的:进入服务器代码的指定目录步骤类型:更改当前目录内容:进入服务器代码的app目录,通过子步骤将我们的临时index.html放在该目录下。不同服务器的目录结构会有所不同,请根据服务器的项目结构选择位置。子步骤在步骤2中增加一个子步骤步骤目的:将临时index.html放在当前目录步骤类型:恢复之前存放的文件内容:步骤3:登录阿里云容器镜像服务阿里云容器镜像服务对于存放docker镜像,也可以使用docker自己创建镜像仓库。这里不讨论这个。步骤目的:下一步需要将镜像传输到阿里云的容器镜像服务,所以先登录。步骤类型:Shell脚本内容:dockerlogin-u[阿里云账号]-p[阿里云密码][镜像仓库地址]具体参数请参考阿里云相关文档。第四步:将服务器代码构建成镜像步骤类型:Shell脚本内容:dockerbuild-t[镜像仓库地址]:$BUILD_NUMBER这一步需要先配置Dockerfile,这一步这里不展开,大家可以搜索相关自己的信息。第五步:提交镜像到阿里云的容器镜像服务步骤类型:Shell脚本内容:dockerpush[镜像仓库地址]:$BUILD_NUMBER第六步:运行镜像到目标服务器步骤类型:Shell脚本内容:ssh-oStrictHostKeyChecking=noroot@[目标服务器ip]dockerrm-f[容器自定义名称]||truedockerrun-d--name=[容器自定义名称]--networkhost[镜像仓库地址]:$BUILD_NUMBER注意:一般情况下需要部署多台服务器。这里仅以部署一个为例;dockerrm首先删除服务器上运行的旧容器;ssh免密码登录需要在两台服务器上配置密钥。资料可自行搜索;清除旧镜像的其他细节。在服务器上运行远程镜像时,每次都会在服务器中保存旧镜像,所以每次运行新镜像前都需要清理旧镜像。您可以使用以下命令清理相关图像:dockerrmi-f`dockerimages|grep'[图片关键字]'|awk'{print$3}'`||真的