一、概述
在实际生产过程中，项目产品多版本前端打包容易出错，维护成本高。可以利用Jenkins来实现自动化部署。jenkins操作步骤可以直接跳至步骤三。 参考文档
二、实践阶段
1.Jenkins安装
Linux环境
# 下载 Jenkins 资源
sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat/jenkins.repo
# 获取并导入信任 的包制作者的秘钥
sudo rpm --import https://pkg.jenkins.io/redhat/jenkins.io.key
# 升级 yum 源中的所有包
sudo yum upgrade
# Jenkins 依赖于 java 所以需要安装 JDK
sudo yum install java-11-openjdk
# 安装 Jenkins
sudo yum install jenkins
检查JenKins状态
# 启动 Jenkins 服务
systemctl start jenkins
# 重启 Jenkins 服务
systemctl restart jenkins
# 停止 Jenkins 服务
systemctl stop jenkins
# 查看 Jenkins 服务状态
systemctl status jenkins
2.Jenkins 使用及 Freestyle 任务构建
2.1 jenkins安装
首次进入使用 cat /var/lib/jenkins/secrets/initialAdminPassword 查看密码。 随后进入插件安装页面，暂时安装系统推荐插件即可。
然后创建用户
2.2构建目标：拉取 github 代码
点击 新建 Item 创建一个 Freestyle Project
在 源码管理 处选择 git ，输入仓库地址，点击添加。
输入gitlab地址，点击添加，填写gitlab账号密码作为登录凭证。 配置只是一方面，同时服务器也要具备 git 环境。 yum install git
选择修改指定分支
2.3构建目标：部署到本机
部署前端项目肯定是离不开 nginx 的。 yum install nginx。
安装完成后同样可以使用 systemctl 命令管理 nginx 服务。
nginx 具体配置这里就不说了。本示例项目中，静态文件托管目录为 /usr/share/nginx/html/dist。
接着来到 Jenkins 这里。想要部署前端项目还需要依赖一个 Node 环境，需要在 Manage Jenkins -> Manage Plugins 在可选插件中搜索 nodejs 选择对应插件进行安装，安装完成后需要重启才会生效。
然后到 系统管理 -> 全局工具配置 中配置 Node
随后去修改刚才创建的任务。在 构建环境 中会多出一个选项 Provide Node & npm bin/ folder to PATH 勾选即可。然后在 构建 中选择 增加构建步骤 -> 执行 shell 输入打包发布相关的命令。Jenkins 会逐行执行。
定时构建，下面这个代码表示每 2分钟和git仓库代码比对一次，如果有新的提交，则构建一次。
构建
脚本命令如下：
npm install yarn -g
yarn install
npm run build:stage
# 打包 build 后的文件
tar -zcvf dist.tar.gz dist/
# 删除 build 后的文件
rm -rf dist/
2.4部署到目标主机
1. 系统管理 -> 插件管理 搜索 Publish Over SSH 进行安装。
2. 然后在系统管理 -> 系统配置中找到 Publish over SSH 点击新增，再点击高级，然后选中 Use password authentication, or use a different key
完成后可点击右下角 Test Confirguration 进行测试。
3. 继续修改构建任务。先修改原有的构建脚本。因为要发布到远程，所以原有的发布命令要进行去除。
脚本命令：
cd /www/wwwroot/daaWeb/
tar -zxvf dist.tar.gz
rm -rf dist.tar.gz
其他说明
Rransfer Set Source files： 要上传到目标服务器的文件。它是一个相对路径，相对于 Jenkins 的工作目录 由于上面的 shell 执行之后在工作目录中只有一个压缩包，so 直接写一个文件名即可。
Remove prefix： 去前缀。假设此时打包文件在 /var/lib/jenkins/workspace/web-deploy/assets/dist.tar.gz，那么 Rransfer Set Source files 则应该为 assets/dist.tar.gz，此时 Remove prefix 配置为 assets/ 则可以去除这个前缀，否则会在目标服务中创建 assets 。
Remote directory： 远程的静态资源托管目录。由于配置服务器默认为 /，所以 usr/share/nginx/html/ 不用以 / 开头。
Exec command： 远程机执行 shell，由于配置服务器默认为 /， 所以 工作目录也是以 / 开始。
看到finished: SUCCESS 即为成功
三、操作步骤
3.1 新建任务
3.2 配置任务
配置源码位置
构建环境
3.3 构建
npm install yarn -g
yarn install
npm run build:stage
# 打包 build 后的文件
tar -zcvf dist.tar.gz dist/
# 删除 build 后的文件
rm -rf dist/
