【Jenkins】部署vue项目（多种方式部署）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Jenkins】部署vue项目（多种方式部署）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

🐰部署Jenkins

如何在linux上安装jenkins可以看上一篇
linux安装jenkins(详细步骤)

🐇安装node.js

建议最好跟你本地安装版本一致,减少没有必要的麻烦:node.js官网

jenkins部署vue项目,jenkins,jenkins,vue.js,servlet
可以选择当前版本可以选择自己需要的nodejs版本

jenkins部署vue项目,jenkins,jenkins,vue.js,servlet

🥕上传到linux并解压

# 选择一个位置存放
cd /usr/local/
# 创建一个文件夹 并把刚才下载好的压缩包上传到对应路径
mkdir node
# 上传完成后 解压文件 
tar -xvf node-v18.17.0-linux-x64.tar.xz
# 配置环境变量
vim /etc/profile
export NODE_HOME=/usr/local/node/node-v18.17.0-linux-x64
export PATH=$NODE_HOME/bin:$PATH
# 刷新
source /etc/profile

# 检查是否配置正确
node -v
npm -v

像我这样显示就是没有问题的了

jenkins部署vue项目,jenkins,jenkins,vue.js,servlet

🥕配置Jenkins环境变量

一定要配置Jenkins环境变量 不然执行脚本npm命令报错会报 npm: command not found

🐇jenkins 创建任务

选择创建一个任务

填写项目名称
设置一下构建历史保留天数，不然很容易导致磁盘满了

填写你的git 地址并选择账号并选择需要的分支

没有账号的添加凭证

添加完成之后, 就可以在下拉选里面选了

这里勾选上定位具体错误

🐇部署方式

🥕第一种（npm run build）打包的形式

🐼执行脚本 build Steps

# jenkins 拉取代码存放地址
cd /var/lib/jenkins/workspace/web
npm install --force
npm run build
# ops 为 dist
zip -r ops.zip ops
# nginx 代理路径地址
cd /data/apps/nginx/html
rm -rf ops
rm -f ops.zip
cp -f /var/lib/jenkins/workspace/web/ops.zip /data/apps/nginx/html
unzip -o ops.zip
# 重启nginx 
docker restart nginx

这种方式用了nginx,需要安装nginx的小伙伴可以参考这篇https://blog.csdn.net/qq_39017153/article/details/131913012文章来源地址https://www.toymoban.com/news/detail-695107.html

🥕第二种（npm run test）直接启动的形式

🐼执行脚本 build Steps

第一个脚本

#!/bin/bash
# workspace后面的改成你自己项目文件的位置
cd /var/lib/jenkins/workspace/web
npm install --force

第二个脚本

#!/bin/bash
# 脚本位置 放在那个位置写那个
cd /opt/java/web
# 防止jenkins 杀死子线程
export EXEC=./jenkins-web.sh restart
$EXEC stop
sleep 5
BUILD_ID=dontKillMe $EXEC start

🐼vue jenkins shell 脚本 (jenkins-web.sh)

#!/bin/sh
export path=/var/lib/jenkins/workspace/web
export port=9040

case "$1" in
start)
 if(true);then
		echo "--------web开始启动--------------"
		cd $path
		nohup npm run test >/dev/null 2>&1 &
		pid=`lsof -i:$port|grep "LISTEN"|awk '{print $2}'`
		until [ -n "$pid" ]
		    do
		      pid=`lsof -i:$port|grep "LISTEN"|awk '{print $2}'`
			  sleep 3
		    done
		echo "web pid is $pid" 
		echo "--------web 启动成功--------------"
	fi
        echo "===startAll success==="
        ;;
 
 stop)
        P_ID=`lsof -i:$port|grep "LISTEN"|awk '{print $2}'`
        if [ "$P_ID" == "" ]; then
            echo "===web process not exists or stop success"
        else
            kill -9 $P_ID
            echo "web killed success"
        fi
	
        echo "===stopAll success==="
        ;;   
 
restart)
        $0 stop
        sleep 2
        $0 start
        echo "===restartAll success==="
        ;; 
esac	
exit 0