jenkins+pipeline+docker部署vue项目
创始人
2025-05-31 09:22:43
0

这里只是一个简单的例子,只要掌握了思路,部署别的项目都是一样的

项目步骤

第一步:拉取代码
第二步:编译部署获取构建产物
第三步:将产物传输到业务服务器,并根据具体业务场景看是否需要重启服务

nodejs项目的话就是拉去代码编译,把生成的静态文件传输到业务服务器的web服务的静态路径下。一般nginx居多,

新建job,选择流水线项目

在这里插入图片描述

不需要勾选任何选项,只需要在流水线的区域去编写流水线脚本,
在这里插入图片描述
先在脚本框写一个pipeline块,所有你的流水线脚本步骤都是在这个pipeline块里

pipeline {}

然后点击左下角的流水线语法,进到对应语法帮助页面去按需生成我们需要的代码

声明式指令生成器用来生成基础的流水线语法块,
片段生成器用来生成具体的业务操作语法代码,一般在stages里某个stagesteps里,
在这里插入图片描述
首先确定负责构建编译打包的服务器,
声明式指令生成器处选择agent来确定负责job工作的节点,只有一台构建节点的话不用选,直接生成代码
在这里插入图片描述

agent any

agent 要写在pipeline块的第一行,

复制代码 agent any到job的脚本框,
在这里插入图片描述

编译工具。前端一般nodejs ,后端java就是mvn,还有其他项目的自己类推

这里选择左侧的生命是指令生成器,步骤选择tools,然后下拉框选择我们用来编译的工具,如果没有去全局设置里安装一下,然后点击生成脚本

在这里插入图片描述
一般会生成如下类似的代码,单引号是你在全局配置里安装时自定义的名字

tools {nodejs 'node'
}

复制代码块到job的脚本框!
有了工具就可以开始去拉取代码编译打包了

前面讲到有三个步骤,拉代码,编译,传送产物到业务服务器,所以这里先生成含有三个stage的一个stages

在这里插入图片描述
生成代码如下

