前言
本文为本人实际搭建前端自动化部署过程的详细记录,分享给大家的同时也是自己对知识的巩固,本文中可能存在部分前端平常不怎么接触到的知识点,但是不用怕,只要认真看基本不会有问题。
环境依赖
首先需要在服务器上安装好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部署的服务器和项目所要发布到的服务器添加进去即可;
三、创建项目配置项目依赖和脚本编辑
先新建一个item,输入任务名称,构建自由风格的项目
进入任务中做相关配置,首先配置General,保持构建天数和最大个数可根据自己需要填写;
配置“源码管理”,根据提示填写即可;
配置“构建环境”,内容根据我写的注释按照自身项目名称进行修改即可,我这里使用的是npm做的打包,如果用yarn的话就把npm install和npm run build改成yarn install和yarn build,同时yarn打包后会默认添加一层target文件,因此最后打包成压缩包时的路径改为tar -zcvf ./target/test-vemp-admin-vue.tar.gz ./dist,就是加一层/target即可;
配置“构建后操作”,此处对yarn打包时内容需要修改的地方做出了标识,其他内容根据标题提示填入即可;
若不知道存放dist文件的文件夹路径可登录到nginx服务器,找到nginx路径下conf文件中的nginx.conf文件,打开该文件可查看路径
至此配置已经完成,在项目页面点击“Build Now”,等待构建完成即可;
若构建失败,先在构建历史中查看构建记录中控制台输出内容,根据提示调整即可;若没有明显提升可根据下列逻辑进行排查:
①先查看构建是否成功,查看/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服务的配置是否完成,都通过后即可成功部署并访问
结束语
以上是我在实现前端项目自动化部署的全部过程,学习过程总是需要自己动手去操作才能知道有没有真的掌握,期间其实遇到很多问题,通过一步步排查、查阅资料并向后端同学请教,最终完成搭建,自动化部署的方案有很多种,有更好的方案欢迎留言分享。