Jenkins部署vue项目详细步骤

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

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

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

Jenkins部署vue项目

安装node

1. node下载地址

http://nodejs.cn/download/

2. 选择所有下载选项–>Parent Directory，在这个文件下就可以下载自己想要的版本了。

3. 复制链接地址，下载对应的安装包

wget https://registry.npmmirror.com/-/binary/node/latest-v14.x/node-v14.18.3-linux-x64.tar.gz

4. 解压安装包，配置环境变量

tar -zxvf node-v14.18.3-linux-x64.tar.gz

5. 编辑/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

6. 执行命令source /etc/profile，使环境变量生效

7. 添加软链

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

8. 验证，查看是否安装成功

node -v
npm -v

配置node

1. 选择Manage Jenkins–>Global Tool Configuration

2. 点击新增NodeJS，别名随便取一个，安装目录是服务器中Node的安装目录，点击应用–>保存

部署vue项目

Jenkins访问服务器的文件夹需要权限，本文的项目都放在/work目录下，所以给Jenkins用户添加/work文件夹下的所有权限

chown -R jenkins:jenkins /work

1. 新建item，创建一个Freestyle project任务

2. 选择git，填写vue项目的git地址，指定需要发布的分支，–>应用–>保存

3. 这里显示了没有工作空间，是因为还没有构建过，点击执行构建
   

4. 构建成功后，在服务器中找到Jenkins的工作目录/var/lib/jenkins，构建的工作空间在./workspace目录下，在上篇文章中有Jenkins各个目录的解释，可参考上篇文章；构建后会生成两个文件夹，admin-wechat就是项目的工作空间

5. 点击配置，增加构建步骤，选择Execute shell

6. 加入以下命令，点击应用–>保存

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 文件夹下。

7. 构建项目，Finished: SUCCESS，则部署成功了