Jenkins部署vue项目详细步骤

文章目录

Jenkins部署vue项目

安装node配置node部署vue项目
如需自动化部署前后端项目，并实现内网穿透，请按以下顺序阅读：

从创建服务器到搭建一台内网穿透服务器Jenkins部署Vue项目

上文讲了如何创建一台虚拟机，并配置项目自动部署所需要的环境，实现了Jenkins自动化部署一个后端springboot项目。本文将会介绍部署前端vue项目的步骤。

Jenkins部署vue项目安装node

node下载地址

http://nodejs.cn/download/

选择所有下载选项–>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 文件夹下。