jenkins自动构建vue项目(自动打包、备份、上传、跨服务器拷贝、git自动触发构建)

一:环境准备:
首先,在安装jenkins之前,我们要先在linux中必须安装jdk,本次我们使用的是jdk1.8版本,其次由于我们是构建vue项目,并且要实现gitlab提交代码自动构建的功能,所以还要用到nodej以及git;这些步骤这里不做详细介绍,自行安装即可。
二:jenkins安装及启动
前期准备工作结束后,我们就可以开始安装jenkins了,其实安装步骤很简单,只需要去官方网站根据自己的系统下载对应的版本就好,下载地址:https://www.jenkins.io/zh/

我们下载linux版本后得到的是一个war包,我们选择合适的路径存放即可,这个路径没有特定要求,存放好之后进入安装的目录,执行 java –jar jenkins.war –httpPort=9090 即可打开服务,

httpPort是开放的端口号,可自己更改,只要没有和其他有冲突即可。等待服务开启后我们打开浏览器,在浏览器内输入服务器地址以及端口号,比如我的服务器地址是 1.1.1.1;那么在浏览器输入1.1.1.1:9090即可进入如下页面

我们按照红色字体提示的路径打开那个文件,将里边的所有内容全部复制然后粘贴到管理员密码那里后点击继续;这时会提示自定义jenkins

这个地方如果自己认为网速还行的话可以选择安装推荐的插件,比较省事,不过这个比较慢,可能要等待一段时间才能安装好,这里我们选择了安装推荐的插件,接下来就是要等待了

安装完成后就会提示创建第一个管理员用户,这里我们创建好之后点击保存并完成

这里继续点击保存并完成,点击开始使用jenkins,这个时候jenkins就已经安装成功了

三:构建第一个项目
第一次我们看到的页面是这样的,这个时候我们需要来创建第一个项目,点击创建一个新任务

任务名称这里可以根据自己的实际更改名字,然后选择构建一个风格自由的软件项目,点击确定

我们这里是根据gitlab构建的项目,所以点击源码管理然后选择git,在第一项中Repository URL中填入git项目的http地址,这时候会发现报错,这是因为我们的仓库是私有的,这时候就要添加Credentials;也就是gitlab的账号和密码,点击添加—>Jenkins,按照图示步骤只需要填入用户名和密码即可,其他的不需要填

添加好之后选中账号报错就消失了

这一步结束后初步构建就完成了,点击保存会自动跳转到工作区,点击工作区

这里会显示错误:没有工作空间,这是因为我们还没有进行构建项目,只有进行过构建项目才能将git代码拉取到jenkins上,这时候点击一下左侧导航栏里边的Build Now,当构建历史里边的小灯显示蓝色的时候就构建成功了

然后刷新页面,就会看到gitlab上边的代码已经拉取下来了

四:编写jenkins测试Shell脚本
点击配置

点击构建–>增加构建步骤–>选择Execute shell

这里以web容器在/data1/nginx/html/testProj这里为例子编写shell脚本
在命令里边依次输入

npm install
rm –rf /data1/nginx/html/testProj/dist
rm –rf /data1/nginx/html/testProj/static
rm –f /data1/nginx/html/testProj/index_prod.html
npm run build
cp -r dist /data1/nginx/html/testProj/
cp -r static /data1/nginx/html/testProj/
cp index_prod.html /data1/nginx/html/testProj/

编写完脚本后点击保存,再次回到my_test工作区
这时候点击立即构建,会发现报错(红色的点是失败,蓝色的是成功)

点击#5进入这次构建的详情中,再点击控制台输出查看构建日志

这是日志

通过分析发现这个错误主要就是npm: command not found
这个错误是因为jenkins默认是没有安装node插件的,所以就没有npm命令,就无法识别脚本内的npm,解决办法就是在jenkins里边安装node插件;安装步骤如下:

进去之后点击可选插件,在过滤中输入Nodejs,然后选择后点击直接安装

等待安装成功之后到全局配置工具里边

找到NodeJS,点击新增NodeJS,别名内随便输入,建议就写node或者nodejs,方便后续区分,在install from nodejs.org处选择好自己的node版本,点击保存

再次回到my_test的配置空间,点击构建环境,选择Provide Node & npm bin/ folder to PATH

在NodeJS Installation项中选择nodejs,这个nodejs就是上一步配置node时候的别名
选择好后点击保存,再次点击Build Now,这时候就开始正常构建了,第一次构建会很慢,因为需要更新项目的依赖安装包以及要重新打包项目,所以这里需要耐心等待一下

等待构建成功后查看服务器 /data1/nginx/html/testProj发现里边已经有了内容,这说明我们已经部署成功

