首先我们起一个前端的架子，react/vue/ng 等等都可以
前端相对来说很简单，我们可以简单捋一下思路
- 首先，把前端项目推到github上
- jenkins新建任务
- github连接jenkins
- jenkins通过SSH Agent连接远程服务器
- 新建构建步骤，通过shell执行命令，完成项目的build
- 通过ftp把build后的文件传输到远程服务器上
- 传输完成后重启nginx
怎么样，是不是感觉很简单，步骤少了很多，也不用太多麻烦的配置，因为我们最终的目的就是把build完后的静态资源传输到服务器上即可。
接下来我们开始按照思路来完成CI/CD
首先把项目推到github上，这里就不演示了
推完后我们在jenkins上新建任务
这里同后端一样，我们通过ssh秘钥来建立jenkins和github的链接。api token 我们直接使用做后端cicd时创建的那个即可。
如何通过ssh秘钥来建立jenkins和github连接，如何创建api token
接着我们继续通过SSH Agent连接我们配置好的远程服务器
与后端不同的是，构建环境这里我们需要勾选上Provide Node & npm bin/ folder to PATH 选择node版本号
构建这里我们先添加一个构建步骤，选择执行shell
npm config set registry http://registry.npm.taobao.org # 配置淘宝镜像源
npm install # 装包
npm run build # 打包项目
接着我们添加一个Send files over FTP的构建步骤
这里需要注意的是，我们只需要把打包好的文件夹下的所有文件传输到服务器即可，所以我们在source files 下填写dist/**/* 这是指我们只需要传输dist文件夹下的所有文件
并且，我们是不需要把dist这个文件夹也传输到远程服务器的，我们只需要传输dist文件夹下的所有文件，所以我们在Remove prefix下填写dist，这里指忽略dist这个文件夹
把他们移动到/root/usr/local/etc/client/ 目录下 这里为什么是/root/usr/local/etc/下的client
最后添加远程执行命令
在我们打包完后并且传输完成后，重启nginx
至此我们前后端的CI/CD就都做好啦！
