0
点赞
收藏
分享

微信扫一扫

Docker+Jenkins+Gitee+Node+Vue构建dist包并通过publish over ssh传输到服务器替换重启docker-compoet编排的nginx服务


场景

docker-compose入门以及部署SpringBoot+Vue+Redis+Mysql(前后端分离项目)以若依前后端分离版为例:

​​docker-compose入门以及部署SpringBoot+Vue+Redis+Mysql(前后端分离项目)以若依前后端分离版为例_霸道流氓气质的博客-博客​​

Docker+Jenkins+Gitee+Maven构建后台jar包后配置SSH传送到服务器并执行指定命令:

​​Docker+Jenkins+Gitee+Maven构建后台jar包后配置SSH传送到服务器并执行指定命令_霸道流氓气质的博客-博客​​

Docker+Jenkins+Gitee+Maven构建后台jar包后通过命令备份、替换、重启docker-compose编排的java服务:

​​Docker+Jenkins+Gitee+Maven构建后台jar包后通过命令备份、替换、重启docker-compose编排的java服务_霸道流氓气质的博客-博客​​

上面讲的后台jar包的构建与持续集成过程,如果是前端Vue项目实现流程如下。

注:

博客:
​霸道流氓气质的博客_博客-C#,架构之路,SpringBoot领域博主​​

实现

1、Vue项目需要使用node进行打包和依赖管理等

所以需要先安装node插件。

Dashboard-插件管理-可选插件-NodeJS

 

Docker+Jenkins+Gitee+Node+Vue构建dist包并通过publish over ssh传输到服务器替换重启docker-compoet编排的nginx服务_docker

2、NodeJS配置

上面安装插件之后,才会在DashBoard-全局工具配置中显示NodeJS配置,点击NodeJS安装-新建NodeJS

Docker+Jenkins+Gitee+Node+Vue构建dist包并通过publish over ssh传输到服务器替换重启docker-compoet编排的nginx服务_jar包_02

 

选择项目对应的node的版本,这里一开始选择了15的版本

Docker+Jenkins+Gitee+Node+Vue构建dist包并通过publish over ssh传输到服务器替换重启docker-compoet编排的nginx服务_nginx_03

 

结果在构建时提示:

Could not resolve dependency:

peer webpack@"1.0.0||2.0.0||3.0.0||4.0.0" from ​​script-ext-html-webpack-plugin@2.1.5​​

node_modules/script-ext-html-plugin

Docker+Jenkins+Gitee+Node+Vue构建dist包并通过publish over ssh传输到服务器替换重启docker-compoet编排的nginx服务_jenkins_04

 

这是因为jenkins中安装的nodejs版本过高,降低版本即可。

所以把node的版本降低为14.0

3、新建任务时不再构建Maven项目,而是新建自由风格的软件项目

Docker+Jenkins+Gitee+Node+Vue构建dist包并通过publish over ssh传输到服务器替换重启docker-compoet编排的nginx服务_jar包_05

 

然后配置源码管理与前面博客流程一致,不再赘述。

4、构建环境

只有上面安装了node插件并安装node才会在构建环境中有

Provide Node & npm bin/folder to Path这个选项,勾选这个选项

Docker+Jenkins+Gitee+Node+Vue构建dist包并通过publish over ssh传输到服务器替换重启docker-compoet编排的nginx服务_nginx_06

 

勾选这个选项,node选择上面安装的node。

构建步骤选择为执行shell

Docker+Jenkins+Gitee+Node+Vue构建dist包并通过publish over ssh传输到服务器替换重启docker-compoet编排的nginx服务_jenkins_07

 

配置执行shell的命令为

cd  ${WORKSPACE}/Font
rm -rf ${WORKSPACE}/Font/dist
npm install
npm run build:prod

这里是因为前端代码不在代码仓库根目录下,所以需要先cd到Font目录下,然后执行npm的安装依赖和打包命令。

Docker+Jenkins+Gitee+Node+Vue构建dist包并通过publish over ssh传输到服务器替换重启docker-compoet编排的nginx服务_gitee_08

 

配置构建过程之后,可以先构建一次,完成在对应目录下看dist包是否打包成功

Docker+Jenkins+Gitee+Node+Vue构建dist包并通过publish over ssh传输到服务器替换重启docker-compoet编排的nginx服务_nginx_09

 

5、添加构建后步骤

这里将前端打包之后需要将其传输到服务器上,所以构建后操作选择Send build artifacts over SSH

Docker+Jenkins+Gitee+Node+Vue构建dist包并通过publish over ssh传输到服务器替换重启docker-compoet编排的nginx服务_jar包_10

 

这个插件的安装和使用参照前面jar包过程的博客。

不过这里不同的是

Jenkins publish over ssh传输文件夹而不是单个文件,当然也可以将dist添加为tar包,在构建的命令中添加即可。

这里记录如果将整个dist包通过publish over ssh传输。

SSH Server的配置参考上面博客。

这里配置

Source files:Font/dist/**

Remove prefix:Font

Remote directory:/

这里因为前端在代码仓库根目录Font下,dist后面要跟两个*,不然子目录不会传输。

Docker+Jenkins+Gitee+Node+Vue构建dist包并通过publish over ssh传输到服务器替换重启docker-compoet编排的nginx服务_nginx_11

 

传输之后可以到服务器上对应目录上查看是否成功

Docker+Jenkins+Gitee+Node+Vue构建dist包并通过publish over ssh传输到服务器替换重启docker-compoet编排的nginx服务_gitee_12

 

dist传输之后,配置Exec command执行的命令。

这里的nginx代理前端dist是使用的docker-compose进行编排的,所以需要执行的命令如下

sudo tar -cvf /home/fzysShow/nginx/font/bak/dist-$(date '+%Y%m%d%H%M%S').tar /home/fzysShow/nginx/font/dist

sudo rm -rf /home/fzysShow/nginx/font/dist

sudo mv /home/iunisjzx/dist /home/fzysShow/nginx/font/dist

cd /home/fzysShow

sudo docker-compose restart nginx

首先将原来nginx代理的dist包进行添加时间戳压缩并备份

然后将原dist包删除

然后将构建好并通过ssh传输过来的dist包移动到nginx服务对应的目录下,这里的目录为/home/iunisjzx是因为SSH Server配置的根目录就是这个目录。

最后重启nginx服务。

查看日志构建并传输成功

Docker+Jenkins+Gitee+Node+Vue构建dist包并通过publish over ssh传输到服务器替换重启docker-compoet编排的nginx服务_gitee_13

 

可以修改某处前端代码并提交代码然后构建之后查看是否成功改变来验证。

举报

相关推荐

0 条评论