前端自动化部署jenkins(三)：jenkins自动构建

1.下载源码安装包

cd ~ wget https://nodejs.org/dist/v14.15.4/node-v14.15.4-linux-x64.tar.xz

2.解压并放入指定目录

tar -xf node-v14.15.4-linux-x64.tar.xz mv node-v14.15.4-linux-x64 /usr/local/node

3.建立软连接

cd /usr/bin
ln -s /usr/local/node/bin/node node
ln -s /usr/local/node/bin/npm npm

1.登录GitHub，进入要本次构建用到的工程；

2.在工程主页面点击右上角的"Settings"，再点击左侧"Webhooks"，然后点击“Add webhook”，如图：

3. 输入Payload URL，点击Add webhook

注：
webhook是通知Jenkins时的请求地址，用来填写到GitHub上，这样GitHub就能通过该地址通知到Jenkins；
假设Jenkins所在服务器的地址是：192.168.0.1，端口为8080，那么webhook地址就是http://192.168.0.1:8080/github-webhook

再次提醒，上述地址必须是外网也能访问的，否则GitHub无法访问到Jenkins。

Jenkins访问GitHub工程的时候，有的操作是需要授权的，所以我们要在GitHub上生成授权的token给Jenkins使用，这就是Personal access tokens，生成步骤如下：

1.登录GitHub，进入"Settings"页面:



2.点击左下角"Developer settings"，如下图：

3.跳转到"Developer settings"页面后，点击左下角的“Personal access tokens”，如下图：

4.跳转到"Personal access tokens"页面后，点击右上角的"Generate new token"按钮，如下图：

5.输入GitHub密码，输入后跳转到创建token的页面，如下图所示，输入title，再勾选"repo"和"admin:repo_hook"，再点击底部的"Generate token"按钮，就能产生一个新的access token，将此字符串复制下来，后面jenkins任务中会用到：

1.GitHub Plugin插件，在"系统管理->管理插件"位置检查此插件是否已经安装，没有的话请先安装；

2.配置GitHub，点击“系统管理->系统设置”，如下图：

3.在系统设置页面找到"GitHub"，配置一个"GitHub Server"，如下图

“API URL"填写"https://api.github.com", "凭据"位置如下图红框所示，选择"添加->Jenkins”：

4.弹出的页面中，“Kind"选择"Secret text”，"Secret"填入前面在GitHub上生成的Personal access tokens，Description随便写一些描述信息，如下图：

5.填写完毕后，凭据下拉框选择上一步添加的，点击右侧的"连接测试"按钮，如果信息没有填错，显示的内容如下图所示：

6.点击页面最底部的"保存"按钮。

1.新建任务

2.输入任务名称，选择Freestyle project,点击确定

3.进入配置页面

(1)丢弃旧的构建

为避免构建次数过多占用磁盘空间，会导致构建失败，需勾选该选项，设置构建的最大个数

(2)源码管理

注：
“Credentials"创建一个Credentials，Kind选择"Username with password”，Username输入GitHub账号，Password输入GitHub密码，如图：

(3)构建触发器

(4)构建环境

(5)添加构建步骤

#!/bin/sh -l
cd /root/.jenkins/workspace/vue-demo
npm config set user 0
npm config set unsafe-perm true
npm install --registry=https://registry.npm.taobao.org
npm run build
cp -r /root/.jenkins/workspace/vue-demo/dist/* /data/webserver/static_content/vue-demo

4.保存后，点击立即构建即可

5.查看构建详情

6.查看控制台输出，验证是否构建成功

7.构建成功标识

回到Jenkins该项目，可以看到已经开始自动构建了，如下图：

点击查看变更记录：

构建成功后输入项目访问地址，可以看到网页已同步更新。

至此，GitHub提交触发Jenkins自动构建的实战大功告成！！！

文章参考
向GitHub提交代码时触发Jenkins自动构建