stages {stage('pull code') {steps {// One or more steps need to be included within the steps block.}}stage('build') {steps {// One or more steps need to be included within the steps block.}}stage('deploy') { steps {// One or more steps need to be included within the steps block.}}}

先把stages阶段集代码复制到pipeline块里去,再去生成对应的steps里的具体业务代码去补充就可以

拉取代码 步骤是选择checkout: Check out from version control
在这里插入图片描述
填写你自己的业务git地址和拉取代码的凭证,分支等,生成如下类似对应代码段,复制到pull code的stage的steps

checkout([$class: 'GitSCM', branches: [[name: '*/prerelease']], extensions: [], userRemoteConfigs: [[credentialsId: '**-**-**-**', url: 'https://**.com/**.git']]])

接着生成编译命令(不同的项目编译命令不一样,按照实际情况来)

在这里插入图片描述

sh '''node -v
npm -vnpm install
npm -v
npm run build:pre'''

复制代码到名字为build的stage中的steps

接着就是更新产物的阶段,

这里的话,因为每个人运行的环境不一样,
如果是直接虚拟机起的服务,那么去替换对应路径下的静态文件即可
如果是docker容器,静态文件已经映射到宿主机,那同样也是替换即可
如果是有自己的私服harbor之类的,那就是会繁琐一点,需要删除

这里我用的第二种,项目初始时规划好目录,build一次镜像,然后把静态文件映射出来,之后更新只需要替换静态文件即可

业务服务器启动容器的命令是
docker run -itd -p 9998:80 -v /docker/h5/files/:/app/ -v /docker/logs/:/var/log/nginx/ -v /docker/h5/conf.d:/etc/nginx/conf.d --name nginx-h5 nginx-h5
所有用到的目录都在/docker/h5/下
在这里插入图片描述
back_dir 为每次备份目录,静态文件也可以不用备份
conf.d 存放容器nginx的配置文件
files 存放静态文件
logs 存放日志文件

由于静态文件已经映射出来,所以每次只需要去更新替换files目录下的文件,以及备份

pipiline流水线传输文件一般用sshPublisher:Send build artifacts over SSH
SSH Publishers 插件和远程节点也需要提前配置好

在这里插入图片描述
这里我们选择好提前配置好的远程节点,
Source files: 源文件,一般在当前目录的/dist/目录下,dist/**说明递归复制
Remove prefix 去除的前缀 dist
Remote directory 目标目录,你业务服务器的静态目录
Exec command 在节点上想运行的命令,没有可以不写,因为这里我还想备份一下每次构建的产物,所以配置了两句命令

cd /docker/h5/files/
tar -aczf  ./back_dir/$JOB_NAME-$BUILD_NUMBER.tar.gz ./files/*

点击生成流水线代码

sshPublisher(publishers: [sshPublisherDesc(configName: 'init-test', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '''cd /docker/h5/files/
tar -aczf  ./back_dir/$JOB_NAME-$BUILD_NUMBER.tar.gz ./files/*''', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '/docker/h5/files/', remoteDirectorySDF: false, removePrefix: 'dist', sourceFiles: 'dist/**')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])

将代码块复制到deploy的stage的steps步骤里!

大功告成,来看一下完整通过一步步生成的步骤的完整代码

pipeline {agent anytools {nodejs 'node'}stages {stage('pull code') {steps {checkout([$class: 'GitSCM', branches: [[name: '*/prerelease']], extensions: [], userRemoteConfigs: [[credentialsId: '********************', url: 'https://**************************.git']]])}}stage('Build') {steps {sh '''node -vnpm -vnpm installnpm -vnpm run build:pre'''}}stage('deploy') {steps {sshPublisher(publishers: [sshPublisherDesc(configName: 'init-test', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '''cd /docker/h5/files/tar -aczf  ./back_dir/$JOB_NAME-$BUILD_NUMBER.tar.gz ./files/*''', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '/docker/h5/files/', remoteDirectorySDF: false, removePrefix: 'dist', sourceFiles: 'dist/**')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])}}
}

点击保存,去构建一下,看静态目录下的文件是否更新,看备份目录下是否有压缩包

构建前files下静态文件时间
在这里插入图片描述
构建后文件时间
在这里插入图片描述
说明已经正常更新

相关内容

热门资讯

Spring 远程加载配置 本文以携程的Apollo和阿里的Nacos为例。 pom中引入一下依赖: ...
四川安居端午游园会启幕 首日迎... 张勤宝 封面新闻记者 刘虎端午佳节,四川省遂宁市安居区节日氛围浓,人们体验端午民俗,感悟传统文化。在...
前端-http请求 目录:  (1)表单  (2)...
到四川旅游团建五天一般多少钱,... 标题:到四川旅游团建五天一般多少钱,驴友亲测!——与乐乐一起的难忘旅程 四川旅游推荐!当地导游-乐乐...
去四川旅游攻略小包团五日游报价... 标题:去四川旅游攻略小包团五日游报价亲测,跟着乐乐玩转天府之国! 四川旅游推荐!当地导游-乐乐:18...
上海6月1日入汛 6月1日,上海正式入汛,汛期历时四个月,将至9月30日结束。据气象部门此前发布的初步预测,2025年...
2023-DataWorks数...  DataWorks开发规范 1 数仓基本概念1.4.1 ods数据源层表命名规范1.4.2 dim...
一、基础算法4:高精度 模板题... 文章目录算法模板高精度加法模板高精度减法模板高精度乘低精度模板高精度除以低精度模板模板题高精度加法原...
原创 烙... #图文打卡计划#小时候最盼着奶奶做烙饼的日子。灶台边飘着面香,铁锅里滋啦作响,她总能用那双布满皱纹的...
椰泰新品上市丨餐桌有简胃,健康... 餐桌有简胃,健康又开味
jmeter公共数据维护 为什么要进行公共数据维护?数据维护的方法是?一、用户自定义变量添加一个用...
家常菜:素炒小油菜,非常适合夏... 嗨!大家好!我是懒懒,爱美食爱生活! 一名每天在思考吃什么的90后社畜,喜欢做饭的业余美食制作者,用...
不仅好吃,还能提高复习效率!一... 高考的钟声渐近,紧迫感仿佛在空气中弥漫。一道美味的海鲜小菜,不仅能慰藉疲惫的心灵,还能提供能量,帮助...
原创 万... 很多糖尿病人还不知道,苦荞茶的降血糖功效值得关注。今天,邀请糖尿病专家万晓刚主任从现代医学与中医角度...
GuLi商城-SpringCl... Nacos支持三种配置加载方方案 Nacos支持Namespace + group +...