让Jenkins帮你自动布署Vue项目

「爱情、让人受尽委屈。」 2023-01-17 04:42 159阅读 0赞

![59e7fd57c1b50b1ff58b3ca753820e1b.png][]

作者: zhou\_web

https://segmentfault.com/a/1190000019212628

### 实现目标    ###

本地push代码到GitHub，Webhook自动触发jenkins上的构建动作,完成安装node插件并且打包，然后通过Publish Over SSH插件，将打包出来的文件，部署到目标服务器上。

### 前期准备 ###

1.  github 账号和项目
2.  centos 服务器;
3.  服务器安装 Java SDK;
4.  服务器安装 nginx + 启动；
5.  服务器安装jenkins + 启动；

### jenkins介绍 ###

Jenkins是开源的,使用Java编写的持续集成的工具，在Centos上可以通过yum命令行直接安装。Jenkins只是一个平台，真正运作的都是插件。这就是jenkins流行的原因，因为jenkins什么插件都有。

#### 首先登录服务器更新系统软件 ####

$ yum update

#### 安装Java和git ####

$ yum install java
    $ yum install git

#### 安装nginx ####

$ yum install nginx //安装
    $ service nginx start //启动

出现Redirecting to /bin/systemctl start nginx.service

说明nginx已经启动成功了，访问http://你的ip/，如果成功安装会出来nginx默认的欢迎界面

![2c51380fc1e8bc9f119270e5ffb67038.png][] image

#### 安装Jenkins ####

$ wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
    rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key 
    
    $ yum install jenkins //完成之后直接使用 yum 命令安装 Jenkins
    
    $ service jenkins restart  //启动 jenkins

jenkins启动成功后默认的是8080端口，浏览器输入你的服务器 ip 地址加8080 端口就可以访问了。

![f08dd11bcf55560d51cd3389f5f4023b.png][] image

输入 cat /var/lib/jenkins/secrets/initialAdminPassword 查看初始密码

这里我们选择推荐通用插件安装即可，选择后等待完成插件安装以及初始化账户

![a21a5e052ffce387ac4f5c3591d38cdf.png][] image ![d6bc4c881d7325d2d47e09a4970fefeb.png][] image ![666365c4e26778048eabe1b2f143fc02.png][] image

然后安装两个推荐的插件 Rebuilder  
SafeRestart

### 在jenkins中安装nodeJs插件 ###

因为我们的项目是要用到node打包的，所以先在jenkins中安装nodeJs插件，安装后进入全局工具配置，配置一个我们要用到的node版本。

![3e0ed49efdcb6cc5f1e4cff5808923d5.png][] image ![86b86fbc09968eb7fe24ecb18425da57.png][] image

### 创建任务 ###

1.  点击创建一个新任务

![c6956057f075b78ffea4ace8322b84e9.png][] image ![d06d9352731fffa2ce917e94056df858.png][] image

1.  jenkins关联 GitHub项目地址

![c79a4d98086dc331c980b4c423e59275.png][] image

1.  选择构建环境并编写shell 命令

![0c43a5f87bd5eb33814bc495df9fc306.png][] image

配置完成后点击立即构建，等待构建完，点击工作空间，可以发现已经多出一个打包后的dist目录。点击控制台输出可以查看详细构建log

![d74520c96f36cd6de02a98ad8a27e6db.png][] image ![7c6edeeb64a9515ee1b516a76370b553.png][] image ![7053d4db9095af939f0bacdd13aa48d2.png][] image

到这里已经实现了本地代码提交到github，然后在jenkins上点击构建，可以拉取代码并且打包，下一步实现打包后的dist目录放到目标服务器上。

### 安装Publish Over SSH 插件，我们将通过这个工具实现服务器部署功能。 ###

安装完成后在系统管理-> 系统设置->Publish over SSH  
里设置服务器信息

Passphrase：密码（key的密码，没设置就是空）
    Path to key：key文件（私钥）的路径
    Key：将私钥复制到这个框中(path to key和key写一个即可)
    
    SSH Servers的配置：
    SSH Server Name：标识的名字（随便你取什么）
    Hostname：需要连接ssh的主机名或ip地址（建议ip）
    Username：用户名
    Remote Directory：远程目录（上面第二步建的testjenkins文件夹的路径）
    
    高级配置：
    Use password authentication, or use a different key：勾选这个可以使用密码登录，不想配ssh的可以用这个先试试
    Passphrase / Password：密码登录模式的密码
    Port：端口（默认22）
    Timeout (ms)：超时时间（毫秒）默认300000

这里配置的是账号密码登录，填写完后点击test，出现Success说明配置成功

![ac72d5d4c6b3b9d025ab09553b832dfc.png][] image

在刚才的testJenkins工程中配置**构建后操作**，选择send build artificial over SSH， 参数说明：

Name:选择一个你配好的ssh服务器
    Source files ：写你要传输的文件路径
    Remove prefix ：要去掉的前缀，不写远程服务器的目录结构将和Source files写的一致
    Remote directory ：写你要部署在远程服务器的那个目录地址下，不写就是SSH Servers配置里默认远程目录
    Exec command ：传输完了要执行的命令，我这里执行了进入test目录,解压缩,解压缩完成后删除压缩包三个命令

