Jenkins自动部署笔记(四)自动部署vue项目

1.新建任务

2.填写任务名称，选择“构建一个自由风格的软件项目”，点击OK按钮。

3.在“General”选项卡中填写该任务的描述信息（可以不写）。因为在Jenkins自动部署过程中会产生很多打包信息，因此为了减少对存储空间的占用，这里我们选择丢弃旧的构建，并设置保持构建的天数为3，保持构建的最大个数为10，也可以根据自己的需求进行设置。

4.切换到“源码管理”选项卡，我们的代码是托管在Gitlab，所以这里选择Git，输入项目的Git地址。

此时会提示“无法连接仓库”的错误，是因为没有连接的权限，在“Credentials”中选择上一节配置好的Gitlab凭据后就不会报错。如图。

在这里也可以通过“添加”新的凭据解决。在指定分支中填写“*/master”，表示拉取“master”分支代码，可以根据实际情况填写。

5.构建触发器，我们先不管，这需要和Gitlab配合使用，主要作用是可以让提交代码触发自动构建。

6.构建环境，勾选“Provide Node & npm bin/ folder to PATH”，“NodeJS Installation”选择在Jenkins自动部署笔记（二）中安装好的NodeJS。

7.构建，点击增加构建步骤，选择“执行shell”。

编写脚本

# 脚本解释
cd /root/.jenkins/workspace/project-test  #进入project-test项目根目录
npm get registry #获取npm注册信息
npm config set registry http://registry.npm.taobao.org #地址改为淘宝镜像地址，为了下载包的速度
npm install #安装依赖
npm run build:beta #打包项目

8.构建后操作，点击增加构建后操作按钮，选择“Send build artifacts over SSH”。

选择Jenkins自动部署笔记（三）中配置好的某台服务器。Source files填写“dist/**”表示项目打包后dist文件夹下的所有文件，vue项目打包默认文件加夹为dist。Remote directory填写远程服务器中用于存放项目文件的文件夹路径，表示打包好的文件要上传到的远程服务器路径。

9.点击保存按钮，至此，自动部署任务创建成功。找到刚才创建的任务，点击“立即构建”进行测试。

此时可以切换到控制台输出中查看详细执行过程。