背景:
首先,Jenkins可以很方便的在我们的项目中帮助我们去部署、打包项目,在开发过程中避免了繁琐的手动打包步骤,只要我们把项目部署到Jenkins中,然后添加上一些列的脚本,就能帮助我们很快的完成打包工作,并且它与版本管理工具Svn、Git等兼容

自动化部署原理:
简单的说就是当我们写好代码,把代码提交到github上,jenkins监测到代码变化就会自动构建项目,把代码拉取到服务器,从而实现自动部署。

一、Tomcat下载

tomcat是一个基于java的应用程序,你需要安装java环境

1、打开Tomcat官网,默认进入官网首页

注:安装Tomcat之前需安装并配置 jdk 和 jre ,请在安装并配置完毕后,再进行安装Tomcat

直接下载安装包

jenkins打包生成 docker jenkins打包web项目_vue.js


解压后运行

端口号(四位),默认为8080,如果你想设置成其他,也可以,但不推荐,因为可能会与其他端口冲突导致Tomcat无法正常启用等后果

jenkins打包生成 docker jenkins打包web项目_前端_02


打开浏览器,输入HTTP协议,加上你的Tomcat的端口号,即 http://localhost:8080/,进入Tomcat页面则表示成功,否则为失败,卸载重装,同时检查你的jdk是否安装配置,安装时jre的路径选择是否正确

jenkins打包生成 docker jenkins打包web项目_远程服务器_03


二、Jenkins安装配置

2.1.Jenkins部署

把下载好的jenkins.war放入tomcat的webapps目录下

在这里可以直接下载最新的版本

http://updates.jenkins-ci.org/download/war/

b、或是jenkins下载地址:https://jenkins.io/ 下载网站的war包版本就好了

下载完后把它部署到你的tomcat上运行:放到tomcat的webapps目录下

jenkins打包生成 docker jenkins打包web项目_jenkins打包生成 docker_04


启动tomcat(windows下双击startup.bat或者linux下运行sh startup.sh)

jenkins打包生成 docker jenkins打包web项目_tomcat_05


然后通过浏览器访问,如我的电脑上访问:

http://localhost:8080/jenkins

jenkins打包生成 docker jenkins打包web项目_远程服务器_06


然后到提示的文件中把里面的文本复制出来填到管理员密码中

C:\Users\NaCan.jenkins\secrets\initialAdminPassword

jenkins打包生成 docker jenkins打包web项目_vue.js_07


jenkins打包生成 docker jenkins打包web项目_前端_08


选择插件,不知道装什么,可以不装插件,后期还可以安装插件的,或者使用推荐,就是推荐稍微有点多

在这里插入图片描述

jenkins打包生成 docker jenkins打包web项目_tomcat_09


安装推荐的插件

jenkins打包生成 docker jenkins打包web项目_jenkins打包生成 docker_10


等安装好之后。配置用户名、密码、URL访问地址,就可以使用了

jenkins打包生成 docker jenkins打包web项目_vue.js_11


jenkins打包生成 docker jenkins打包web项目_jenkins打包生成 docker_12


jenkins打包生成 docker jenkins打包web项目_vue.js_13


jenkins打包生成 docker jenkins打包web项目_远程服务器_14


2.2、jenkins相关插件的安装*

2.2.1、安装Publish Over SSH插件用于SSH连接远程的服务器。

登录 jenkins 管理系统首页,打开“系统管理”--“管理插件”  搜索 Publish Over SSH 然后勾选安装

jenkins打包生成 docker jenkins打包web项目_远程服务器_15


2.2.2、安装 NodeJs插件 用于vue项目打包构建。

打开“系统管理”--“管理插件”  搜索 nodejs 然后勾选安装

  打开“系统管理”--“Global Tool Configuration”   拉到底部 配置  node 版本,如图:

jenkins打包生成 docker jenkins打包web项目_vue.js_16


2.2.3、配置远程服务器的连接

1、打开“系统管理”–“系统设置” 找到 “Publish over SSH” 项 ,我这里远程服务器用的是ssh登录,通过ppk密钥进行连接,所以我的配置如图,如果是帐号密码登录的Passphrase填写密码Username填写用户名,path to key 为空就可以了。

jenkins打包生成 docker jenkins打包web项目_远程服务器_17

2、点击 Test Configuration 按钮测试连接是否成功

jenkins打包生成 docker jenkins打包web项目_jenkins打包生成 docker_18

2.2.4、配置自动部署任务

1、新建任务:点击“新建”–填写任务名称,选择“构建一个自由风格的软件项目”然后保存,如图:

jenkins打包生成 docker jenkins打包web项目_远程服务器_19

2、配置git,进入任务配置,选择源码管理

jenkins打包生成 docker jenkins打包web项目_vue.js_20


填写账号密码

jenkins打包生成 docker jenkins打包web项目_前端_21

3、设置构建环境,选择 Provide Node & npm bin/ folder to PATH 然后选择之前安装插件时候配置的node版本,如图

jenkins打包生成 docker jenkins打包web项目_vue.js_22

4、配置项目自动化打包,选择 增加构建步骤 —Excute shell 运行相关的sh命令

D:
cd tomcat7.0\tomcat7.0\apache-tomcat-7.0.78\webapps\jenkinst\test #进入test项目目录
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
npm install
npm run build
cd dist
rm -rf test.tar.gz #删除上次打包生成的压缩文件
tar -zcvf test.tar.gz * #把生成的项目打包成test方便传输到远程服务器
cd ..

jenkins打包生成 docker jenkins打包web项目_jenkins打包生成 docker_23


5、把打包好的项目文件发布到远程服务器

选择“构建后操作步骤”---“Send build artifacts over SSH” 。

jenkins打包生成 docker jenkins打包web项目_远程服务器_24

jenkins打包生成 docker jenkins打包web项目_远程服务器_25

Name:第三步创建的远程服务器名称

      Source files:本地需要传输过去的文件路径

      Remove prefix:过滤掉的目录名

      Remote directory:远程服务器的保存路径

      Exec command:传输完成后在远程服务器执行的sh命令
cd /home/www/dl-medical/wechat #进入远程服务器的test目录
tar -zxvf test.tar.gz -C wechat/ #解压test文件到wechat文件夹
rm -rf test.tar.gz #删除test文件

6、填完以上内容后保存构建任务,然后开始构建项目

jenkins打包生成 docker jenkins打包web项目_前端_26


jenkins打包生成 docker jenkins打包web项目_tomcat_27


jenkins打包生成 docker jenkins打包web项目_远程服务器_28

jenkins打包生成 docker jenkins打包web项目_jenkins打包生成 docker_29


完。