关闭

使用jenkins进行前端项目自动部署

时间: 2018-05-29阅读: 4195标签: 前端作者: 小火柴的蓝色理想

原文来源:https://www.cnblogs.com/xiaohuochai/archive/2018/05/28/9096873.html

前面的话

  后端的nodejs项目可以使用pm2进行自动部署,由于前端项目打包后是静态资源,不需要进程守护。一般地,前端项目使用jenkins来进行自动部署,包括打包、测试等一系列流程。本文将详细介绍jenkins的使用

 

安装

  Jenkins 是一款业界流行的开源持续集成工具,广泛用于项目开发,具有自动化构建、测试和部署等功能。由于 jenkins是基于java环境运行的,所以首先需要安装java环境

  1、安装依赖包,使得add-apt-repository命令可以进行

apt-get install software-properties-common

  2、通过add-apt-repository加载第三方的开源软件源

sudo add-apt-repository ppa:webupd8team/java

  3、更新软件包列表,并安装jdk

sudo apt-get update
sudo apt-get install oracle-java8-installer

  安装器会提示同意 oracle 的服务条款,选择 ok,然后选择yes 即可

  4、通过查看java版本,来测试java环境是否安装成功

xiaohuochai@iZbp13p7zpoi6363d01pugZ:~$ java -version
java version "1.8.0_171"
Java(TM) SE Runtime Environment (build 1.8.0_171-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.171-b11, mixed mode)

  5、接下来,按照官网的操作要求,安装jenkins

wget -q -O - https://pkg.jenkins.io/debian/jenkins-ci.org.key | sudo apt-key add -
sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'
sudo apt-get update
sudo apt-get install jenkins

  6、安装完成后,jenkins的文件目录如下所示

安装目录:/var/lib/jenkins  
日志目录:/var/log/jenkins/jenkins.log  

  7、接下来,就可以启动jenkins了

service jenkins start 

  在jenkins启动过程中,可能会遇到如下问题

Job for jenkins.service failed 

  这是因为java环境,没有安装成功,按照上面的步骤重新安装java即可

  还可能会出现如下警告

java.net.UnknownHostException: yonghu: yonghu: 未知的名称或服务

  直接修改hosts文件(vi /etc/hosts),将原127.0.0.1替换成127.0.0.1 localhost centos-a即可

127.0.0.1 localhost yonghu

  因为jenkins默认使用8080端口,如果使用阿里云,还需要在安全组中开放8080端口

 

初始化

  启动jenkins服务后,可以在8080端口访问到jenkins

jenkins

  然后在服务器的指定目录找到密码登录

/var/lib/jenkins/secrets/initialAdminPassword

  按照默认配置安装插件
jenkins

  等待插件安装完成
jenkins

  创建一个管理员账户,完成配置后,就可以登录 Jenkins 了

jenkins

 

安装插件

  下面来安装nodejs插件

jenkins

  可以看到,Jenkins提供了丰富的插件供开发者使用,找到需要的[NodeJS Plugin],勾选后点击安装即可

jenkins

  3、安装完毕后,选择系统管理->全局工具配置,配置node下载及安装

jenkins

 

git钩子

  为了能够与 GitHub 配合,需要进入对 GitHub 进行一些设置

  在github中进入博客所在的repo,并点击settings。在设置界面单击左侧的Integrations & services,并选择add service。从下拉菜单中,选中Jenkins(Github plugin)

jenkins

 

  从下拉菜单中,选中Jenkins (GitHub plugin)。在新打开的界面,填写Jenkins的信息

jenkins

  完整的地址为http://xx.xx.xx.xx:8080/GitHub-webhook/。把这里的xx换成实际的IP地址或者域名即可。需要注意的是,网址末尾的斜杠一定不能省略

  填写好信息以后保存,GitHub就配置好了

 

配置任务

  1、安装好github钩子以及nodejs插件后,接下来开始配置任务

  点击创建一个新任务,填写任务名称,构建的项目类型可根据实际情况进行选择,本次选择第一种即可

jenkins

  2、配置基础信息

jenkins

  3、往下拉,看到源码管理,点选Git,依然填写博客对应的Repo地址

jenkins

  4、继续往下拉,在构建触发器单击增加构建步骤,在弹出的下拉菜单中选择Execute shell。勾选GitHub hook trigger for GITScm polling。构建环境选择nodejs

jenkins

  5、一般地,构建过程,输入如下

npm install &&
npm run build

  但是,经过实际测试,在服务器上使用npm install会使服务器卡死。于是,变通的方法是,在本地直接构建,并将构建后的文件上传到github,然后通过jenkins取得。于是,构建过程如下所示

