是时候让自己掌握一款自动化构建工具了

后端："麻烦给我一份XXXX版本的包"；
前端："***，XXX版本有别的版本没有的依赖包，又得切分支还得卸载无用的包，还好我搭了Jenkins"
前端: "好了，你去XXX环境上自己拿吧！"

我们身为前端有时候也需要对项目的不同版本进行控制，这时候自动化构建就能解决我们工作区上对应不同版本有着不同依赖的需求，以下我们来看下怎么去搭建属于自己的自动化构建吧（jenkins）。

1、搭建前的环境准备

这边需要Linux的支持，我这边是叫运维帮我新起一个1段（带外网，方便下载运行环境）的服务器。
JDK11以上的环境（注意：当前jenkins支持的Java版本最低为Java11）。
安装Maven。
Git环境。

我这开始一步步带着安装，老手可以直接跳到搭建配置。

2、安装JDK11

arduino 复制代码

// 注意：没有yum可以利用apt-get install yum 来安装yum

 yum list java* // 查看所有的JDK版本，找到java-11-openjdk.x86_64
 
 yum install java-11-openjdk.x86_64 // 安装JDK11
 
 java -version  // 如果安装成功，就可以查看当前版本

3、安装Maven

安装：

bash 复制代码

cd /usr/loca  // 安装目录

wget https://archive.apache.org/dist/maven/maven-3/3.6.3/binaries/apache-maven-3.6.3-bin.tar.gz // 根据需要下载对应版本

tar -vxf apache-maven-3.6.3-bin.tar.gz // 解压

mv apache-maven-3.6.3 maven // 修改文件名

修改环境变量：

bash 复制代码

vim /etc/profile  // 进到配置文件

// 按 ins键进入编辑状态，写入以下配置，按esc 输入wq保存
export MAVEN_HOME=/usr/local/maven
export PATH=${PATH}:${MAVEN_HOME}/bin

source /etc/profile  // 需要重新加载/etc/profile文件以使更改生效

mvn -v   // 查看Maven版本

4、安装git

scss 复制代码

yum install git // 直接装

git --version // 查看当前git版本

5、安装Jenkins

安装Jenkins镜像源

arduino 复制代码

mkdir jenkins && cd jenkins // 创建Jenkins文件夹，并进入Jenkins文件夹

wget https://updates.jenkins-ci.org/latest/jenkins.war // 远程下载Jenkins的war包

nohup java -jar jenkins.war --httpPort=8088 // 执行启动命令

这时终端可能存在无法输入的情况，我们另起终端,输入下面命令查看服务是否在运行

arduino 复制代码

netstat -tlnp // 查看TCP协议进程端口

这时我们发现8088端口被运行了

接着，我们去浏览器输入IP+端口。

哟，这不就成功了？我们紧接着配置。

6、配置Jenkins

我们部署Jenkins的时候，会生成一个密码文件-initialAdminPassword，不知道路径的我们一步步找

arduino 复制代码

cd / && find -name 'initialAdminPassword' // 进入/ 全举查找文件名为initialAdminPassword的文件

查到之后我们查看当前文件内容

bash 复制代码

cat ~/.jenkins/secrets/initialAdminPassword

这就是默认密码啦，我们复制粘贴到刚刚打开的Jenkins界面，回车，登录成功之后会出现以下界面

之后我们跳过自定义Jenkins，点击开始使用Jenkins，进入如下界面

紧接着，我们汉化下Jenkins操作界面，不想汉化的可以跳过此配置

点击界面的Manage Jenkins 》 Plugins 》 Available plugins 搜索chinese，之后我们按install就好了

记得在下载页面勾选重启Jenkins配置，重启完之后就汉化成功啦

接下来我们安装GitHub插件，流程跟安装汉化插件一致，我就直接输出结果了

记得勾选，不然得手动重启

趁下载的功夫，我们打开GitHub官网 settings 》 Developer settings 选择Personal Access Token --> Generate new token, 新建一个有读写权限的用户。

创建好之后复制下面密钥

接下来我们回到Jenkins配置页面配置GitHub 系统管理 => 系统设置 => Github Server 添加信息

之后添加Jenkins凭证 select选项为刚刚得到的GitHub 密钥

选择凭证，测试链接，得到以下信息

点击保存，接下来配置java环境，首先回到我们终端

php 复制代码

echo $JAVA_HOME // 查看下我们JAVA的环境变量

如果没有不要着急，我们先进入系统环境配置文件，这里跟配置MAVEN环境变量操作一致，解释下上文为什么没配置Java环境变量却能打印。因为我们是直接通过运行java命令，系统将使用默认的Java安装来执行该命令，并打印版本信息的。

bash 复制代码

which java 先查看java安装在哪

vi /etc/profile // 编辑环境变量文件，写入下面两行，并wq保存

export JAVA_HOME=/usr/bin/java
export PATH=$JAVA_HOME/bin:$PATH

source /etc/profile  // 需要重新加载/etc/profile文件以使更改生效

这时我们再echo输出Java环境变量

然后我们拿到Jenkins上配置，点保存

之后回到首页，点新建任务，选择自由风格，点确定

之后弹出构建配置，我们往下拉，找到Build Steps，如果没弹出可以根据标签页找到对应配置

bash 复制代码

cd /test // 事先创建好文件
git clone https://github.com/LIAOJIANS/sa-ui.git // 可为你GitHub上的私人仓库，或者开放性仓库
cd sa-ui
npm install
npm run build

回到我们项目首页，然后点击立即构建

呀，好家伙你会发现红XX，这代表我们构建失败了

点击构建项目日志，查看控制台输出，好家伙原来没有node环境

老规矩，安装node环境，并添加软连接

ruby 复制代码

wget https://nodejs.org/dist/v14.5.0/node-v14.5.0-linux-x64.tar.gz // 去官网找到指定版本的node

tar -zxvf node-v14.5.0-linux-x64.tar.gz -C /usr/local/ // 解压到指定目录（/usr/local）

mv node-v14.5.0-linux-x64/ nodejs // 重命名为nodejs

// 把node和npm创建软链接到/usr/local/bin/目录下，系统在使用命令时，默认会到/usr/local/bin/读取命令。
ln -s /usr/local/nodejs/bin/node /usr/local/bin/node 
ln -s /usr/local/nodejs/bin/npm /usr/local/bin/npm

然后我们再换一下NPM源镜像

arduino 复制代码

    npm config set registry https://registry.npmmirror.com/  // 新淘宝源地址
npm config get registry

然后我们再回到Jenkins进行构建

看到success就证明构建完成啦，现在我们就可以跟后端说，你自己去XXX服务器，XXX路径拿，如果想一键推送到后端服务器请参考，前端黑科技篇章之scp2，让你一键打包部署服务器这篇文章，可以在Jenkins配置上传路径和命令等等。

完结撒花，感谢耐心观看的你们。