一、环境说明

本地环境:WINDOW 7

服务器环境:WINDOW SERVER 2008 R2

代码集成:github

辅助工具:花生壳

二、本地安装jenkins




jenkins配置跳板机 jenkins自动部署前端_前端



安装完成后,会提示输入密码:

默认密码在:/Jenkins/secrets/initialAdminPassword 文件里面




jenkins配置跳板机 jenkins自动部署前端_jenkins配置跳板机_02



注意:jenkins是部署在本地的,默认端口为 8080;

浏览器进入Jenkins,登录地址为: http://localhost:8080/;

关闭Jenkins的地址为: http://localhost:8080/exit;

重启Jenkins的地址为: http://localhost:8080/restart;

重新加载配置信息: http://localhost:8080/reload;

随后,安装Jenkins插件,两种方式都可以,如果知道自己想要安装什么插件可点击自定义安装,也可以默认安装。




jenkins配置跳板机 jenkins自动部署前端_前端_03



接下来会看到如下安装界面,这个过程有点慢,耐心等待就好。

jenkins配置跳板机 jenkins自动部署前端_jenkins_04

创建用户,也可以使用admin账户继续使用,进入之后可以自行修改密码。

jenkins配置跳板机 jenkins自动部署前端_jenkins_05

完成后正式进入主界面

jenkins配置跳板机 jenkins自动部署前端_jenkins配置跳板机_06

jenkins配置跳板机 jenkins自动部署前端_jenkins_07

 如果是通过默认admin进入的,可以自行修改密码

jenkins配置跳板机 jenkins自动部署前端_运维_08

 

jenkins配置跳板机 jenkins自动部署前端_前端_09

三、Jenkins实现自动化部署

1、准备Github项目,这里我以前端React项目为例

2、在Github上生成一个token

点击右上角的 Github --> setting --> Developer settting --> Personal access tokens -> 点击Generate new token 填写如下所示的内容:

jenkins配置跳板机 jenkins自动部署前端_jenkins配置跳板机_10

创建成功后,会生成一个token的值如下:

jenkins配置跳板机 jenkins自动部署前端_jenkins配置跳板机_11

3、用花生壳把Jenkins的域名进行内网穿透




jenkins配置跳板机 jenkins自动部署前端_ci/cd_12






jenkins配置跳板机 jenkins自动部署前端_jenkins配置跳板机_13


 

jenkins配置跳板机 jenkins自动部署前端_jenkins配置跳板机_14

4、在指定Github指定项目上设置Github webhooks




jenkins配置跳板机 jenkins自动部署前端_jenkins配置跳板机_15



5、安装Jenkins 插件:nodejs、ftp

点击 Manage Jenkins -> Manage Plugins -> 可选插件, 如下图所示:




jenkins配置跳板机 jenkins自动部署前端_jenkins_16



jenkins配置跳板机 jenkins自动部署前端_运维_17

 

jenkins配置跳板机 jenkins自动部署前端_jenkins配置跳板机_18

 

jenkins配置跳板机 jenkins自动部署前端_jenkins配置跳板机_19

6、在jenkins上绑定第二步生成的token

Manage Jenkins -> Configure System -> Github -> 点击添加Github服务器, 如下图所示:

jenkins配置跳板机 jenkins自动部署前端_jenkins配置跳板机_20

API URL 默认为:https://api.github.com,我们不动它,然后凭据点击 Add添加,如下图所示:

jenkins配置跳板机 jenkins自动部署前端_jenkins配置跳板机_21

8、设置Jenkins中Github配置

如上,我们之前已经生成了token之后。在如上配置中,我们页面中的类型选择 Secret text,在Secret中黏贴Github生成的Token,id和描述可以随便写,或不填。

最后点击添加按钮后,会回到主页面,在凭据中选择我们刚才创建的凭据,然后我们点击 "链接测试"。如果没有成功的话,则需要返回重新操作以上步骤,如下所示,我们只要点击保存完成配置即可,如下图所示:

jenkins配置跳板机 jenkins自动部署前端_前端_22

到这里,基础配置已经完成了。

四、创建任务

1、全局设置GIT、NODE版本




jenkins配置跳板机 jenkins自动部署前端_jenkins_23


 如果设置git名称报错,不用在意他,继续往下

jenkins配置跳板机 jenkins自动部署前端_运维_24

jenkins配置跳板机 jenkins自动部署前端_jenkins_25

点击保存即可!

2、创建任务

点击创建一个新任务,如下图所示:

jenkins配置跳板机 jenkins自动部署前端_jenkins配置跳板机_26

输入一个任务名称,比如叫 testJekins, 然后选择第一项即可。如下图所示:

jenkins配置跳板机 jenkins自动部署前端_jenkins_27

因此准备工作已经完成了,我们输入任务名称后,选择第一项后,点击底部的确定按钮,就可以进入下一步的页面了,如下图所示:

jenkins配置跳板机 jenkins自动部署前端_jenkins配置跳板机_28

jenkins配置跳板机 jenkins自动部署前端_前端_29

 

jenkins配置跳板机 jenkins自动部署前端_前端_30

截止到目前位置,如果运行构建是可以从git上拉取成功的,git 提交->触发钩子->进入构建队列->开始构建




jenkins配置跳板机 jenkins自动部署前端_jenkins_31



五、上传至服务器

1、在服务器上设置一个FTP站点




jenkins配置跳板机 jenkins自动部署前端_jenkins_32



2、全局配置FTP




jenkins配置跳板机 jenkins自动部署前端_前端_33


 

jenkins配置跳板机 jenkins自动部署前端_运维_34

3、配置构建后操作

回到任务配置列表中,找到FTP

 

jenkins配置跳板机 jenkins自动部署前端_jenkins配置跳板机_35

六、测试部署

jenkins配置跳板机 jenkins自动部署前端_jenkins_36

jenkins配置跳板机 jenkins自动部署前端_jenkins_37

 

jenkins配置跳板机 jenkins自动部署前端_前端_38

七、遇到的问题,以及解决方式

1、执行构建命令的时候,无论怎么写构建脚本都提示失败,具体参数及解决方式请见博问

2、执行FTP上传代码的时候,总有一两个文件没有上传上去,具体参数及解决方式请见博问