前言

本文为本人实际搭建前端自动化部署过程的详细记录，分享给大家的同时也是自己对知识的巩固，本文中可能存在部分前端平常不怎么接触到的知识点，但是不用怕，只要认真看基本不会有问题。

环境依赖

• 首先需要在服务器上安装好JDK、Git、Jenkins，安装方法可参考我的上一篇文章关于Jenkins安装方法的文章；
• 然后服务器上需要安装nodeJS以及包管理工具npm或者yarn，主要用在构建打包过程;
• 最后需要nginx服务器存放我们打好的dist包，nginx服务器一般后台都已经搭建完成，只需要问后台拿到存放dist包的路径即可。

jenkins配置

一、插件安装

• 登录到jenkins服务上，首先在Manage Jenkins中找到Manage Plugins，在插件管理中可选插件中搜索NodeJS插件，找到后安装即可；
  

• 另外需要一个Publish Over SSH插件，找了好久发现该插件已经被弃用了，但是可通过Publish Over SSH链接直接下载.hpi文件，然后在插件管理->高级->上传插件处直接上传安装即可；

二、配置nodejs和SSH服务

• 在Manage Jenkins -> Global Tool Configuration中找到NodeJS，点击新增，选择你项目中使用的NodeJS版本即可；
  

• 在Manage Jenkins -> Configure System中找到Publish over SSH点击新增，将jenkins部署的服务器和项目所要发布到的服务器添加进去即可；
  

三、创建项目配置项目依赖和脚本编辑

1. 先新建一个item，输入任务名称，构建自由风格的项目
   

2. 进入任务中做相关配置，首先配置General，保持构建天数和最大个数可根据自己需要填写；
   

3. 配置“源码管理”，根据提示填写即可；
   

4. 配置“构建环境”，内容根据我写的注释按照自身项目名称进行修改即可，我这里使用的是npm做的打包，如果用yarn的话就把npm install和npm run build改成yarn install和yarn build，同时yarn打包后会默认添加一层target文件，因此最后打包成压缩包时的路径改为tar -zcvf ./target/test-vemp-admin-vue.tar.gz ./dist，就是加一层/target即可；
   

5. 配置“构建后操作”，此处对yarn打包时内容需要修改的地方做出了标识，其他内容根据标题提示填入即可；
   
   若不知道存放dist文件的文件夹路径可登录到nginx服务器，找到nginx路径下conf文件中的nginx.conf文件，打开该文件可查看路径
   

6. 至此配置已经完成，在项目页面点击“Build Now”，等待构建完成即可；

7. 若构建失败，先在构建历史中查看构建记录中控制台输出内容，根据提示调整即可；若没有明显提升可根据下列逻辑进行排查：
   ①先查看构建是否成功，查看/root/.jenkins/workspace/test-dmp-vue文件中是否有生成dist文件和test-vemp-admin-vue.tar.gz包，如果有说明前面构建成功
   ②问题可能是未将包发送到服务器指定位置，在查看服务器上/data/works/vemp-admin-vue目录下是否有dist和test-vemp-admin-vue.tar.gz包如果没有再排查本文第二步中对SSH服务的配置是否完成，都通过后即可成功部署并访问

结束语
以上是我在实现前端项目自动化部署的全部过程，学习过程总是需要自己动手去操作才能知道有没有真的掌握，期间其实遇到很多问题，通过一步步排查、查阅资料并向后端同学请教，最终完成搭建，自动化部署的方案有很多种，有更好的方案欢迎留言分享。