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

阳光穿透心脏的1/2处 2023-09-30 18:13 12阅读 0赞

## 场景 ##

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

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

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

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

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

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

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

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][CSDN_-C_SpringBoot]

## 实现 ##

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

所以需要先安装node插件。

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

![175a8854d4914d76b4649bf16ec1c436.jpeg][]

2、NodeJS配置

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

![4523d754d8734590960444e858709c7d.jpeg][]

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

![3f99f555aa0847bf9dcffe91a2f728bd.jpeg][]

结果在构建时提示:

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][script-ext-html-webpack-plugin_2.1.5]

node\_modules/script-ext-html-plugin

![42a5ce0dd98244528d4305734e07440c.jpeg][]

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

所以把node的版本降低为14.0

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

![984d734d1f964532bdea5aeaad769dae.jpeg][]

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

4、构建环境

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

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

![a28652edb862493dbbecbd22744b00e4.jpeg][]

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

构建步骤选择为执行shell

![c26bad6a68f54c4bb8bf337e71bf4dd1.jpeg][]

配置执行shell的命令为

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

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

![be7f32748fa1438eb140f5ac8fa53a15.jpeg][]

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

![8d004f4d9d644920acbc829e6d57527c.jpeg][]

5、添加构建后步骤

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

![b27cdd6b15f24829b10b7b764ccf454d.jpeg][]

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

不过这里不同的是

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

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

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

这里配置

Source files：Font/dist/\*\*

Remove prefix：Font

Remote directory：/

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

![2d974ebbf2e641dbb8208dd7ae18ac1f.jpeg][]

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

![94a06357102940818f5977292119ddb5.jpeg][]

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服务。

查看日志构建并传输成功

![c03580ab657f4abb80673b6e63382ac4.jpeg][]

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

[docker-compose_SpringBoot_Vue_Redis_Mysql_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/128372122
[Docker_Jenkins_Gitee_Maven_jar_SSH_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/128415872
[Docker_Jenkins_Gitee_Maven_jar_docker-compose_java_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/128419177
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[175a8854d4914d76b4649bf16ec1c436.jpeg]: https://img-blog.csdnimg.cn/175a8854d4914d76b4649bf16ec1c436.jpeg
[4523d754d8734590960444e858709c7d.jpeg]: https://img-blog.csdnimg.cn/4523d754d8734590960444e858709c7d.jpeg
[3f99f555aa0847bf9dcffe91a2f728bd.jpeg]: https://img-blog.csdnimg.cn/3f99f555aa0847bf9dcffe91a2f728bd.jpeg
[script-ext-html-webpack-plugin_2.1.5]: mailto:script-ext-html-webpack-plugin@2.1.5
[42a5ce0dd98244528d4305734e07440c.jpeg]: https://img-blog.csdnimg.cn/42a5ce0dd98244528d4305734e07440c.jpeg
[984d734d1f964532bdea5aeaad769dae.jpeg]: https://img-blog.csdnimg.cn/984d734d1f964532bdea5aeaad769dae.jpeg
[a28652edb862493dbbecbd22744b00e4.jpeg]: https://img-blog.csdnimg.cn/a28652edb862493dbbecbd22744b00e4.jpeg
[c26bad6a68f54c4bb8bf337e71bf4dd1.jpeg]: https://img-blog.csdnimg.cn/c26bad6a68f54c4bb8bf337e71bf4dd1.jpeg
[be7f32748fa1438eb140f5ac8fa53a15.jpeg]: https://img-blog.csdnimg.cn/be7f32748fa1438eb140f5ac8fa53a15.jpeg
[8d004f4d9d644920acbc829e6d57527c.jpeg]: https://img-blog.csdnimg.cn/8d004f4d9d644920acbc829e6d57527c.jpeg
[b27cdd6b15f24829b10b7b764ccf454d.jpeg]: https://img-blog.csdnimg.cn/b27cdd6b15f24829b10b7b764ccf454d.jpeg
[2d974ebbf2e641dbb8208dd7ae18ac1f.jpeg]: https://img-blog.csdnimg.cn/2d974ebbf2e641dbb8208dd7ae18ac1f.jpeg
[94a06357102940818f5977292119ddb5.jpeg]: https://img-blog.csdnimg.cn/94a06357102940818f5977292119ddb5.jpeg
[c03580ab657f4abb80673b6e63382ac4.jpeg]: https://img-blog.csdnimg.cn/c03580ab657f4abb80673b6e63382ac4.jpeg