欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue 自动化部署 jenkins 篇

程序员文章站 2023-01-19 21:07:47
前端项目打包部署,以前都是手工运行打包命令,打包结束后压缩,然后上传到服务器上解压部署。这种重复性的工作,确实有点让人烦,而且效率也不高。 本文基于 vue 的前端项目、 GitHub 的代码仓库,简述在 CentOS7 上利用 jenkins 实现自动部署。 一、安装插件 NodeJS Jenki ......

前端项目打包部署,以前都是手工运行打包命令,打包结束后压缩,然后上传到服务器上解压部署。这种重复性的工作,确实有点让人烦,而且效率也不高。

本文基于 vue 的前端项目、 github 的代码仓库,简述在 centos7 上利用 jenkins 实现自动部署。

 

一、安装插件 nodejs

jenkins -> manage jenkins -> manage plugins

vue 自动化部署 jenkins 篇

-> avaliable 搜索 nodejs,勾选 nodejs,点击 install without restart 安装

vue 自动化部署 jenkins 篇

 

二、配置 nodejs 插件

jenkins -> manage jenkins -> global tool configuation

vue 自动化部署 jenkins 篇

 

nodejs 节点下,点击 nodejs installations

vue 自动化部署 jenkins 篇

 

填写 name,勾选 install automatically,选择 version,最后点击 save

vue 自动化部署 jenkins 篇

 

三、发布配置

jenkins -> new item

vue 自动化部署 jenkins 篇

填写 job name,选择 freestyle project,点击 ok

vue 自动化部署 jenkins 篇

点击 configure 配置 job 构建参数

vue 自动化部署 jenkins 篇

general 配置,填写 project name,description

vue 自动化部署 jenkins 篇

source code management,选择 git,填写 repository url,如果是私有仓库,还需要填写 credentials( 点击 add 添加)

vue 自动化部署 jenkins 篇

build environment,勾选 provide node & npm bin/ folder to path

vue 自动化部署 jenkins 篇

build,点击 add build step 下拉,选择 execute shell

vue 自动化部署 jenkins 篇

输入以下脚本

1 node -v
2 npm install -g yarn --registry=https://registry.npm.taobao.org
3 yarn -v
4 yarn install
5 
6 yarn lint
7 yarn build

vue 自动化部署 jenkins 篇

点击 save

 

 四、测试构建

jenkins -> all -> node_vue -> build now

vue 自动化部署 jenkins 篇

 

 五、遇见问题

vue 自动化部署 jenkins 篇

项目是在 windows 下开发,windows 对文件名大小不敏感,上传到 centos7 构建时出现如上错误,通过更改文件名的大小写,保持代码中引用文件名与实际文件名大小写一致,构建成功。

vue 自动化部署 jenkins 篇