前言
通过 Jenkins 去部署可以简化部署流程提升生产力，解耦了前端与服务器的关系，何乐而不为呢？
准备
- Mac 电脑
- 已经安装好的 Jenkins
- gitlab/github 账户
- other
思路
通过PR产生触发器去触发Jenkins的执行，Jenkins去服务器上执行一系列的操作，这个操作例如：
git fetch
git pull
npm install
npm run build
...
但实际上我发现，这个其实在服务器上跑一个shell脚本就行了，就如上所示，便可以完成部署，根本和Jenkins 产生不了关系。
分隔符 经历了许久时间，阅读了其他人的博客给了我新的思路，于是产生以下流程图。
我们通过PR去触发Jenkins钩子，在Jenkins里关联了github项目与与分支，在构建选项中执行了脚本实现项目编译打包生成我们需要的静态资源文件（ps：其实我的迷惑点是在这里，Jenkins的项目构建是在自己内部完成了项目的打包而非在其他环境下）。在第二个构建步骤，我们选择了发送文件到服务器。具体配置将在下面述说。
配置及实现
1. 在插件安装中需要安装
publish over ssh
重新启动
2. 在管理配置中我们找系统配置，如下图所示
Manage Jenkins => System Configure => Publish over SSH
- Name 可以自定义名称
- hostname 写入服务器名称
- Username 是你的用户名
- Remote Directory 是你要写入的路径，这个会牵扯到后续要部署的位置
- 可以选择使用密码或key，我选择的是密码
3. 新增一个item 选择第一个自定义工作流，我们可以看到一个 tab栏。如下图
3.1 general
在 general 里，我们可以写一些项目描述，可以不写
3.2 源码管理
这里我们需要选择 git 写入你的项目路径，和凭证（就是你拉下git项目的账户）如果没有需要添加，后面需要指定分支，我选择的是master（这里选择master，在构建时便会拉取master分支的代码），具体如下图。
3.3跳过构建触发器找到构建环境
如下图所示，这里的node也是要安装的，和上述的插件安装类似，provide Node也是一个插件，应用于构建环境，这里我们要把它勾选上（如果没有改复选项，需要进行插件安装）。其他选项皆为默认即可。
3.4构建
构建是整个项目的核心部分。
3.4.1 可以选择构建操作有很多，我们选择了shell脚本去构建。
Execute Shell
代码如下：
#!/bin/bash
yarn install && yarn d
cd distDev
tar -acvf dist.tar.gz * #压缩成文件方便上传
3.4.2执行完这一步，我们接着选择构建命令
send files or execute commands over ssh
在SSH server 中我们写入了一下信息
- Name 这个是在我们上面讲到的系统配置里写入的服务器地址和信息，这里作为选择操作。
- transfer里是我们要传输的配置
- source files 是要传输的文件 - 我们选择的是上个命令生成的压缩文件
- Remove prefix 移除路径中的前缀
- Remote Directory 要部署的服务器目录
- Exec command 执行的命令 - 我做的是删除当前目录 把新的文件解压进去
- 完成
3.5构建后操作没有用到 不表
最后
文中提到的PR去触发钩子，是我一直想实现的但是还没有实现，今天测试下，还是无法做到 Jenkins 测试 git 连接，所以暂时不表。 以上便是一位前端同学对所做的Jenkins对前端项目的部署，简化了之前对项目的打包编译 ftp上传等步骤，实现了半自动化（需要人工点击触发）。
总结
Jenkins 是一个强大的工具，值得去学习。用来测试和运维，帮助提升生产效率。谢谢！
