让Jenkins自动布署你的Vue项目(下)

简介: 让Jenkins自动布署你的Vue项目

安装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说明配置成功

image.png在刚才的testJenkins工程中配置构建后操作,选择send build artificial over SSH, 参数说明:

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

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

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

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

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

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

配置方法

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

image.png

2.github配置Webhook

选择github项目中的Settings->Webhooks>add webhook

配置方式按上图红框中的格式,选择在push代码时触发webhook,成功后会在下方出现一个绿色的小勾勾

image.png

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

image.png查看页面也是ok的

1.png

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

来自:SegmentFault 思否,作者:zhou_web

链接:https://segmentfault.com/a/1190000019212628

目录
相关文章
|
4天前
|
jenkins Java 持续交付
运用Jenkins实现Java项目的持续集成与自动化部署
在新建的Jenkins Job中,我们需要配置源码管理,通常选择Git、SVN等版本控制系统,并填入仓库地址和凭据。接着,设置构建触发器,如定时构建、轮询SCM变更、GitHub Webhook等方式,以便在代码提交后自动触发构建过程。
25 2
|
1天前
|
JavaScript
文本,wangEditor5的基本使用,开发文档地址,wangEditor5用于Vue3项目,想要使用好wangEditor项目,得看开发文档
文本,wangEditor5的基本使用,开发文档地址,wangEditor5用于Vue3项目,想要使用好wangEditor项目,得看开发文档
|
5天前
|
JavaScript 开发工具 git
大事件项目40---Vue代码里如何引入相对路径图片
大事件项目40---Vue代码里如何引入相对路径图片
|
8天前
Vue3项目 小兔鲜问题总结
Vue3项目 小兔鲜问题总结
17 2
|
1天前
|
JavaScript
vue 创建项目、运行项目、访问项目(vue2版)
vue 创建项目、运行项目、访问项目(vue2版)
7 0
|
2天前
|
JavaScript
vue项目打包后自动压缩成zip文件
vue项目打包后自动压缩成zip文件
5 0
|
3天前
|
Java jenkins 持续交付
Jenkins是开源CI/CD工具,用于自动化Java项目构建、测试和部署。通过配置源码管理、构建触发器、执行Maven目标,实现代码提交即触发构建和测试
【7月更文挑战第1天】Jenkins是开源CI/CD工具,用于自动化Java项目构建、测试和部署。通过配置源码管理、构建触发器、执行Maven目标,实现代码提交即触发构建和测试。成功后,Jenkins执行部署任务,发布到服务器或云环境。使用Jenkins能提升效率,保证软件质量,加速上线,并需维护其稳定运行。
16 0
|
7天前
|
JavaScript Shell
创建第一个vue项目
创建第一个vue项目
9 0
|
2月前
|
jenkins Java 持续交付
【项目集成工具】Jenkins
【项目集成工具】Jenkins
|
18天前
|
jenkins Java 持续交付
蓝易云 - 从零开始配置Jenkins与GitLab集成:一步步实现持续集成
以上就是从零开始配置Jenkins与GitLab集成的步骤,希望对你有所帮助。
37 2