jenkins自动构建前端项目(window,vue)

2021-09-25

我们把一个多人协作的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项目的持续构建就完成啦,不需要再手动构建项目,手动上传到服务器。