五:了解jenkins实际的业务需求
上一步我们只是编写了一个测试shell脚本来熟悉一下jenkins的构建过程到底是个什么样子的一个情况,接下来我们将根据实际的业务需求来更改我们的配置以及重新编写脚本。
先来介绍一下业务需求,为了解决每次代码开发完成后都要手动打包项目,手动提交代码到git仓库,而且还要每次都去自己去备份正式环境上边的文件以及替换最新打包的项目,过程比较繁琐耗时并且如果哪一步出了一点错误都可能会导致上线失败 ;基于此决定使用jenkins实现持续集成,既只要每次提交代码到git仓库就可以实现代码自动打包编译并且自动备份服务器上的资源文件到指定的路径,这样每次更改代码后只需要将代码提交到git上边就可以了。这里还有一个需求就是因为jenkins安装的服务器和nginx的服务器是不同的,所以这里还需要考虑跨服务器备份的问题,接下来将详细介绍如何跨服务器配置文件以及如何让git自动触发jenkins的构建

六:配置跨服务器拷贝的免密登录(此处自己懒得写了,摘自其他博客,我就是按照这个步骤弄的,亲测可行)
使用jenkins在做集成的时候,如果需要将各个项目的配置进行汇聚后,进行统一管理。在这种场景下就需要在工程打包后,将配置集中在jenkins服务器汇聚后,从jenkins服务器拷贝到部署服务器中,这样可以在jenkins服务器中配置一些脚本,这个脚本跨及其拷贝配置文件导部署服务器上来。利用scp命令即可,但是scp命令在默认环境下,是需要密码的,这里用ssh来信息,不需要密码即可拷贝文件。
操作步骤:
例如:
A服务器IP192.168.1.223是jenkins服务器
B服务器IP192.168.1.193是部署服务器
操作步骤:
1) 那么首先在A服务器执行 ssh-keygen -t rsa,一路会车下去,在/root/.ssh目录下面会生成id_rsa和id_rsa.pub两个文件,将id_rsa.pub复制一份出来
cp id_rsa.pub id_rsa223.pub
2)将A服务器的id_rsa223.pub拷贝到B服务器
scp root/.ssh/id_rsa223.pub root@192.168.1.193:/root/.ssh/id_rsa223.pub
键入B服务器的密码
拷贝过来后,将id_rsa193.pub写入authorized_keys
cat id_rsa193.pub >> authorized_keys
如果没有这个文件(没有目录可手动创建),直接执行:
cd /root/.ssh
mv id_rsa193.pub authorized_keys
3)在A服务器执行测试脚本,检查如果不需要输入密码即可切换成功,则配置成功
scp test root@192.168.1.193:/home/test
4)最后就是编写脚本,实现从服务器A拷贝文件到服务器B;如果需要两台服务器都互相之间都能免密登录,将上述步骤反过来执行一次即可
七:编写实际开发shell脚本

cd /data1/beifen
mkdir `date +%Y-%m-%d-%H-%M`
cd `date +%Y-%m-%d-%H-%M`
scp -r root@172.28.199.44:/data1/nginx/html/tagSystem_2020_05_11/dist ./
scp -r root@172.28.199.44:/data1/nginx/html/tagSystem_2020_05_11/static ./
scp root@172.28.199.44:/data1/nginx/html/tagSystem_2020_05_11/index_prod.html ./
cd /root/.jenkins/workspace/tagSystem_independent
npm install
npm run build
ssh -tt 172.28.199.44 << remotessh
rm -rf /data/nginx/html/tagSystem_2020_05_11/dist
rm -rf /data/nginx/html/tagSystem_2020_05_11/static
rm -f /data/nginx/html/tagSystem_2020_05_11/index_prod.html
scp -r root@172.28.2.242:/root/.jenkins/workspace/tagSystem_independent/dist /data/nginx/html/tagSystem_2020_05_11/
scp -r root@172.28.2.242:/root/.jenkins/workspace/tagSystem_independent/static /data/nginx/html/tagSystem_2020_05_11/
scp root@172.28.2.242:/root/.jenkins/workspace/tagSystem_independent/index_prod.html /data/nginx/html/tagSystem_2020_05_11/
exit
remotessh

这里需要注意的是 mkdir date +%Y-%m-%d-%H-%M ;这个命令是根据时间创建一个文件夹,用来做自动备份时候来区分用的;
接下来就是 cd /root/.jenkins/workspace/tagSystem_independent 这个目录是jenkins的安装目录,项目也在这个目录下面,如果要执行npm install 和 npm run build就必须要回到这个项目下
ssh -tt 172.28.199.44 << remotessh 这个命令是为了切换服务器时候不需要输入密码即可完成切换

八:配置gitlab代码提交自动触发jenkins构建
以上所有的构建步骤都已完成,只剩下配置gitlab更新代码时候自动触发jenkins构建
下载所需要的插件,

搜索gitlab,将下述两个插件安装

登录gitLab,生成一个Personal Access Tokens


进入Jenkins,添加api token,路径:首页–》凭据–》添加凭据

添加后再次打开,如图所示

然后打开系统管理,进入系统设置,配置gitLab

然后进入job,进行配置


进入GitLab,打开项目–》settings



