懒是第一生产力!
其实在这个 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,导致构建失败。
然后,点击增加构建步骤
-> 选择执行 shell
-> 填写下面的语句。
xxx.com 为网站目录
shellnpm 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 会自动帮我们构建,爽的一批~
本文作者:青波
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!