通过Jenkins实现前端项目的打包部署

最新推荐文章于 2025-04-09 14:15:04 发布

姠惢荇者

最新推荐文章于 2025-04-09 14:15:04 发布

阅读量4.5k

点赞数 2

分类专栏： DevOps 文章标签： Publish over SSH vue自动化部署 jenkins nodejs

本文链接：https://blog.youkuaiyun.com/hou_ge/article/details/103507947

版权

DevOps 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍如何在Jenkins环境中配置自动化部署流程，包括Git插件的使用、PublishOverSSH插件的配置，以及NodeJS环境的设置。通过具体实例，演示了从代码拉取、项目构建到远程服务器发布的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、环境

jenkins环境
Git 插件，用于拉取代码库中的代码
Publish Over SSH插件，用于SSH连接远程的服务器
NodeJS环境
测试使用的前端demo，地址：https://gitee.com/hsh2015/vue-test.git

二、系统配置

1. NodeJS全局配置
在【Manage Jenkins】- 【Global Tool Configuration】中配置NodeJS。配置NodeJS时，选择自己本地安装的NodeJS，填写名称，并配置NodeJS安装路径。界面如下：

在这里插入图片描述
2. 在Configure System中配置Publish over SSH
在【Configure System】-【Publish over SSH】中，配置通过用户名密码连接远程服务器，配置内容如下：

验证SSH配置是否成功，如下图所示：

三、创建自动部署流水线

创建自动部署流程，和上一篇的方式类似，只有项目构建和项目发布解决的方式有些区别。

创建项目
点击【首页】- 【New Item】，进入创建项目页面，填写名称，选择“Freestyle project”，然后点击“OK”操作，进入下一步操作。
项目General配置
Source Code Management
这一步需要先安装Git插件，否则不会出现Git选项，安装插件的步骤这里不再重复。这里选择Git，然后配置Git代码库路径，然后新增Credentials，没有创建的话，可以通过“Add”添加即可。
Build环境配置
选择“Provide Node & npm bin/ folder to PATH”即可，其他使用默认配置即可。
Build配置
配置通过nodejs构建项目，并打包便于远程传输。

cd /root/.jenkins/workspace/testAdmin #进入test项目目录
cnpm install --unsafe-perm
npm run build
cd dist
rm -rf testAdmin.tar.gz #删除上次打包生成的压缩文件
tar -zcvf testAdmin.tar.gz * #把生成的项目打包成test方便传输到远程服务器

Post-build Actions
把上一步打包的文件，通过SSH传输到服务器的指定位置，然后通过tar命令在解压到相应的位置。
需要注意的地方：通过SSH远程传输，文件的存放的位置是：在Configure System中配置Publish over SSH中配置的Remote directory的路径+Send build artifacts over SSH中配置的Remote directory路径。然后把该压缩文件解压到nginx或tomcat对应的文件目录下即可。
配置好流水线后，启动构建过程
在【My Views】中选择上述配置的项目，然后点击【Build Now】启动构建过程，如下图所示：

然后在通过【Console Output】进入构建过程日志输出界面，