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

时间  2019-11-07
标签 使用 jenkins 进行 前端 项目 自动 部署 栏目 自动化构建 繁體版
原文   原文链接

前面的话

　　后端的nodeJS项目可使用pm2进行自动部署，因为前端项目打包后是静态资源，不须要进程守护。通常地，前端项目使用jenkins来进行自动部署，包括打包、测试等一系列流程。本文将详细介绍jenkins的使用前端

 

安装

　　Jenkins 是一款业界流行的开源持续集成工具，普遍用于项目开发，具备自动化构建、测试和部署等功能。因为 jenkins是基于java环境运行的，因此首先须要安装java环境java

　　一、安装依赖包，使得add-apt-repository命令能够进行node

apt-get install software-properties-common

　　二、经过add-apt-repository加载第三方的开源软件源git

sudo add-apt-repository ppa:webupd8team/java

　　三、更新软件包列表，并安装jdkgithub

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

　　安装器会提示赞成 oracle 的服务条款，选择 ok，而后选择yes 便可web

　　四、经过查看java版本，来测试java环境是否安装成功shell

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)

　　五、接下来，按照官网的操做要求，安装jenkinsnpm

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

　　六、安装完成后，jenkins的文件目录以下所示json

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

　　七、接下来，就能够启动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

　　三、安装完毕后，选择系统管理->全局工具配置，配置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就配置好了

 

配置任务

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

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

jenkins

　　二、配置基础信息

jenkins

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

jenkins

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

jenkins

 

构建过程

　　通常地，构建过程，输入以下

npm install &&
npm run build

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

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

　　把dist目录下的内部复制到/home/xiaohuochai/blog/admin下，而且若是文件名相同，就会直接覆盖

【修改权限】

　　因为Jenkins在安装的时候，会自动建立一个名为jenkins的普通帐号，这个帐号没有管理员权限。jenkins执行命令的时候，它也会使用这个帐号。可是因为admin这个文件夹是用户xiaohuochai建立的，因此jenkins帐号默认是没有权限读写这个文件夹的。如今须要给jenkins帐号授予权限。使用xiaohuochai这个帐号登陆服务器，使用如下命令给jenkins赋予权限，让它能够读写admin文件夹：

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

　　执行完成这一行命令之后，jenkins才能够把其余地方的文件复制到这个文件夹里面

【将静态资源上传到七牛云上】

　　在dist目录下存在着HTML文件和其余静态资源。除了HTML文件外，其余的静态资源通常都存放在CDN上，以上传到七牛云为例

　　在admin目录下，新建一个upload.js脚本，注意必定要在本地安装qiniu插件

var fs = require('fs');
var qiniu = require('qiniu');
var accessKey = 'xxx';
var secretKey = 'xxx';

var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
var staticPath = 'xxx';
var prefix = 'client/static';
var bucket = 'static';

var config = new qiniu.conf.Config();
config.zone = qiniu.zone.Zone_z1;
var formUploader = new qiniu.form_up.FormUploader(config);
var putExtra = new qiniu.form_up.PutExtra();
putExtra = null; // 必定要将putExtra设置为null，不然会出现全部文件类别都被识别为第一个文件的类型的状况
// 文件上传方法
function uploadFile (localFile) {
  // 配置上传到七牛云的完整路径
  const key = localFile.replace(staticPath, prefix)
  const options = {
     scope: bucket + ":" + key,
 }
  const putPolicy = new qiniu.rs.PutPolicy(options)
  // 生成上传凭证
  const uploadToken = putPolicy.uploadToken(mac)
  // 上传文件
  formUploader.putFile(uploadToken, key, localFile, putExtra, function(respErr, respBody, respInfo) {
    if (respErr) throw respErr
  if (respInfo.statusCode == 200) {
    console.log(respBody);
  } else {
    console.log(respInfo.statusCode);
    console.log(respBody);
  }  
})
}
// 目录上传方法
function uploadDirectory (dirPath) {
  fs.readdir(dirPath, function (err, files) {
    if (err) throw err
    // 遍历目录下的内容
    files.forEach(item => {
      let path = `${dirPath}/${item}`
      console.log(dirPath, item, path)
      fs.stat(path, function (err, stats) {
        if (err) throw err
        // 是目录就接着遍历 不然上传
         if (stats.isDirectory())  uploadDirectory(path)
         else  uploadFile(path, item)
      })
    })
  })
}

fs.exists(staticPath, function (exists) {
  if (!exists) {
    console.log('目录不存在！')
  }
  else {
    console.log('开始上传...')
    uploadDirectory(staticPath)
  }
})

　　而后，在jenkins构建过程当中配置以下代码便可

cp -r ./dist /home/xiaohuochai/blog/admin
node /home/xiaohuochai/blog/admin/upload.js

 

邮件提醒

　　在系统设置中找到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
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程