H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】Jenkins 自动构建node vue项目配置

* Jenkins 新建任务

image.png

输入任务名称,选择创建一个自由风格的项目。

* 任务构建配置

作者用的是git,这里用git做例子。

image.png

输入项目的git地址,和用于登录git账号密码。指定分支选择你想构建的git分支。

image.png

勾选构建触发器,用于git更新代码后会自动推送到jenkins自动构建。
增加构建步骤选择:Execute shell
输入shell命令

npm install 
rm -rf ./dist/*
npm run build
rm -rf /usr/local/tomcat/webapps/website/*
cp -rf ./dist/* /usr/local/tomcat/webapps/website

image.png

点击保存应用。然后回到主面板。
点击项目进入到项目面板。点击Build Now立即构建。

image.png

构建完成,但是左下角构建历史爆红说明构建失败。点击工作空间右侧已经出现了项目,说明从git地址和用户名账号没问题。

image.png

点击左下角报错列表后的下拉框选择控制台输出看下错误日志

image.png
image.png

找到错误,website不是目录,说明我们服务器上tomcat webapps下没有这个文件。登录服务器查看下。

image.png

果然没有,我们新建website文件夹。

mkdir website

回到Jenkins再次构建下。

image.png

构建成功,看下控制台输出。

image.png

从控制台可以看出文件已经被打包成功,并且已经放到tomcat下,进入tomcat下看看。

image.png

哈哈,这就是我们想想要的效果。
启动tomcat访问试试吧!http://localhost/:8080/website。

* 配置Git更新后自动构建

作者这里用的是Github,gitlab同理。
登录github上并选择到项目仓库。点击设置。

image.png

选择webhooks 并点击add webhook

image.png
image.png

payload URL填写:Jenkins服务器地址+端口号+/github-webhook。
点击增加。配置完毕。当代码提交后后会通过webhook告诉Jenkins过来拉取代码自动构建。

本文地址:H5W3 » 【前端技术】Jenkins 自动构建node vue项目配置

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址