前端进阶之路-利用Jenkins快速打造前端项目自动化工做流

时间 2019-11-07

原文原文链接

三个问题（是什么？为何？怎么作？）

若是你以前没有接触过持续集成相关的知识，不免会生出标题上的三个问题，如今咱们就从上面说的三个问题开始讲起：html

是什么？

维基百科给出以下解释：前端

Jenkins是一款由Java编写的开源的持续集成工具。在与Oracle发生争执后，项目从Hudson项目复刻。 Jenkins提供了软件开发的持续集成服务。它运行在Servlet容器中（例如Apache Tomcat）。它支持软件配置管理（SCM）工具（包括AccuRev SCM、CVS、Subversion、Git、Perforce、Clearcase和RTC），能够执行基于Apache Ant和Apache Maven的项目，以及任意的Shell脚本和Windows批处理命令。Jenkins的主要开发者是川口耕介。[3]Jenkins是在MIT许可证下发布的自由软件。[4]node

说人话就是，Jenkins是一个持续集成的工具，咱们能够经过它丰富的插件系统，搭建本身须要的打包和编译环境，经过设定的触发机制，自动开始打包项目，并将打包好的项目部署到服务器。linux

为何？

一句话，我能够一个操做或者自动完成项目的打包部署工做。想看更多，点此web

怎么作？

往下看，往下看，往下看。shell

基础环境

本文以Mac-10.13.1，Jenkins-2.146，服务器为linux操做系统，代码仓库为GitLib为例npm

Jenkins的下载与安装

Jenkins下载地址

我这下载的是pkg文件，直接双击进行安装，后端

下面直接按照提示进行操做便可，安装成功以后，会自动打开浏览器显示以下页面

这个Administrator password并非你电脑的密码，而是安装的时候，Jenkins自动生成的密码，上面给出了密码存放的路径 /Users/Shared/Jenkins/Home/secrets/initialAdminPassword 在mac终端输入 sudo vi /Users/Shared/Jenkins/Home/secrets/initialAdminPassword 就能看到窗口上面有一段字符串，即为密码，复制粘贴进去便可

点击右下角的Continue按钮进入以下界面

这一步操做是让安装Jenkins的插件，有安装推荐的插件和自定义安装插件两个选项，咱们选择安装推荐的插件，以后进入插件安装界面

等待安装完成以后，若是有些插件没有安装成功，先不用管，点击Continue进入建立用户界面浏览器

建立完成以后，进入配置Jenkins地址界面，直接点击继续就能够，当全部都配置完成以后，咱们就进入到了Jenkins的主页

恭喜你，已经成功安装了Jenkins!

安装相关插件

点击Jenkins首页 系统管理》插件管理》可选插件 ,若是未安装如下插件，请自行安装。bash

NodeJs

添加Node环境，前端项目打包命令，须要依赖Node环境。安装好以后，Build Environment 会出现

Publish Over SSH 将打包好的文件上传到服务器，配置上传成功以后要执行的命令。安装完成后会出如今Post-build Actions（构建后操做）

Git Parameter

经过这个插件jenkins能够选择任意一个branch来构建代码。在配置任务 General 》参数化构建 的下拉框中，在安装这个插件以后会出现 Git Parameter 选项

GitHub Branch Source

打包以前从远程Git仓库自动拉取代码，添加以后 Source Code Management 下会出现Git选项

注意： 安装的时候，插件须要重启才能生效的，能够把下面的选择框勾选上，这样安装完插件就会自动重启

建立自动化部署任

点击首页的New 任务或者create new jobs,进入建立页面，输入项目名字，选择第一个构建一个自由风格的软件项目，

点击OK以后进入配置界面

General配置

源码管理

注意： 若是出现下面的错误

这个是权限问题，须要Git仓库的管理员，为Jenkins添加权限。

构建触发器

这个我并无配置，后面的测试会经过Jenkins直接进行Build，你能够根据你的须要选择合适的触发器

构建环境

选中Provide Node & npm bin/ folder to PATH以后，你会发现NodeJS Installation并无可选项

不要着急，点击 系统设置》全局工具配置 找到NodeJS,选择和你开发环境同样的NodeJS版本，而后点击保存

回到配置页面，刷新一下，就能正确的显示

构建

选择 执行shell 在Command窗口中填写你日常打包使用的命令，由于打包完成后要上传到服务器，因此添加了压缩文件的命令

代码

echo $WORKSPACE
node -v
npm -v

npm install&&
npm run build

cd dist
tar -acvf dist.tar.gz *
复制代码

构建后操做

在进行这个操做以前，咱们须要添加对要上传的服务器进行全局的配置，进入 系统管理》系统设置 ,找到Publish over SSH,点击Add按钮，

添加以下配置

固然，这样的配置是访问不到服务器的，密码都尚未呢，点击高级按钮，勾选 Use password authentication, or use a different key，输入密码，

好了，大功告成，咱们点击 Test Configuration 按钮，一个菊花转过以后，会出现Success字样，

最后一步，点击保存按钮。

让咱们回到配置页面，在构建后操做下选择Send build artifacts over SSH,添加以下配置，

Exec command中的代码为

tar -zxvf /data/html/delivery/dist.tar.gz -C /data/html/delivery/
rm -rf /data/html/delivery/dist*
复制代码

命令的意思是将dist.tar.gz解压到/data/html/delivery/下面，并删除dist开头的文件。

上面的命令只是完成了最基础的部署工做，项目真正上线的时候，确定是须要有备份操做的，下面是后端同事帮忙写的一个通用的shell命令，

{
    uploadFileName=dist.tar.gz;
    frontHtmlFolder=/data/html/xyz/;
    backName=xyz
    cur_time=$(date '+%Y%m%d%H%M%S');
    mkdir -p /data/html;
    mkdir -p /data/backup/;
    rm -rf $frontHtmlFolder;
    mkdir -p $frontHtmlFolder;
    tar -zxvf /data/html/$uploadFileName -C $frontHtmlFolder;
    mv /data/html/$uploadFileName /data/backup/$cur_time"_"$backName"_"$uploadFileName;
}
复制代码

uploadFileName为项目压缩文件的名字，frontHtmlFolder为项目部署的路径，backName为项目备份的名字。