前言

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

环境依赖

首先需要在服务器上安装好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服务的配置是否完成，都通过后即可成功部署并访问

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

jenkins实现前端自动化打包并部署到nginx服务器相关推荐

python 自动化框架打包_听说很多人都不会打包，教你Python实现前端自动化打包部署！...
作为一名专职前端开发的我,为了帮助解决目前工作中的一些繁琐的工作(主要是处理 excel数据),解放程序员双手,前阵子就刚刚入了 python 的坑,毕竟也算是门工具语言,都已经加入少儿编程了,哈哈哈 ...
vuecli打包后的dist目录无法访问_听说很多人都不会打包，教你Python实现前端自动化打包部署！...
作为一名专职前端开发的我,为了帮助解决目前工作中的一些繁琐的工作(主要是处理 excel数据),解放程序员双手,前阵子就刚刚入了 python 的坑,毕竟也算是门工具语言,都已经加入少儿编程了,哈哈哈 ...
前端自动化打包工具--webpack
前端自动化打包工具–webpack 背景记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的 ...
spring项目搭建云服务器,Spring Boot项目打包并部署到云服务器
Spring Boot项目打包并部署到云服务器一.云服务器的环境 OS: CentOS 7 Jdk 1.8 Spring Boot自动集成Tomcat,不需要单独配置二.本地Spring Boot ...
linux 退出服务器_Vue实战091：Vue项目部署到nginx服务器
项目开发完成之后我们就需要将项目上线运行供用户访问,这时候我们就需要将项目部署到服务器上.对于Vue这种前端Web项目我们一般都部署在linux系统上,Linux常见的Web应用服务器有Apache. ...
介绍一个开源博客项目并部署到Nginx服务器
0 前言对于很多喜欢写博客的IT程序员朋友可能都会有一个搭建自己的博客网站的梦想,今天我要介绍的这个开源项目恰好能帮你实现这个愿望.这个开源项目由国内IT大牛"江南一点雨"贡献, ...
gitlab ci 自动化部署_前端gitLab加jenkins自动化构建和部署，以及服务器常用的linux命令行操作，免密登录...
常用的linux命令行操作将项目部署到服务器后,需要查看文件是否已经部署成功,已经对文件进行增删改查操作,就需要用到命令行操作,常用操作如下: ll 罗列出当前文件或目录的详细信息,含有时间.读写权 ...
前端自动化打包部署服务器
ssh2-sftp-client前端部署工具 npm install ssh2-sftp-client 在项目目录中创建upload文件夹,action.js主要处理打包和上传打包好的文件操作.sou ...
android 自动打包脚本,Jenkins实现Android自动化打包
1.Tomcat 进入 https://tomcat.apache.org/ 官网,下载最新的 tomcat 安装包并且安装. 安装完成后,启动 tomcat 后,在浏览器中输入 http://loc ...

jenkins实现前端自动化打包并部署到nginx服务器

前言

环境依赖

jenkins配置

jenkins实现前端自动化打包并部署到nginx服务器相关推荐

最新文章

热门文章