我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

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

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

前期准备

  • GitHub账号和项目
  • CentOS服务器
  • 服务器安装Java SDK
  • 服务器安装Nginx +启动
  • 服务器安装Jenkins +启动

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里设置服务器信息:

  • Passphrase:密码(key的密码,没设置就是空)
  • Path to key:key文件(私钥)的路径
  • Key:将私钥复制到这个框中(path to key和key写一个即可)

SSH Servers的配置:

  • SSH Server Name:标识的名字(随便你取什么)
  • Hostname:需要连接SSH的主机名或IP地址(建议IP)
  • Username:用户名
  • Remote Directory:远程目录(上面第二步建的testjenkins文件夹的路径)

高级配置:

  • Use password authentication, or use a different key:勾选这个可以使用密码登录,不想配SSH的可以用这个先试试
  • Passphrase/Password:密码登录模式的密码
  • Port:端口(默认22)
  • Timeout(ms):超时时间(毫秒)默认300000

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

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

  • Name:选择一个你配好的SSH服务器
  • Source files:写你要传输的文件路径
  • Remove prefix:要去掉的前缀,不写远程服务器的目录结构将和Source files写的一致
  • Remote directory:写你要部署在远程服务器的那个目录地址下,不写就是SSH Servers配置里默认远程目录
  • Exec command:传输完了要执行的命令,我这里执行了进入test目录,解压缩,解压缩完成后删除压缩包三个命令

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

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

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

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

  • Jenkins安装Generic Webhook Trigger插件
  • GitHub添加触发器

配置方法

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

GitHub配置Webhook。

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

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

查看页面也是ok的。

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

最后

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

免责声明:

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

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

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

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

本地push代码到GitHub,Webhook自动触发Jenkins上的构建动作,完成安装Node插件并且打包,然后通过Publish Over SSH插件,将打包出来的文件,部署到目标服务器上。

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录