Jenkins自动化部署Vue项目的方法实现

原文

jenkins介绍

Jenkins是开源的,使用Java编写的持续集成的工具，在Centos上可以通过yum命令行直接安装。Jenkins只是一个平台，真正运作的都是插件。这就是jenkins流行的原因，因为jenkins什么插件都有。

1. 环境准备

centos 7.* 服务器，宝塔远程连接工具V3.2

2. 首先登录服务器更新系统软件

yun update

3. 安装Java和git

yum install javayum install git

4. 安装nginx

yum install nginx //安装 
service nginx start //启动

出现Redirecting to /bin/systemctl start nginx.service

说明nginx已经启动成功了，访问http://你的ip/，如果成功安装会出来nginx默认的欢迎界面

在这里插入图片描述

5. 安装Jenkins

wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key 

 yum install jenkins //完成之后直接使用 yum 命令安装 Jenkins

service jenkins restart  //启动 jenkins

jenkins启动成功后默认的是8080端口，浏览器输入你的服务器 ip 地址加8080 端口就可以访问了。

在这里插入图片描述

等待一会之后 提示你输入管理员密码

在这里插入图片描述

//服务器
[root@VM_0_2_centos ~]# cat /var/lib/jenkins/secrets/initialAdminPassword //cat 查看文件

在这里插入图片描述

进入系统 安装插件，直接点击安装推荐插件

在这里插入图片描述

点击推荐安装,稍等片刻，会出现

在这里插入图片描述

这个时候安装的的插件会比较多，耗时有点久。耐心等待。

安装完插件之后 创建第一个管理员用户

在这里插入图片描述

在这里插入图片描述

继续点击保存并完成

在这里插入图片描述

点击开始使用 jenkins 这个时候 jenkins就已经配置成功了。

6. 用jenkins创建一个构建任务

在这里插入图片描述


在这里插入图片描述

这里我代码仓库用的是码云(github也是一样的)
输入仓库地址。因为仓库是私有的所以会有报错提示 这里要添加Credentials。就是你码云或者github账号。

在这里插入图片描述选择一下要构建的代码分支

在这里插入图片描述

这个时候就创建了一个构建任务
回到首页==>就会看到一个llgtfoo的构建任务

在这里插入图片描述

点击名称 进入当前任务配置页面，点击工作区

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在点击工作空间==>

在这里插入图片描述

jenkins构建任务已经完成

7. 填写jenkins构建时执行的shell脚本

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

输入shell命令==>

