Jenkins配置前端主动打包部署（若依项目）
https://img-blog.csdnimg.cn/direct/a892badecd77492ea49cfc6de52d5856.pnghttps://img-blog.csdnimg.cn/direct/18132303d0a74b71933295eb7dd87bd2.png条件分析：三台服务器： gitlab 一台 jenkins一台 项目服务器
一、新建项目
创建一个 Freestyle Project
https://img-blog.csdnimg.cn/direct/c50bcc1f696a424f95ea53a026b96c7d.png
二、拉取 github 代码
点击 新建 Item 创建一个 Freestyle Projecthttps://img-blog.csdnimg.cn/direct/676847f7dbbe44709e263d3add003b3d.png
在配置页面-->General,勾选[丢弃旧的构建]，填写保存的构建天数和构建的最大个数
https://img-blog.csdnimg.cn/direct/8b59cf3f50f54750bbfed7a5e38032e4.png
https://img-blog.csdnimg.cn/direct/805c536386d6426fb3ac5bf2899a8838.png
在 源码管理 处选择 git ，输入仓库地址，点击添加。https://img-blog.csdnimg.cn/direct/743c8761fcde4f08be3cc1a9439fabf7.png
三、build 打包
https://img-blog.csdnimg.cn/direct/0fc841858e3f407a855985b9b8b7247f.pngExecute shell里写脚本,对前端代码举行打包压缩详细代码如下:
# 安装npm依赖并构建项目
npm --registry https://registry.npmmirror.com install
# 构建测试环境
npm run build:stage 脚本解释与写法总结：
1.我看许多博客 这里写许多，对于初学者 ，可能摸不到头脑，我该怎么写，才气主动构建到测试环境。
2.buid steps：构建步骤，也就是构建环境配置、打包举行处理。
首先前端打包标题。
Q：jenkins 从gitlab服务拉取的代码在那里打包呐？
A:拉取的代码在这目次下 /var/lib/jenkins/workspace/https://img-blog.csdnimg.cn/direct/970d6750c01a4b6ca29dce49a5c00482.png
在jenkins控制台查看https://img-blog.csdnimg.cn/direct/0dc74cd2a9ed43ddbc4d5871c5f2fe6c.png
，代码有了，jenkins打包，但你得安装nodejs吧 安装npm 安装依靠吧，好比你的写下面这写
安装依赖
npm install
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com
然后打包，构建测试环境。使用下面命令 # 构建测试环境
npm run build:stage 前端打包完，会生成一个dist文件夹https://img-blog.csdnimg.cn/direct/a3e7d48989844ed69cdce14efd969803.png
好了。这就打包好了。也相当于buid 好了。
接下来，我的把这个dist文件夹发送到另一台测试环境服务器。
四、部署到测试服务器
在真实的开发场景中，Jenkins 几乎不会和前端资源放到一个服务器。大多数环境下 Jenkins 所处的服务器环境就是一个工具用的服务器，放置了一些公司中常用的工具。因此构建到指定的服务器也至关紧张。
1、安装发送到长途插件
系统管理 -> 插件管理 搜索 Publish Over SSH 举行安装。https://img-blog.csdnimg.cn/direct/00c48191fe12497e9714a2614a800283.png
Send build artifacts over SSHhttps://img-blog.csdnimg.cn/direct/2776d220a2d94a6088ba65cd94862549.png
选项解释：
[*]Source files：要上传到目的服务器的文件。它是一个相对路径，相对于 Jenkins 的工作目次 由于上面的 build 打包后 ，在工作目次中生成一个dist文件夹，所以这里写相对路径 **/dist/** 写法分析/dist/*一个*代表 匹配dist文件夹所以文件，但是dist文件夹下面的static文件夹不会部署到测试服务器（不这样写）/dist/**2个* 能把dist文件夹下的所有文件夹和文件都能部署到测试服务器（我这样写的）
[*]Remove prefix：移除的路径，这里移除 dist 路径 好比：这里写 dist/ 表现：我只部署dist文件夹中static 部分内容，我肯定要把dist文件夹去掉，只在测试服务器显示static文件，这就用到这个选项了。
[*]Remote directory：发送到的服务端路径（这里填目的服务器发送文件夹的目的路径） 1.这里不填：
表现你在系统设置中，也有这个插件，已经设置过了。
例如：我在系统设置中设置了 /opt/ruoyi 这里就不要设置了。
你如果在设置目的路径，会重复，也就是把dist发送到 /opt/ruoyi/opt/ruoyi/dist 子文件家中了，纯属套娃了。
[*]Exec command：发送成功后执行的命令（选填）
https://img-blog.csdnimg.cn/direct/fef8bebfacfd4c429f6b9894c5c0017d.png
部署方式：（我就测试2种写法）
1.把整个前端dist文件夹都部署上传到测试服务器 。我这样写 ：就把整个dist源文件夹发送到测试服务器就行，其他不写。https://img-blog.csdnimg.cn/direct/2776d220a2d94a6088ba65cd94862549.png
2.把部分前端dist文件夹中static文件和其他文件部署上传到测试服务器 。（比较实用）
https://img-blog.csdnimg.cn/direct/27a72d9ce75a4da4aae1a50814059017.png
如图：https://img-blog.csdnimg.cn/direct/c8c04873fd4a4fceafaf41088ca23d71.png
分析：
Source files写法规则介绍：Ant User Manual Directory-based Tasks
为了使事情更加机动，我们添加了一个额外的功能，这使得匹配多个目次级别成为可能。这可用于匹配完备的目次树，或目次树中任何位置的文件。
为此，** 必须将用作目次的名称。
当**在模式中将用作目次的名称时，它将匹配零个或多个目次。
例如： /test/**匹配 下的所有文件/目次/test/，例如/test/x.java、 或/test/foo/bar/xyz.html，但不匹配/xyz.xml。
有一种“简写”——如果模式以/ 或结尾\，则** 附加 。
例如，mypackage/test/被解释为 mypackage/test/**
https://img-blog.csdnimg.cn/direct/d00c9b4d10e144a48dfce02431f8a60b.png
五、控制台看构建是否成功
https://img-blog.csdnimg.cn/direct/72a45c6cc31c408fabea77711f62feda.png
https://img-blog.csdnimg.cn/direct/296ae4b087104ba18fde6f45ae2f3712.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]