cp -r ./* /home/xiaohuochai/blog/admin

  把当前目录下的所有内容全部复制到/home/xiaohuochai/blog/admin下,并且如果文件名相同,就会直接覆盖

  6、修改权限

  由于Jenkins在安装的时候,会自动创建一个名为jenkins的普通账号,这个账号没有管理员权限。jenkins执行命令的时候,它也会使用这个账号。但是由于admin这个文件夹是用户xiaohuochai创建的,所以jenkins账号默认是没有权限读写这个文件夹的。现在需要给jenkins账号授予权限。使用xiaohuochai这个账号登录服务器,使用以下命令给jenkins赋予权限,让它可以读写admin文件夹:

sudo chown -R jenkins:jenkins /home/xiaohuochai/blog/admin

  执行完成这一行命令以后,jenkins才可以把其他地方的文件复制到这个文件夹里面

 

邮件提醒

  在系统设置中找到Jenkins Locaction项填入Jenkins URL和系统管理员邮件地址,系统管理员邮件地址一定要配置,否则发不了邮件通知。因为邮件通知都是由系统管理员的邮箱发出来的

jenkins

  找到邮件通知项,填入SMTP服务器信息及用户名、密码等认证信息

jenkins

  找到Extended E-mail Notification项,填入类似信息

jenkins

  进行新建的pull-blog项目中,在构建后操作新增Editable Email Notification

jenkins

  在advances setting中选择always,意思是无论什么情况任务执行完就发邮件

jenkins

 

测试

  按照上面步骤部署完成后,点击立即构建

jenkins

  点击35号任务的小三角,选择控制台输出

jenkins

  输出如下记录

Started by user xiaohuochai
Building in workspace /var/lib/jenkins/workspace/pull_blog
 > git rev-parse --is-inside-work-tree # timeout=10
Fetching changes from the remote Git repository
 > git config remote.origin.url https://github.com/littlematch0123/blog-admin.git # timeout=10
Fetching upstream changes from https://github.com/littlematch0123/blog-admin.git
 > git --version # timeout=10
 > git fetch --tags --progress https://github.com/littlematch0123/blog-admin.git +refs/heads/*:refs/remotes/origin/*
 > git rev-parse refs/remotes/origin/master^{commit} # timeout=10
 > git rev-parse refs/remotes/origin/origin/master^{commit} # timeout=10
Checking out Revision 21ff1aa59ffb4ffad648f9f80193f300947a98fb (refs/remotes/origin/master)
 > git config core.sparsecheckout # timeout=10
 > git checkout -f 21ff1aa59ffb4ffad648f9f80193f300947a98fb
Commit message: "本地构建"
 > git rev-list --no-walk 21ff1aa59ffb4ffad648f9f80193f300947a98fb # timeout=10
No emails were triggered.
[pull_blog] $ /bin/sh -xe /tmp/jenkins4130757344876690584.sh
+ cp -r ./build ./config-overrides.js ./LICENSE ./package.json ./public ./README.md ./src /home/xiaohuochai/www/blog/admin/source
Email was triggered for: Always
Sending email for trigger: Always
Sending email to: 121631835@qq.com
Finished: SUCCESS

  与此同时,邮箱也收到了通知

jenkins
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/834

关闭

前端应该懂得初级Web分析指标

从事该行业足够长的时间的人们经常会忘记这些指标对于新人来说听起来很荒诞,所以您必须原谅他们。 要学习网络分析并了解它如何使您受益,最好先了解周围常见的术语,这是一个好主意。

Web前端体系的脉络结构

Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。

学习web前端,迷茫怎么办?

从业这么多年,时不时就有前端同行咨询我关于职业发展的事情,其中比较常见的一个就是对前端的迷茫。具体表现为,团队没什么前端,就自己一个人,感觉上面的人也不太重视前端,然后自己平时的工作也驾轻就熟

面试WEB前端如何才能通过?

今天我想给大家讲述一下,目前想要做web前端开发,面试成功应该如何去学习,要具备哪些技术。你学习web前端想要面试成功,必须具备以下的东西:精通dom,json,vue,react,node,bootstrap或类似框架开发经验

张鑫旭:我对前端从业人员分布与技术风向的一点看法

Web 前端这个职业从出现到现在 20 年的历史应该有了,随着这么多年前端发展和积累,累积百万前端从业开发者绝对有的,当下至少有 50 万前端开发从业者。从我筛选简历到最终录取大概百分之一的录取率,综合我们厂算是小厂来看

如何避免Puppeteer被前端JS检测

这两天开始看puppeteer,发现居然也能被某数的前端js检测出来!?想找找到底哪个环节把webdriver属性加上的,但是文本搜索发现puppeteer源码中并没有……后来chrome中用chrome:version看了下命令行启动参数

合格的前端不少,优秀的不多

同样的前端工作,有人的工作输出确实是更加的优秀。人与人之间,真的有很大的差别。 今天,我们就来聊一下身边的优秀的前端,是怎样对待前端这份工作的?总结了几点

一个十年老前端的感悟

今年整体的大环境不太好,经济处于一个下行周期,是下行周期的哪个部位不太好说。我觉得房地产也大概率会处于一个长期横盘的趋势。IT就业更是有点惨淡之势,在这漫漫长夜,希望所有的年轻人平时多学习,自律,增长自己的知识和远见,磨炼自己的心性

web前端知识体系图

Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点

前端是做什么的?工作内容有哪些?

随着互联网全面进入移动时代,前端逐渐成为互联网行业中的重要角色。前端是做什么的?工作内容有哪些?简单来讲,前端要做的就是将产品的UI设计稿在用户终端上实现,因此可以说用户看到的所有视觉和交互都是前端的工作领域

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!