node -v
npm install 
npm install 
rm -rf ./dist/*  移除工作区dist文件
npm run build  打包项目
rm -rf /www/web/site/*  删除/www/web/site上一次构建文件
cp -rf ./dist/* /www/web/site   将打包后的dist文件拷贝到/www/web/site ，/www/web/site为nginx文件目录

再次回到my_test工程。

点击立即构建==>发现构建报错了(红色圆点即为构建失败,蓝色成功)

在这里插入图片描述

点击错误的构建历史，进去再点击控制台输出

在这里插入图片描述

查看报错问题

在这里插入图片描述

npm: command not found

jenkins默认是没有安装node插件的,所有没有npm命令
安装node插件 ====>

8. 安装nodeJs

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

安装成功

在这里插入图片描述

点击全局工具配置===>

在这里插入图片描述

选择安装nodeJS

在这里插入图片描述

在这里插入图片描述

保存，回到配置

在这里插入图片描述

保存再次点击立即构建 ，构建过程中可以点击控制台输出，查看构建过程

在这里插入图片描述

shell脚本执行执行了,但是没有全部执行成功。

当我们在服务器上安装jenkins时,会在服务器上创建一个jenkins的用户。但是这个jenkins没有操作/www/web/site文件夹的权限

给jenkins用户添加 /www/web/site文件夹的所有权限===>

[root@VM_0_2_centos /]# chown -R jenkins:jenkins /www/web/site

再次点击构建

在这里插入图片描述

Finished: SUCCESS 表示构建成功啦

9.打开服务器

查看服务器 /www/web/site/ 文件夹里面的内容

在这里插入图片描述

/www/web/site/ 里面已经有了打包后的内容

10.利用docker部署nginx访问项目

centos 安装docker 环境

在这里插入图片描述

centos 官网安装步骤

docker pull nginx # 拉取镜像

mkdir -p /www/web/conf # 创建配置文件目录

在这里插入图片描述

在/www/web/conf 中拷贝nginx.conf 和default.conf

# 拷贝配置文件
docker run --name nginx01 -d nginx:latest
docker cp nginx01:/etc/nginx/nginx.conf /www/web/conf  #把容器中的nginx.conf文件复制到conf目录下
docker cp nginx01:/etc/nginx/conf.d/default.conf /www/web/conf  #把容器中的default.conf文件复制到conf目录下
docker rm -f nginx01 #删除镜像

/www/web/site为Jenkins构建dist文件输出目录

创建web项目容器

docker run -it -d --name mynginx -p 8888:80 -v /www/web/site:/usr/share/nginx/html -v /www/web/conf/nginx.conf:/etc/nginx/nginx.conf -v /www/web/conf/default.conf:/etc/nginx/conf.d/default.conf  -v /www/web/logs:/var/log/nginx nginx

命令说明：
docker run -it -d --name mynginx  #名称
-p 8888:80  # 端口映射
-v /www/web/site:/usr/share/nginx/html  # 挂载资源路径
-v /www/web/conf/nginx.conf:/etc/nginx/nginx.conf  #挂载主配置文件
-v /www/web/conf/default.conf:/etc/nginx/conf.d/default.conf   # 挂载默认配置文件，反向代理就是从这个配置文件中配置
-v /www/web/logs:/var/log/nginx nginx # 挂载日志文件

在这里插入图片描述

http://ip:3000成功访问

在这里插入图片描述

11.实现代码提交自动触发Jenkins构建

实现开发本地push代码到gitee上后，触发Webhook，jenkins自动执行构建。

  • jenkins安装Generic Webhook Trigger 插件
  • github添加触发器

配置方法

1.在刚才的llgtfoo工程中点击构建触发器中选择Generic Webhook Trigger，填写token

在这里插入图片描述

2.gitee配置Webhook
选择gitee项目中的Settings->Webhooks>add webhook
配置方式按上图红框中的格式，选择在push代码时触发webhook，成功后会在下方出现一个绿色的小勾勾

在这里插入图片描述

测试请求成功

在这里插入图片描述

修改代码推送到gitee上面，Jenkin成功自动新增一条构建记录。

在这里插入图片描述

到此这篇关于Jenkins自动化部署Vue项目的方法实现的文章就介绍到这了,更多相关Jenkins自动化部署Vue内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！

Jenkins自动化部署Vue项目的方法实现的更多相关文章

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

  2. 无法在iOS设备上首次安装企业内部分发应用程序

    我有一个可以通过S3Bucket使用Enterprisedistribution下载的应用程序,它第一次失败并显示加载但是当我通过将设备连接到计算机使用配置实用程序手动安装证书时,相同的网站链接开始工作.我正在使用Jenkins来创建构建.证书没有自动安装,我按照苹果标准使用清单.我的清单文件内容如下：解决方法我通过检查设备日志来解决问题,它说未找到嵌入式配置.我刚刚打开了使用Jenkins创建的

  3. ios – 使用Jenkins和altool自动上传IPA失败,并找不到“Transporter not found”错误

    我正在使用Jenkins和altool验证iOS包并自动将其上传到我的iTunes帐户.虽然验证工作正常,我没有收到任何错误,但上传不起作用.‘/Applications/Xcode.app/Contents/Applications/ApplicationLoader.app/Contents/Frameworks/ITunesSoftwareService.framework/Versions

  4. ios – Jenkins无法从项目文件夹运行xcodebuild

    我是Jenkins的新手,但是我尽力用GoogleFu回答这个问题无济于事.我最初是通过手动安装Jenkins遇到了这个问题,但最近使用了OSX安装程序并导致了同样的错误.我猜这与Unix/Linux/OSX权限有关,而不是Jenkins/Xcode,但没有足够的专业知识来确定.编辑项目目录权限设置为775.我也尝试将所有权更改为Jenkins运行的用户.这是我尝试将xcodebuild作为守护程序用户运行时的输出：解决方法确保运行Jenkins的用户具有正确的权限.转到http：//[jenkins_s

  5. xcode – 为什么Jenkins在我的Mac上运行不会连接到本地的git repo？

    我正在尝试使用Jenkins实现自动化构建,用于我的iOS项目.我添加了Git插件,但是一旦我尝试将git的URL放在项目的git配置中,它会在下面的屏幕截图中显示错误.这里Jenkins不能从repo克隆到其工作空间.解决方法在大多数情况下,gitbarerepo有扩展名.git我的意思是(其他)/test1看起来不正确,我认为应该是(其他)/test1.git在我的mac上有同样的错误.

  6. xcode – 可以用两个不同的iOS sdks运行jenkins

    我们正在使用Jenkins在MacMini服务器上运行我们的xcodebuilds.在最近几周,我们开始开发iOS7应用程序,并在MacMini上安装了Xcode5DP版本.当安装新的Xcode版本并配置Xcode的xcodebuild,xcode-选择这个新版本也用于构建我们的旧iOS6应用程序–这打破了它们的UI.有没有办法告诉Jenkins哪个xcodebuild应该用来构建一个项目？

  7. Android Jenkins构建因崩溃而失败

    每次我尝试使用Jenkins构建时,都会出现以下错误Failedtoapplyplugin[id‘io.fabric’]Couldnotcreatepluginoftype‘CrashlyticsPlugin’.从Gradle中删除Crashlytics可以解决此问题解决方法这些是您需要遵循的最终命令：以下是此案例的相关调试日志：

  8. android – 每个构建的Jenkins电子邮件工件

    我正在使用Jenkins构建我的Android应用程序.一旦创建了工件,我希望apk能够通过电子邮件发送给一组用户.我已经知道Testflight等,但我只需要Jenkins将签名的apk通过电子邮件发送给一组用户.我怎样才能做到这一点？

  9. 如何设置Android应用程序版本的数量建立在jenkins？

    成功推送后,应用程序由jenkins自动建立,但版本始终为1.0.而不是“0”,我想在jenkins中插入相应的编号：1.119,1.120,1.121…那是我的build.gradle文件build.sh我的gradle.properities只包含评论.解决方法通过将这两个字符串插入到build.gradle的defaultConfig中解决问题：代替

  10. vue自定义加载指令v-loading占位图指令v-showimg

    这篇文章主要为大家介绍了vue自定义加载指令和v-loading占位图指令v-showimg的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目，可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片，只需点击一下即可将其转换为 PDF 文件，感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现，如何实现爱心点赞功能，这篇文章主要为大家详细介绍了jquery点赞功能实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，怎么实现这样的功能呢？今天小编给大家分享AugularJs上传前预览图片的实现代码，需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念，例如类、对象、属性、方法等面向对象的术语，并以实例讲解各种术语的使用，非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是：文章插图太宽，使整个网页都变形了。如果对每个插图都先进行缩放再插入的话，太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部