前端自动化部署jenkins(三)：jenkins自动构建
Jenkins自动构建
一、Linux 安装npm
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
二、Github配置
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。
三、GitHub生成Personal access tokens
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任务中会用到：
四、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.构建成功标识
六.修改web工程代码并提交到GitHub
七.Jenkins自动构建
回到Jenkins该项目，可以看到已经开始自动构建了，如下图：
八.验证自动构建结果
点击查看变更记录：
构建成功后输入项目访问地址，可以看到网页已同步更新。
至此，GitHub提交触发Jenkins自动构建的实战大功告成！！！
文章参考
向GitHub提交代码时触发Jenkins自动构建