在前后端分离的情况下，前端的静态代码需要独立部署到服务器上面，这时候就需要自动化来提高开发效率了
1.搭建模拟环境
1）安装VMware虚拟机(点击查看教程)
百度网盘：链接：https://pan.baidu.com/s/1IF6GdhQnmDc8wR3NjSf0iQ 提取码：1juk
2）unbuntu系统(点击查看教程)
下载地址：http://releases.ubuntu.com/20.04.2.0/ubuntu-20.04.2.0-desktop-amd64.iso
bt种子：http://releases.ubuntu.com/20.04.2.0/ubuntu-20.04.2.0-desktop-amd64.iso.torrent
3）Jenkins软件的安装(点击查看教程)
Java skd下载:https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html
JenKins下载：https://pkg.jenkins.io/debian-stable/
4）安装node
链接：https://nodejs.org/en/
2.配置一个工程
1）新建一个任务
1: 新建一个item，并且命名为my-test
2：选择第一个选项，freeStyle project
3: 点击确定
2）添加构建参数
1: 进入到该工程的配置里面
2：填写一些描述，来说明改工程的用处：前端自动化部署案例
3：点击 this project is parameterized(参数化构建过程)
在里面定义一些参数，在执行shell脚本的时候，可以拿到这些参数来做一些额外处理
3) 获取git分支
1: 点击 `添加参数`
2: 选择 `Git Parameter`
3: 填写配置，表示jenkins来拉取代码的时候，拉取指定分支的代码，可以通过$branch来访问变量
变量名：branch，
描述：分支(默认：origin/dev)
参数类型：分支
默认值：origin/dev
4) 添加下拉选择框参数
1: 点击 `添加参数`
2: 选择 `Choice Parameter`
3: 填写配置，表示下拉选择框，jenkins可以拿到选择框里面的值,通过$buildScript来访问变量
变量名：buildScript
选项： npm run build:test
npm run build:dev
npm run build:prod
描述：打包命令(默认：npm run build:test)
5）添加单选框参数
1: 点击 `添加参数`
2: 选择 `Boolean Parameter`
3: 填写配置，表示单选框，jenkins可以拿到选择框里面的布尔值，通过$installDependencies来访问变量
变量名：installDependencies
描述：是否需要重新安装依赖
6）添加源码管理地址
1: 在源码管理选择Git
2: 选择项目代码存放的git地址，输入用户名和密码校验
3：branches to build选项填写$branch, 这个是上面填写好的值
7）安插获取git提交记录插件（选做，嫌麻烦的话）
1: 选择`Add Changelog Information to Environment`
2: 填写配置：
Entry Format： %3$s(at %4$s via %1$s)\n
Date Format：yyyy-MM-dd HH:mm:ss
备注：
一：该选项是jenkins插件，需要自行找插件安装，表示在构建自动化打包的时候，显示提交记录(commit log)
二：插件下载地址：https://github.com/KrisMarko/kr-changelog
三：在Jenkins中安装changelog-environment.hpi插件，插件管理——上传插件安装
8) 编写shell脚本
1: 点击`增加构建步骤`
2：选择`Execute shell`
3: 配置执行的shell脚本
备注：这时候配置就已经完成了。在拉取git代码完成后，就会执行shell脚本里面的内容
9）开始构建
1: 返回到工程项目里面，点击`Build with Parameters`
2: 就可以看到参数的配置
1： 拉取的分支（origin/dev）
2：执行的构建脚本(npm run build:test)
3: 是否重新安装依赖（false）
3: 点击开始构建
主要是写shell脚本执行的内容，需要根据自身的业务场景，把打包好的静态资源复制到指定服务器里面
总结
前端自动化部署其实挺简单的，就是人工手动操作的步骤（拉去代码，打包代码，静态资源上传到服务器里面），全部交给jenkins来做，我们只需点击一下按钮，就帮我们完成了所有操作
进阶：
前端自动化部署Jenkins配置-Pipeline配置(juejin.cn/post/728744…)
