【Jenkins】部署vue项目（多种方式部署）

阅读本书更多章节>>>>

🐻‍❄️🐻‍❄️🐻‍❄️🐻‍❄️🐻‍❄️🐻‍❄️

🐰部署Jenkins🐇安装node.js🥕上传到linux并解压🥕配置Jenkins环境变量 🐇jenkins 创建任务🐇部署方式🥕第一种 （npm run build）打包的形式🐼执行脚本 build Steps 🥕第二种 （npm run test）直接启动的形式🐼执行脚本 build Steps🐼vue jenkins shell 脚本 (jenkins-web.sh)🥕前面两种的启动方式 🥕第三种使用docker镜像部署

🐰部署Jenkins

---

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

🐇安装node.js

---

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

可以选择当前版本 可以选择自己需要的nodejs版本

🥕上传到linux并解压

---

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

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

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

🥕配置Jenkins环境变量

---

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

🐇jenkins 创建任务

---

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

填写你的git 地址 并选择账号 并选择需要的分支
没有账号的添加 凭证
添加完成之后, 就可以在下拉选里面选了
这里勾选上定位具体错误

🐇部署方式

---

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

---

🐼执行脚本 build Steps

---

# jenkins 拉取代码存放地址cd /var/lib/jenkins/workspace/webnpm install --forcenpm run build# ops 为 distzip -r ops.zip ops# nginx 代理路径地址cd /data/apps/nginx/htmlrm -rf opsrm -f ops.zipcp -f /var/lib/jenkins/workspace/web/ops.zip /data/apps/nginx/htmlunzip -o ops.zip# 重启nginx docker restart nginx

这种方式用了nginx,需要安装nginx的小伙伴可以参考这篇https://blog.csdn.net/qq_39017153/article/details/131913012

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

---

🐼执行脚本 build Steps

---

第一个脚本

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

第二个脚本

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

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

---

#!/bin/shexport path=/var/lib/jenkins/workspace/webexport port=9040case "$1" instart) if(true);thenecho "--------web开始启动--------------"cd $pathnohup 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    doneecho "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==="        ;; esacexit 0

🥕前面两种的启动方式

---

直接保存
点这里启动即可
点构建历史即可查看 控制台输出

🥕第三种使用docker镜像部署

---

docker环境安装

# 打包镜像 注意后面的. 我是Dockerfile是放在当前面目录docker build -t <image_name>:<tag> .

# 登入私有仓库docker login registry.<region>.aliyuncs.com -u <DOCKER_USER_VAR> -p <DOCKER_PASSWORd_VAR>

# 我这里推送的是阿里云私有仓库,根据自己的情况替换# 使用命令 docker tag 对镜像添加新的标签，# 格式为 <registry>/<repository>:<tag>。其中 <registry> 是阿里云容器服务提供的镜像仓库地址，# <repository> 是自定义的存储库名称，<tag> 则是版本标签docker tag <image_name>:<tag> registry.<region>.aliyuncs.com/<namespace>/<repository>:<tag>

# 推送镜像docker push registry.<region>.aliyuncs.com/<namespace>/<repository>:<tag>

# DockerfileFROM nginxLABEL maintainer=hrdCOPY dist /usr/share/nginx/html/EXPOSE 80

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-01/152117.html，文章来源：网络cs，作者：利杜鹃，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！