文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

利用Jenkins与Nginx实现前端项目自动构建与持续集成

2024-12-03 12:34

关注

前期准备

Jenkins介绍

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

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

  1. $ yum update 

安装Java和Git

 

  1. $ yum install java  
  2. $ yum install git 

安装Nginx

 

  1. $ yum install nginx //安装  
  2. $ service nginx start //启动 

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

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

安装Jenkins

 

  1. $ wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo 
  2. rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key  
  3.  
  4. $ yum install jenkins //完成之后直接使用 yum 命令安装Jenkins 
  5.  
  6. $ service jenkins restart  //启动Jenkins 

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

输入cat /var/lib/jenkins/secrets/initialAdminPassword查看初始密码。

这里我们选择推荐通用插件安装即可,选择后等待完成插件安装以及初始化账户。

 

 


 

 

 


 

然后安装两个推荐的插件:Rebuilder、SafeRestart。

在Jenkins中安装NodeJs插件

因为我们的项目是要用到Node打包的,所以先在Jenkins中安装NodeJs插件,安装后进入全局工具配置,配置一个我们要用到的Node版本。

 

 


 

创建任务

点击创建一个新任务。

 

 


 

Jenkins关联GitHub项目地址:

选择构建环境并编写shell命令:

配置完成后点击立即构建,等待构建完,点击工作空间,可以发现已经多出一个打包后的dist目录。点击控制台输出可以查看详细构建log。

 

 

到这里已经实现了本地代码提交到GitHub,然后在Jenkins上点击构建,可以拉取代码并且打包,下一步实现打包后的dist目录放到目标服务器上。

安装Publish Over SSH插件,我们将通过这个工具实现服务器部署功能

安装完成后在系统管理-> 系统设置->Publish over SSH里设置服务器信息:

SSH Servers的配置:

高级配置:

这里配置的是账号密码登录,填写完后点击test,出现Success说明配置成功。

在刚才的testJenkins工程中配置构建后操作,选择send build artificial over SSH, 参数说明:

注意在构建中添加压缩dist目录命令:

填完后执行构建。成功后登录我们目标服务器发现test目录下有了要运行的文件:

访问域名发现项目可以访问了。

接下来实现开发本地push代码到GitHub上后,触发Webhook,Jenkins自动执行构建。

配置方法

在刚才的testJenkins工程中点击构建触发器中选择Generic Webhook Trigger,填写token:

GitHub配置Webhook。

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

测试一下,把Vue项目首页的9900去了,然后push代码去GitHub,发现Jenkins中的构建已经自动执行。

查看页面也是ok的。

一套简单的前端自动化工作流就搭建完成,是选择代码push后在Jenkins中手动构建,还是push后自动构建,看公司情况使用。

最后

写的有点啰嗦,有错误的地方希望大家指出,也希望这篇文章对大家有帮助。

来源:segmentfault.com内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