使用jenkins自动化部署Vue-cli项目

懒是第一生产力！

其实在这个 vue-cli 项目之前，这个 hexo 的博客已经使用 jenkins 进行了自动化部署设置，只是因为懒没写文章来介绍配置过程。这次在部署 vue-cli 项目时遇到了一些新坑，所以记录一下，本篇文章从创建 jenkins 新任务开始，并不会介绍 jenkins 的安装配置过程。

创建一个新任务

点击确定之后会直接跳转到配置页面，我们依次填写：

General
我这个项目是放在 github 上的，所以需要勾选这一项。

源码管理

勾选 Git 选项，添加仓库地址，然后添加验证信息。

构建触发器

Github hook trigger表示：只在 Github 推送 webhook 事件给 jenkins 时才会执行自动构建，这个功能 Github 仓库那里也需要配置。

github 仓库配置：

第一步的 Payload URL 需要去这儿找：

jenkins 复制一个新窗口，进入系统配置。

插曲结束，jenkins 新窗口不要关，我们继续。

构建环境

先勾选，再选择 nodejs 版本，因为我这个事先已经安装了 nodejs 所以有的选，如果你没安装应该是空白的。

下面我们再来一个插曲，介绍如何在 jenkins 里安装 nodejs，让我们切换回刚刚没关闭的那个窗口，进入插件管理。

因为我已经提前装了，不再详细说，很简单，大家自己来吧。装完插件后进入全局工具配置。

保存之后，插曲结束，我们继续。

构建

构建 -> 点击增加构建步骤 -> 选择Execute NodeJS script。

其实这一步我们并不是要执行 node 语句，而是选择 node 版本，如果不加这一步，jenkins 会默认使用 6.x 版本的 node，导致构建失败。

参考：jenkins nodejs 插件

然后，点击增加构建步骤 -> 选择执行 shell -> 填写下面的语句。

xxx.com 为网站目录

npm install
rm -rf ./dist/*
node -v
npm run build
rm -rf /www/wwwroot/xxx.com
cp -rf ./dist/* /www/wwwroot/xxx.com

最后点击左下角的保存，至此，新任务创建结束。

手动执行构建

任务配置完成之后，回到新创建的任务界面，我们尝试构建一次来测试下效果。

第一次构建，会执行 npm install，下载很多包比较慢，注意保持耐心。构建历史列表中，蓝色小球为成功，红色为失败。点击进度条或者小球可查看构建过程中控制台输出的 log 信息，我们上面添加的 shell 命令 jenkins 会依次执行。

构建成功的标志，是控制台的最后输出：Finished: SUCCESS

构建完成后我们去查看一下服务器 /www/wwwroot/xxx.com/ 文件夹里面的内容

此时文件夹里面已经有了打包后的内容，网站访问也没问题，构建成功！此后只要我们往 github 的 master 文件执行 push 操作，jenkins 会自动帮我们构建，爽的一批~