【Vuejs】让 Jenkins 帮你自动布署 Vue 项目

矫情吗；* 2022-10-16 11:27 114阅读 0赞

![4e783669de39f82b010902fecb3d55b6.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默认的欢迎界面

![0c980dd9c67fa447ac21d28b2ca19c30.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 端口就可以访问了。

![2bbbbf256d3cf4a459faf193ec5ba97f.png][] image

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

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

![6601e11614854e6733b30a077c7abc90.png][] image ![84595189c809e192778bbb1294cfd13d.png][] image ![599293e43b582cadf6d3fa6bcbef42fe.png][] image

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

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

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

![c6d00ba7a49b97cb3b5fd4fe8c66c4c0.png][] image ![47153e4dcf3d8a829af284ae97d96b58.png][] image

### 创建任务 ###

1.  点击创建一个新任务

![f757628dd9fdd98569f265be0869fd09.png][] image ![d82260207a75367e08b80071fbf68052.png][] image

1.  jenkins关联 GitHub项目地址

![33902959748ee016ea7bb6f9f885734a.png][] image

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

![dbac8cbd4bdb4c4942403aa67ffcd8c6.png][] image

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

![f8f557e34d34c221b11e0492f750cf05.png][] image ![953dd91c27b2a7501f213b315ebc6adf.png][] image ![d327fabde268909bde428d6b73769ad5.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说明配置成功

![248a222149749860bffd305d69de0140.png][] image

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

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

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

![66b62aa485f77e50d37d5d52179aaf57.png][] image

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

![dbc1a375132855006f266f6def34e534.png][] image

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

![51f977ea12f3ac2ad0160121d4edc2f2.png][] image

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

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

### 配置方法 ###

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

![9cfeafd3e898200ead782b5e0e251409.png][] image

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

![f1c82b31d625bd8b5bf89a5c85736d7e.png][] image

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

![f98dad077fc5f16ce7bdc8d310b140b9.png][] image

查看页面也是ok的

![21688b2cae850b1225c93eb0557ff077.png][] image

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

![b9f77cf28b7ba5c305c61b363877c934.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![bb2dc8181f84bee6e4633b8e4f5d143a.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[4e783669de39f82b010902fecb3d55b6.png]: /images/20221014/621c0b0cff9641fdb46db96439c66ed0.png
[0c980dd9c67fa447ac21d28b2ca19c30.png]: /images/20221014/ab7b158b9ce94d85b00323c1117073ca.png
[2bbbbf256d3cf4a459faf193ec5ba97f.png]: /images/20221014/eda5ba35f8cb4d15814b5ab93ca152a7.png
[6601e11614854e6733b30a077c7abc90.png]: https://img-blog.csdnimg.cn/img_convert/6601e11614854e6733b30a077c7abc90.png
[84595189c809e192778bbb1294cfd13d.png]: https://img-blog.csdnimg.cn/img_convert/84595189c809e192778bbb1294cfd13d.png
[599293e43b582cadf6d3fa6bcbef42fe.png]: /images/20221014/9193a0386c6642818c4030eb879cf417.png
[c6d00ba7a49b97cb3b5fd4fe8c66c4c0.png]: https://img-blog.csdnimg.cn/img_convert/c6d00ba7a49b97cb3b5fd4fe8c66c4c0.png
[47153e4dcf3d8a829af284ae97d96b58.png]: /images/20221014/8ebc80fd9f8d41fa97c57998bf8935ca.png
[f757628dd9fdd98569f265be0869fd09.png]: https://img-blog.csdnimg.cn/img_convert/f757628dd9fdd98569f265be0869fd09.png
[d82260207a75367e08b80071fbf68052.png]: /images/20221014/bc279a297c8e4889be8b4640909b7d8b.png
[33902959748ee016ea7bb6f9f885734a.png]: /images/20221014/7d72e0c5d0b64a42b3d0cc897f84175d.png
[dbac8cbd4bdb4c4942403aa67ffcd8c6.png]: /images/20221014/3355799558a141b2983e4e7b66f4b070.png
[f8f557e34d34c221b11e0492f750cf05.png]: https://img-blog.csdnimg.cn/img_convert/f8f557e34d34c221b11e0492f750cf05.png
[953dd91c27b2a7501f213b315ebc6adf.png]: https://img-blog.csdnimg.cn/img_convert/953dd91c27b2a7501f213b315ebc6adf.png
[d327fabde268909bde428d6b73769ad5.png]: /images/20221014/39ca9d608a4b41278460bd68aad912e8.png
[248a222149749860bffd305d69de0140.png]: /images/20221014/5655c95621014c46950309428cebbaea.png
[66b62aa485f77e50d37d5d52179aaf57.png]: /images/20221014/688df88934614b31894cb8a45262ea42.png
[dbc1a375132855006f266f6def34e534.png]: /images/20221014/ef19576c04984677875a57bb0af00088.png
[51f977ea12f3ac2ad0160121d4edc2f2.png]: /images/20221014/f6114750a2b84e209c7ff7989fdc14ea.png
[9cfeafd3e898200ead782b5e0e251409.png]: /images/20221014/cd66e82c96e84c55ba32e27842410200.png
[f1c82b31d625bd8b5bf89a5c85736d7e.png]: /images/20221014/9c45d85ac74a4140b0a5bb05cd79dcdc.png
[f98dad077fc5f16ce7bdc8d310b140b9.png]: /images/20221014/6f929f1d6f2b402c8971a1630427869d.png
[21688b2cae850b1225c93eb0557ff077.png]: /images/20221014/2e879b322b2f4d7fa09259d6dc0b0318.png
[b9f77cf28b7ba5c305c61b363877c934.gif]: /images/20221014/ea83adbd85ff4436a9eb6f8a621561ef.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[bb2dc8181f84bee6e4633b8e4f5d143a.gif]: /images/20221014/44908cb4c52b4311af36f0f2cc55a38f.png