测试成功,返回200

到此,触发器配置成功,开发一旦有提交代码,就会自动构建,如图所示

总结:以上即是前端Vue项目使用jenkins实现自动化构建的完整操作步骤,后续如果发现不足将及时更正

jenkins最完整自动打包编译备份,跨服务器拷贝,git自动触发构建相关推荐

  1. Linux scp 跨服务器拷贝 + 服务器简介

    笔者刚接触到服务器这个概念,所以就类似于一个在深山老林中的人刚接触电脑一样,所以首先想介绍一下啥是服务器.然后再记录一下scp的用法 一.科普 服务器是计算机的一种,它比普通计算机运行更快.负载更高. ...

  2. Node.js 使用webpack-dev-server工具运行项目实现自动打包编译的功能

    npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 cnpm 模块 使用 cnpm 命令 cnpm i webpack- ...

  3. vue 自动打包部署上传服务器

    简单的4步配置,即可实现一键上传 执行命令 npm i fe-deploy-cli -g 进行全局安装 在项目根目录执行命令 deploy init 生成deploy文件夹 修改deploy文件夹下面 ...

  4. 百度同步盘+系统备份实现服务器文件在线自动备份

    做好文件备份很重要,服务器通常会因为各种原因崩溃或出问题.如果服务器上的文件没有做好备份的工作,一旦服务器出问题,那么将会带来很大的麻烦.下面是广州网站建设一直用的,觉得很方便又好用的服务器在线备份方 ...

  5. linux scp 跨服务器,scp跨服务器拷贝,后台运行

    [转载]原文:https://blog.csdn.net/u013091013/article/details/68941250 通常情况下,我门在同一台服务器拷贝数据最常用的命令便是cp,如果要在不 ...

  6. 如何使用NAnt 自动打包DNN模块 之二

    系列文章: 如何使用NAnt 自动打包DNN模块 之一 如何使用NAnt 自动打包DNN模块 之二 使用MSBuilder编译项目时,会出现找不到引用的DLL的问题.可以参考这里解决:http://w ...

  7. webpack配置:打包第三方类库、第三方类库抽离、watch自动打包、集中拷贝静态资源...

    一.打包第三方类库 下面说2种方法: 第一种: 1.引入jQuery,首先安装: npm install --save-dev jquery 2.安装好后,在index.js中引入,用jquery语法 ...

  8. git log 获取构建时间_Docker 运行 Jenkins 自动化构建 .NET Core 项目

    (给DotNet加星标,提升.Net技能) 转自:ZKEASOFTzkea.net/codesnippet 目标 当代码提交到GitHub后,自动生成构建项目并部署到服务器. 接下来介绍一下如何在容器 ...

  9. 标题|服务器标题|服务器名称|服务器IP|服务器端口|是否自动展开(0不展开,1自动展开)|微端IP|微端端口(0表示不使用微端)|安全盾防火墙端口(0表示不使用防火墙)|防火墙类型,0=安全盾防火墙

    [Server] ; 标题|服务器标题|服务器名称|服务器IP|服务器端口|是否自动展开(0不展开,1自动展开)|微端IP|微端端口(0表示不使用微端)|安全盾防火墙端口(0表示不使用防火墙)|防火墙 ...

最新文章

  1. java中方法的参数传递
  2. Ogre共享骨骼与两种骨骼驱动方法
  3. JAVA 简单的抽奖程序
  4. C++ 可变索引模板 和 template template
  5. 跟着开源项目学因果推断——mr_uplift(十五)
  6. java从字符串中提取数字的简单实例
  7. 八月份技术指标和个人指标
  8. 使用SESSION实现PHP会话的步骤
  9. Drools规则引擎简介
  10. 在计算机编程里pi是什么意思,编程中的术语“钩子”是什么意思?
  11. Invalid bound statement (not found): com.xxx.mapper.xxxMapper.selectxxx
  12. 阿里、百度、搜狐等公司社招面试记录与总结
  13. 如何安装PrCC2019
  14. 李彦宏:为理想找到归宿
  15. vscode输入英文时字体之间的间隔突然变大
  16. Firefox支持Websocket
  17. Interwine China 2009广州国际名酒展
  18. oracle 学习积累(3)
  19. android 指针越界,android sqlist中游标下标越界问题解决方案
  20. 第三方支付平台:BeeCloud和Ping++对比

热门文章

  1. win10登陆密码重置
  2. CentOS下添加用户并且让用户获得root权限
  3. 漫话:如何给女朋友解释什么是反向代理?
  4. 【腾讯云原生降本增效大讲堂】作业帮云原生降本增效实践之路
  5. 低代码平台如何为企业降本增效
  6. Python 安装特定版本的 Opencv
  7. 模糊c均值聚类算法的c++实现
  8. selenium 切换标签页解决 get 超时问题
  9. gluLookAt 函数详解
  10. 用c语言选择升降序排列方法,C语言题目3_冒泡排序之自由升降序