文章目录
- Jenkins部署vue项目
- 安装node
- 配置node
- 部署vue项目
上文讲了如何创建一台虚拟机,并配置项目自动部署所需要的环境,实现了Jenkins自动化部署一个后端springboot项目。本文将会介绍部署前端vue项目的步骤。
Jenkins部署vue项目
安装node
- node下载地址
- 选择所有下载选项–>Parent Directory,在这个文件下就可以下载自己想要的版本了。
- 复制链接地址,下载对应的安装包
wget https://registry.npmmirror.com/-/binary/node/latest-v14.x/node-v14.18.3-linux-x64.tar.gz
- 解压安装包,配置环境变量
tar -zxvf node-v14.18.3-linux-x64.tar.gz
- 编辑/etc/profile,添加环境变量
vim /etc/profile
在底部加上下面这行配置
export NODE_HOME=/work/mySoft/node-v14.18.3-linux-x64
export PATH=$PATH:$NODE_HOME/bin
export NODE_HOME
- 执行命令
source /etc/profile
,使环境变量生效 - 添加软链
ln -sv /work/mySoft/node-v16.13.2-linux-x64/bin/node /usr/bin/node
ln -sv /work/mySoft/node-v16.13.2-linux-x64/bin/npm /usr/bin/npm
- 验证,查看是否安装成功
node -v
npm -v
配置node
- 选择Manage Jenkins–>Global Tool Configuration
- 点击新增NodeJS,别名随便取一个,安装目录是服务器中Node的安装目录,点击应用–>保存
部署vue项目
Jenkins访问服务器的文件夹需要权限,本文的项目都放在/work目录下,所以给Jenkins用户添加/work文件夹下的所有权限
chown -R jenkins:jenkins /work
- 新建item,创建一个Freestyle project任务
- 选择git,填写vue项目的git地址,指定需要发布的分支,–>应用–>保存
- 这里显示了没有工作空间,是因为还没有构建过,点击执行构建
- 构建成功后,在服务器中找到Jenkins的工作目录
/var/lib/jenkins
,构建的工作空间在./workspace
目录下,在上篇文章中有Jenkins各个目录的解释,可参考上篇文章;构建后会生成两个文件夹,admin-wechat就是项目的工作空间
- 点击配置,增加构建步骤,选择Execute shell
- 加入以下命令,点击应用–>保存
npm install
rm -rf ./dist/*
npm run build
rm -rf /work/admin-wechat/*
cp -rf ./dist/* /work/admin-wechat
npm install :下载工作区npm包
rm -rf ./dist/* :删除dist目录下的所有文件,dist目录即为当前jenkins
工作区打包后的文件。
npm run build :执行打包命令
rm -rf /work/admin-wechat/* :删除服务器上/work/admin-wechat/ 目录下的所有文件/work/admin-wechat为服务器项目放置位置。
cp -rf ./dist/* /work/admin-wechat:把当前构建工作区dist目录里的文件 copy 到服务器/work/admin-wechat 文件夹下。
- 构建项目,Finished: SUCCESS,则部署成功了