我们把一个多人协作的vue前端项目发布服务器,一般要经过以下步骤:

  • git更新最新的代码
  • 构建项目
  • 把构建后的代码上传到服务器

如果用jenkins来构建的话,只需要点击一次构建按钮,就可以自动完成以上的步骤了,而且根据需求,可以实现更多的功能。

1.下载安装jenkin

1.1 java环境

jenkins需要运行在Java的环境中,所以前提是需要先安装jdk,测试jdk是否安装好,在命令行输入:java -version

1.2 下载jenkins

下载地址 jenkins下载

下载后点击安装,默认端口是8080,然后打开 http://localhost:8080/,会出现如下页面:

根据提示,输入管理员密码,,然后安装推荐插件,等待安装完毕后,然后设置登录的用户名和密码,就可以进入jenkins的页面了:

2 配置

2.1 配置远程服务器环境

首先下载插件publish over ssh:

  • 进入系统管理,然后点击插件管理

  • 搜索插件,并安装

  • 进入系统配置,配置远程服务器

  • 配置远程服务器

  • 点击右下角test configuration按钮,测试配置

2.3 配置node环境

  • 安装插件nodejs plugin

  • 配置添加node版本,点击global tool configuration

  • 添加node版本

3 构建

一些必要的插件安装配置过后,就可以开始构建项目了

3.1 新建项目

  • 点击新建项目

  • 选择项目模板

3.2 源码管理

  • 滚动页面到源码管理配置项,选择git,此配置目的是自动从远程拉取代码,



    其中URL就是项目的git的地址,credentials是git登录凭据,还可以指定项目分支,

    其中credentials如果是第一次的话,需要点击添加完成配置后,才能选择:

3.3 构建环境配置

我们这里是vue项目,所以选择node环境,并选择2.3配置node环境所配置的node版本:

3.4 构建

这一步jenkins会依次执行我们所配置的脚本,

  • 用脚本构建项目

    选择execute windows batch command,这里面就可以添加脚本,像在命令行一样

  • 上传至服务器

    点击增加构建步骤,然后选择send files or execute commands over ssh



    其中当前项目目录,如果没有更改过的话,默认在C:\Windows\System32\config\systemprofile\AppData\Local\Jenkins\.jenkins\workspace\项目名称

3.5 验证自动构建

  • 开始构建

    经过以上的配置,就已经配置好了一个jenkins项目了,返回到首页,就会有一个项目,点击构建按钮,就可以自动构建了

  • 构建历史

    点击项目名称,就可以进入到项目详情页,然后左下角会有构建历史,点击构建历史,就可以查看每次构建的控制台输出情况:



    控制台输出的信息:

这样一个最基本的vue项目的持续构建就完成啦,不需要再手动构建项目,手动上传到服务器。

jenkins自动构建前端项目(window,vue)的更多相关文章

  1. 小伙伴想学Jenkins自动构建发布项目,我:安排上了!!

    写在前面 趁着十一长假,很多小伙伴都在悄悄学习,有些是为了能够顺利通过面试,进入大厂升职加薪.有些则是为了进一步巩固和提高自己的专业技能,希望有朝一日能过成为互联网架构师乃至技术专家.这不,就有小伙伴 ...

  2. Jenkins自动构建gitlab项目(jenkins+maven+giltlab+tomcat)

    环境准备: System:CentOS 7.3 (最小化安装) JDK: 8u161 (1.8_161) tomcat: 8.5.29 Jenkins: Jenkins 2.107.1 Gitlab: ...

  3. CentOS 7.2安装Jenkins自动构建Git项目

    1.环境 本文使用VMWare虚拟机进行实验. 最终实现目标,在Jenkins服务器上新建构建任务,从Git服务器上拉取master HEAD(不编译,仅演示),部署到"目标服务器" ...

  4. jenkins 自动构建gitlab项目

    安装的plugin: - kubernetes:1.7.1    - workflow-aggregator:2.5    - workflow-job:2.21    - credentials-b ...

  5. Linux下Jenkins与GitHub自动构建Node项目(Vue)

    根据上篇文章<Linux下Jenkins与GitHub自动构建NetCore与部署>,我们知道了Jenkins的强大功能,自动构建,部署了一个NetCore的Web,让开发人员专注于开发, ...

  6. DEVOPS技术实践_02:jenkins自动构建项目

    一.用户名密码错误 打开jenkins发现用户名密码错误,解决 1.1 找到config.xml文件 [root@jenkins-master ~]# ll -a drwxr-xr-x. root r ...

  7. Yeoman自动构建js项目

    Aug 19, 2013 Tags: bowergruntJavascriptjsnodejsyeomanyo Comments: 10 Comments Yeoman自动构建js项目 从零开始nod ...

  8. Jenkins自动部署Tomcat项目

    Jenkins自动部署Tomcat项目 1.安装jenkins 插件 启动Jenkins,进入系统管理-插件管理: 选择Deploy to container Plugin 插件安装:

  9. Gitlab源码库里代码提交后,如何触发jenkins自动构建?

    版本库里代码提交后,如何触发jenkins自动构建?这是一个面试题,感觉自己回答的并不好,因为并没有用过这个功能,之前公司实际项目用的是svn版本管理,一般都用立刻构建,和定时任务构建(不管代码是否有 ...

随机推荐

  1. perfdog的基本使用

    perfdog的下载安装就不做过多介绍了,直接进入正题,首先介绍下perfdog页面的结构 如下图 1.显示连接的设备 2.选择需要测试的app 3.device tab下显示设备的基本信息,sett ...

  2. SQL 练习6

    查询在 SC 表存在成绩的学生信息 SELECT * from Student WHERE SId in (SELECT SId from SC)

  3. 【权限管理】Spring Security 执行流程

    转自:https://blog.csdn.net/weixin_37689658/article/details/92752890 1.基本配置使用 (1)创建配置类 创建一个配置类SecurityC ...

  4. 【转】分布式之redis复习精讲

    转自:https://www.cnblogs.com/rjzheng/p/9096228.html 引言 为什么写这篇文章? 博主的<分布式之消息队列复习精讲>得到了大家的好评,内心诚惶诚 ...

  5. new[]/delete[]与new/delete区别

    new[]/delete[]与new/delete完全不同-动态对象数组创建通过new[] 完成-动态对象数组的销毁通过delete[]完成-new[]/delete[]能够被重载,进而改变内存管理方 ...

  6. Git脑图

    ps:有时我们想一台有不同的git账号对应不同的git仓库时(gitLab/gitHub)时,除了全局的用户配置定义,我们可以为不同仓库自定义不同用户名和邮件 1.查询全局的配置:git config ...

  7. Spring Cloud总结

    restTemplate 消费者模块编写restTemplate配置类,即可在控制层调用提供者模块 // 配置类 @Configuration public class ApplicationCont ...

  8. 25道经典Java算法题

    题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少?   //这是一个菲波拉契数列问题 [Java] 纯 ...

  9. i++ ++i 理解

    i++与++i怎么运算,解决办法: i++规则是在表达式中先取i的值使用,后让i的值变化成加1后的值. 举例:如在式中 j=i++,他就会变成这样的两步,第一步先执行j=i,第二步执行i=i+1. + ...

  10. C# ASP.NET RAZOR 链接SQLSERVER

    @using System.Data.SqlClient; @using System.Data;//必须引用 <html> <body> <h1>Learn Sq ...