注意在构建中添加压缩dist目录命令

![41f0eee4ffa4e12238da70ec898ca847.png][] image

填完后执行构建。成功后登录我们目标服务器发现test目录下有了要运行的文件

![fa27991b8dbe9a9139c08761dea559cf.png][] image

访问域名发现项目可以访问了

![40cfe431b26acc94794bcbb03474cdc4.png][] image

接下来实现开发本地push代码到github上后，触发Webhook，jenkins自动执行构建。

1.  jenkins安装Generic Webhook Trigger 插件
2.  github添加触发器

### 配置方法 ###

1.在刚才的testJenkins工程中点击构建触发器中选择Generic Webhook Trigger，填写token

![21fa1fe116ab94528e4ac6d3fc67e1ee.png][] image

2.github配置Webhook  
选择github项目中的Settings->Webhooks>add webhook  
配置方式按上图红框中的格式，选择在push代码时触发webhook，成功后会在下方出现一个绿色的小勾勾

![7cba75721b3c8caa138ae26d26488d0a.png][] image

测试一下，把vue项目首页的9900去了，然后push代码去github，发现Jenkins中的构建已经自动执行，

![4cf8a4b82693394516bc3adb3554b7dc.png][] image

查看页面也是ok的

![41daf1ae77c833f65e63b4de40e62f1c.png][] image

一套简单的前端自动化工作流就搭建完成，是选择代码push后在Jenkins中手动构建，还是push后自动构建，看公司情况使用。

[59e7fd57c1b50b1ff58b3ca753820e1b.png]: /images/20221022/8615a08f97a44c8caeef0bc392dd5493.png
[2c51380fc1e8bc9f119270e5ffb67038.png]: /images/20221022/3b9604bf14ee46018935b1aff3d9bbdc.png
[f08dd11bcf55560d51cd3389f5f4023b.png]: /images/20221022/5f5194094ef64f89873493141b069d4f.png
[a21a5e052ffce387ac4f5c3591d38cdf.png]: https://img-blog.csdnimg.cn/img_convert/a21a5e052ffce387ac4f5c3591d38cdf.png
[d6bc4c881d7325d2d47e09a4970fefeb.png]: https://img-blog.csdnimg.cn/img_convert/d6bc4c881d7325d2d47e09a4970fefeb.png
[666365c4e26778048eabe1b2f143fc02.png]: /images/20221022/bc274a8fe7de468ea73319972f2262c3.png
[3e0ed49efdcb6cc5f1e4cff5808923d5.png]: https://img-blog.csdnimg.cn/img_convert/3e0ed49efdcb6cc5f1e4cff5808923d5.png
[86b86fbc09968eb7fe24ecb18425da57.png]: /images/20221022/ed056ed98dda474ea90b6d129d9331d0.png
[c6956057f075b78ffea4ace8322b84e9.png]: https://img-blog.csdnimg.cn/img_convert/c6956057f075b78ffea4ace8322b84e9.png
[d06d9352731fffa2ce917e94056df858.png]: /images/20221022/fc0aaa2092f2446a898f3aaabb400755.png
[c79a4d98086dc331c980b4c423e59275.png]: /images/20221022/6262ebfafd40410da295d2b93085ffa6.png
[0c43a5f87bd5eb33814bc495df9fc306.png]: /images/20221022/49b71508e48e41b0a902ae9fd5a2fa80.png
[d74520c96f36cd6de02a98ad8a27e6db.png]: https://img-blog.csdnimg.cn/img_convert/d74520c96f36cd6de02a98ad8a27e6db.png
[7c6edeeb64a9515ee1b516a76370b553.png]: https://img-blog.csdnimg.cn/img_convert/7c6edeeb64a9515ee1b516a76370b553.png
[7053d4db9095af939f0bacdd13aa48d2.png]: /images/20221022/94015fd90cb74f3f8b4104cf34519560.png
[ac72d5d4c6b3b9d025ab09553b832dfc.png]: /images/20221022/f8772bed5e394309942be2318f472c0a.png
[41f0eee4ffa4e12238da70ec898ca847.png]: /images/20221022/c08aad77352742b7be3f8c49474136a2.png
[fa27991b8dbe9a9139c08761dea559cf.png]: /images/20221022/bd2dd6cfe1f4489a9be420863ecea032.png
[40cfe431b26acc94794bcbb03474cdc4.png]: /images/20221022/a46bd98c339c4ab19abb7c2de14af09f.png
[21fa1fe116ab94528e4ac6d3fc67e1ee.png]: /images/20221022/d5b19fb79b5d4c5f99221710b58d84c9.png
[7cba75721b3c8caa138ae26d26488d0a.png]: /images/20221022/abea39955d1a4b329a31a5ae03d59dd9.png
[4cf8a4b82693394516bc3adb3554b7dc.png]: /images/20221022/96487e82779d4ad18bd5462f73cade4d.png
[41daf1ae77c833f65e63b4de40e62f1c.png]: /images/20221022/e2d4faadbe264e1e813344ba4617b5c7.png