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

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

项目步骤

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

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下静态文件时间
在这里插入图片描述
构建后文件时间
在这里插入图片描述
说明已经正常更新

相关内容

热门资讯

汉阴县召开双乳镇千亩荷塘“4A... 12月19日,汉阴县召开双乳镇千亩荷塘“4A级”旅游景区创建工作推进会。县委书记陈永乐出席会议并讲话...
一枚山果里的赣西本味 在赣西宜丰的群山褶皱里,苦槠树扎根岩隙、历经风霜,每到秋深霜降,枝头便挂满饱满的果实。山里人循着祖辈...
在延安旅游,说普通话交流方便吗... 在延安旅游,说普通话交流方便吗?本地人方言重不重?一篇给你吃下定心丸的实用攻略 来延安旅游前,很多朋...
媒体关注|经济日报:冬游广西正... 拥有323个4A级旅游景区和10个5A级旅游景区的广西,冬季平均温度在13摄氏度至16摄氏度之间。凭...
“乐动大足”促敦煌艺术与大足石... 甘肃演艺集团有限责任公司与重庆市大足区人民政府,近日签署战略合作协议,将通过跨区域资源整合与协同创新...