jenkins 编译 vue 项目、远程发布项目 脚本

最新推荐文章于 2023-07-24 16:31:06 发布
最新推荐文章于 2023-07-24 16:31:06 发布
阅读量558 收藏 2
点赞数 1
文章标签： javascript 运维 shell ViewUI
原文链接：https://my.oschina.net/520wsl/blog/2997382
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

第三版命令（升级）

#!/bin/bash
echo '''
#######################################################
# $Name             : buildPro.sh	　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 
# $Version          : v3.0 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
# $Function         : release/on-line for jboss Script 
# $Author           : Mad Dragon
# $Create Date      : 2019-1-5 16:09:42
# $email            : 395548460@qq.com
# $Description      : 通用项目部署 shellscript 脚本
#######################################################
'''

set -e

# start: config...
echo "==================start: 项目信息========================="
# 需要远程上传的服务器
# serviceNameLst="root@192.168.2.150 root@172.30.34.210"
serviceNameLst=$1
echo "serviceNameLst $serviceNameLst"
# workSpacePath 工作区间地址
workSpacePath="${WORKSPACE}"
# workSpaceName 项目名
# 一般为项目名: 驼峰写法 customer-center-app ==》customerCenterApp
workSpaceName="${JOB_BASE_NAME}"
deployProHome="home"
deployProConfig="proconfig"
deployProCommon="common"
deployProPath="/$deployProHome/$deployProConfig/$deployProCommon"
deployProName="deployPro.sh"
# 项目文件压缩包名 默认 dist.tar.gz
resourceName="dist.tar.gz"
# 项目部署地址
projectPath="/home/project/${workSpaceName}"
# 临时文件存放地址 从远程拉取的项目文件存放的地方
transferPath="/home/project/transfer/${workSpaceName}"
# 备份 项目文件压缩包名
filename="${JOB_NAME}_${BUILD_ID}.tar.gz"
# 备份 项目文件存放地址
backPath="/home/back/${JOB_BASE_NAME}"
# end: config...

nodeV=$(node -v)
npmV=$(npm -v)

echo """
#######################################################
变量配置：

#   serviceNameLst  : $serviceNameLst
#   workSpacePath   : $workSpacePath
#   workSpaceName   : $workSpaceName
#   deployProHome   : $deployProHome
#   deployProConfig : $deployProConfig
#   deployProCommon : $deployProCommon
#   deployProPath   : $deployProPath
#   deployProName   : $deployProName
#   resourceName    : $resourceName
#   projectPath     : $projectPath
#   transferPath    : $transferPath
#   filename        : $filename
#   backPath        : $backPath
    
系统环境：

#   node 版本       : $nodeV
#   npm 版本        : $npmV
#######################################################
"""

# start: function...........
printf "\n\n"
printf "\n\n"
echo "==================start: 项目编译========================="
printf "\n\n"
echo "001、更新依赖 install         ====》"
npm install

printf "\n\n"
echo "002、编译 build               ====》"
npm run build

printf "\n\n"
echo "003、压缩文件 $resourceName   ====》"
cd dist
tar -zcf $resourceName *

printf "\n\n"
mkdir -p $projectPath
echo "004、创建 $projectPath        ====》"

printf "\n\n"
rm -rf $projectPath/$resourceName
mv $resourceName $projectPath/
echo "005、移动文件 $projectPath/$resourceName         ====》"

printf "\n\n"
echo "006、目录结构                 ====》"
ls $projectPath

printf "\n\n"
echo "==================start: 远程上传文件========================="
echo "007、start:远程上传文件...                        ====》"
printf "\n\n"
for serviceName in $serviceNameLst
do
    echo "serviceName: $serviceName "
ssh -t $serviceName<<EOF
echo "=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*==*=*=*==*=*=*=*=*==*=*=*=*=*=*==*=*=*=*=*=*==*=*="
printf "\n\n"
echo "[debug]：查看ip ====>"
ip add

printf "\n\n"
mkdir -p $transferPath
echo "      [debug]:创建 transferPath：$transferPath"

mkdir -p $deployProPath
echo "      [debug]:创建 deployProPath：$deployProPath"

mkdir -p $projectPath
echo "      [debug]:创建 projectPath：$projectPath"

mkdir -p $backPath
echo "      [debug]:创建 backPath：$backPath"
printf "\n\n"
EOF
    
    scp -r "$projectPath/$resourceName" "$serviceName:$transferPath"
    echo "          [debug]:上传 $projectPath/$resourceName 到 $serviceName:$transferPath  成功！"
    printf "\n\n"

done

printf "\n\n"
echo "end:远程上传文件..."

printf "\n\n"
echo "撒花结束 *★,°*:.☆(￣▽￣)/$:*.°★* 。"

printf "\n\n"
echo "==================start:项目部署========================="

for serviceName in $serviceNameLst
do
    ssh -t $serviceName<<EOF
echo "=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*==*=*=*==*=*=*=*=*==*=*=*=*=*=*==*=*=*=*=*=*==*=*="
printf "\n\n"
echo "[debug]：查看ip ====>"
ip add

printf "\n\n"
rm -rf $projectPath/* 
echo "      [debug]:删除 $projectPath/* 旧文件 成功" 

printf "\n\n"
ls $projectPath

printf "\n\n"
mv "$transferPath/$resourceName" "$projectPath/"
echo "      [debug]:移动 压缩包文件 $transferPath/$resourceName 到 $projectPath 成功" 

printf "\n\n"
cd $projectPath/
pwd

printf "\n\n"

tar -zxf $resourceName
echo "      [debug]:将 $projectPath/$resourceName 解压 $projectPath 成功" 

printf "\n\n"

mv "$projectPath/$resourceName" $backPath/$filename
echo "      [debug]:将文件 $projectPath/$resourceName 备份到 $backPath/$filename 成功"
printf "\n\n"
EOF

done

# ----------------------------------------------

第二版命令（升级）

1、本机shell操作

#!/bin/bash
set -e

# author:Mad Dragon
# email:395548460@qq.com
# 通用项目部署 shellscript 脚本
echo "==================start build project========================="
# start: config...

# 需要远程上传的服务器
serviceNameLst="root@192.168.2.150 root@172.30.34.210"
echo "serviceNameLst $serviceNameLst"

# workSpacePath 工作区间地址
workSpacePath="${WORKSPACE}"

# workSpaceName 项目名
# 一般为项目名: 驼峰写法 customer-center-app ==》customerCenterApp
workSpaceName="${JOB_BASE_NAME}"
echo "workSpaceName $workSpaceName"

deployProHome="home"
echo "deployProHome $deployProHome"

deployProConfig="proconfig"
echo "deployProConfig $deployProConfig"

deployProCommon="common"
echo "deployProCommon $deployProCommon"

deployProPath="/$deployProHome/$deployProConfig/$deployProCommon"
echo "deployProPath $deployProPath"

deployProName="deployPro.sh"
echo "deployProName $deployProName"

# 项目文件压缩包名 默认 dist.tar.gz
resourceName="dist.tar.gz"
echo "resourceName $resourceName"

# 项目部署地址
projectPath="/home/project/${workSpaceName}"
echo "projectPath $projectPath"

# 临时文件存放地址 从远程拉取的项目文件存放的地方
transferPath="/home/project/transfer/${workSpaceName}"
echo "transferPath $transferPath"

# 备份 项目文件压缩包名
filename="${JOB_NAME}_${BUILD_ID}.tar.gz"
echo "filename $filename" 

# 备份 项目文件存放地址
backPath="/home/back/${JOB_BASE_NAME}"
echo "backPath $backPath" 

# end: config...


# start: function...........
echo "proPath: $projectPath"

echo "node 版本:"
node -v

echo "npm 版本:"
npm -v

printf "\n\n"
echo "更新依赖 install"
npm install

printf "\n\n"
echo "编译 build"
npm run build

printf "\n\n"
echo "压缩文件 $resourceName"
cd dist
tar -zcf $resourceName *

printf "\n\n"
mkdir -p $projectPath
echo "创建 $projectPath"

printf "\n\n"
rm -rf $projectPath/$resourceName
mv $resourceName $projectPath/
echo "移动文件 $projectPath/$resourceName"

printf "\n\n"
echo "目录结构"
ls $projectPath

printf "\n\n"
echo "start:远程上传文件..."

printf "\n\n"
for serviceName in $serviceNameLst
do
    echo "serviceName: $serviceName "
ssh -t $serviceName<<EOF
printf "\n\n"
echo "[debug]：查看ip"
ip add

printf "\n\n"
mkdir -p $transferPath
echo "[debug]:创建 transferPath：$transferPath"

mkdir -p $deployProPath
echo "[debug]:创建 deployProPath：$deployProPath"

mkdir -p $projectPath
echo "[debug]:创建 projectPath：$projectPath"

mkdir -p $backPath
echo "[debug]:创建 backPath：$backPath"
printf "\n\n"
EOF
    
    scp -r "$projectPath/$resourceName" "$serviceName:$transferPath"
    echo "[debug]:上传 $projectPath/$resourceName 到 $serviceName:$transferPath  成功！"
    printf "\n\n"

done

printf "\n\n"
echo "end:远程上传文件..."

printf "\n\n"
echo "撒花结束 *★,°*:.☆(￣▽￣)/$:*.°★* 。"

printf "\n\n"
echo "==================deploy build success========================="

for serviceName in $serviceNameLst
do
    ssh -t $serviceName<<EOF
printf "\n\n"
echo "[debug]：查看ip"
ip add

printf "\n\n"
rm -rf $projectPath/* 
echo "[debug]:删除 $projectPath/* 旧文件 成功" 

printf "\n\n"
ls $projectPath

printf "\n\n"
mv "$transferPath/$resourceName" "$projectPath/"
echo "[debug]:移动 压缩包文件 $transferPath/$resourceName 到 $projectPath 成功" 

printf "\n\n"
cd $projectPath/
pwd

printf "\n\n"

tar -zxvf $resourceName
echo "[debug]:将 $projectPath/$resourceName 解压 $projectPath 成功" 

printf "\n\n"

mv "$projectPath/$resourceName" $backPath/$filename
echo "[debug]:将文件 $projectPath/$resourceName 备份到 $backPath/$filename 成功"
printf "\n\n"
EOF

done

# ----------------------------------------------

第一版命令

1、本机shell 操作

o "==================start build project========================="

# start: config...

# 需要远程上传的服务器
serviceName1="root@192.168.2.150"

# workSpaceName 工作区间名   
# 一般为项目名: 驼峰写法 customer-center-app ==》customerCenterApp
workSpaceName="${JOB_BASE_NAME}"

# 项目文件压缩包名 默认 dist.tar.gz
resourceName="dist.tar.gz"

# 项目部署地址
projectPath="/home/project/${workSpaceName}"

# 临时文件存放地址 从远程拉取的项目文件存放的地方
transferPath="/home/project/transfer/${workSpaceName}"

# end: config...

echo 'proPath:'
echo $projectPath

echo 'node 版本:'
node -v

echo 'npm 版本:'
npm -v

echo '更新依赖 install'
npm install

echo '编译 build'
npm run build

echo '压缩文件'
cd dist
tar -zcf $resourceName *

echo '移动文件 $projectPath/$resourceName'

echo '判断文件是否存在'
if test -e $projectPath
then
    echo '文件已存在! ${projectPath}'
else
    echo '文件不存在! ${projectPath}'
    mkdir $projectPath
fi

rm -rf $projectPath/$resourceName
mv $resourceName $projectPath/


echo '目录结构'
ls $projectPath

echo 'start:远程上传文件...'

echo '判断文件是否存在'
if ssh $serviceName1 test -e $transferPath
then

    echo '文件已存在! ${serviceName1}:${transferPath}'
else
    echo '文件不存在! ${serviceName1}:${transferPath}'
    ssh -t $serviceName1 mkdir $transferPath/
fi

scp -r $projectPath/$resourceName $serviceName1:$transferPath/
echo 'end:远程上传文件...'


echo '撒花结束 *★,°*:.☆(￣▽￣)/$:*.°★* 。'
echo "==================deploy build success========================="

# ----------------------------------------------

2、免密登录远程服务器后操作

#!/bin/bash
echo "==================start deploy project========================="
echo '项目运行服务器。。。。'

# start: config...

# workSpaceName 工作区间名   
# 一般为项目名: 驼峰写法 customer-center-app ==》customerCenterApp
workSpaceName="${JOB_BASE_NAME}"

# 项目文件压缩包名 默认 dist.tar.gz
resourceName="dist.tar.gz"

# 远程项目存放地址
originPath="root@172.30.34.188:/home/project/${workSpaceName}"

# 临时文件存放地址 从远程拉取的项目文件存放的地方
transferPath="/home/project/transfer/${workSpaceName}"

# 项目部署地址
projectPath="/home/project/${JOB_BASE_NAME}"

# 备份 项目文件压缩包名
filename="${JOB_NAME}_${BUILD_ID}.tar.gz"

# 备份 项目文件存放地址
backPath="/home/back/${JOB_BASE_NAME}"

# end: config...

echo '查看ip'
ip add 

echo '进入项目目录 ${transferPath}' 

echo '判断文件是否存在'
if test -e $transferPath
then

    echo '文件已存在! ${transferPath}'
else
    echo '文件不存在! ${transferPath}'
    mkdir $transferPath
fi

cd $transferPath/ 

echo '远程下载文件开始 ${originPath}/${resourceName}'
scp -r $originPath/$resourceName $transferPath

echo '删除 ${JOB_BASE_NAME}旧文件' 

echo '判断文件是否存在'
if test -e $projectPath
then

    echo '文件已存在! ${projectPath}'
else
    echo '文件不存在! ${projectPath}'
    mkdir $projectPath
fi

rm -rf $projectPath/* 

echo '移动 压缩包文件 到 ${projectPath}' 
mv dist.tar.gz $projectPath/

echo '进入 ${JOB_BASE_NAME} 目录' 
cd $projectPath/

echo '解压 dist.tar.gz' 
tar -zxf $resourceName

echo '将文件备份到 ${backPath}/${filename}'

echo '判断文件是否存在'
if test -e $backPath
then

    echo '文件已存在! ${backPath}'
else
    echo '文件不存在! ${backPath}'
    mkdir $backPath
fi

mv dist.tar.gz $backPath/$filename

echo "==================deploy project success========================="

转载于:https://my.oschina.net/520wsl/blog/2997382

helloxielan
关注
Jenkins打包部署gitee项目至阿里云ECS服务器
我是海贼王
09-02 1806
Jenkins打包部署gitee项目至阿里云ECS服务器 Jenkins安装及基础环境配置 Jenkins配置SSH免密登录 ​
Jenkins自动构建vue项目并部署至Kubernetes
walkon1007的博客
03-12 932
目录一、安装JavaScript 运行环境Node.js二、配置Jenkins三、补充四、参考文档 本文基于上一篇文章的测试环境，通过jenkins构建一个简单的vue项目，并部署至上文的k8s集群中。 上文链接：https://blog.csdn.net/walkon1007/article/details/112769224 一、安装JavaScript 运行环境Node.js 下载地址：https://nodejs.org/en/download/ 我直接下载了二进制文件： wget https://
jenkins前端实现自动化部署（vue项目）
梦里小白龙个人博客
06-13 7890
1.jenkins创建任务 2.创建任务跳转页面 3.保存后配置页面git添加用户进入Jenkins 凭据提供者数据用户名密码 Repository URL：支持https和ssh Credentials：Jenkins 凭据提供者数据用户名密码 Branch Specifier (blank for 'any')：写git分支默认msater 3.buid-选择执行shell 3....
Jenkins编译Vue前端项目
weixin_43484014的博客
11-19 1079
Jenkins编译Vue前端项目 1.安装NodeJs插件 在可选插件中搜索NodeJs，点击立即安装 点击工具管理 配置NodeJs工具 新建一个任务 配置git仓库 构建环境的配置 构建时选择Execute shell，接下来保存好了就可以构建了 ...
【Jenkins】部署vue项目（多种方式部署）
最新发布
怀着一颗学徒的心
07-24 1万+
🥕第一种 （npm run build）打包的形式 🥕第二种 （npm run test）直接启动的形式 🥕第三种 使用docker镜像打包脚本
【无标题】jenkins实现vue代码自动发布，纯linux脚本实现。
hulover的博客
03-31 1552
vue Jenkins cicd linux
jenkins shell脚本模板
不会写后端的前端不是一个好运维。
02-15 225
前端VUE项目 shell脚本示例。java项目shell脚本模板。
Jenkins打包部署Vue项目至远程服务器
我是海贼王
09-02 1491
Jenkins打包部署Vue项目至远程服务器 Jenkins打包部署gitee项目至阿里云ECS服务器 Jenkins安装及基础环境配置 Jenkins配置SSH免密登录
jenkins vue 打包特别慢_使用jenkins自动化打包部署Vue项目。详细教程。
weixin_39912984的博客
12-22 1321
此教程 jenkins是直接部署到linux服务器上。服务器系统：CentOS 7.3 64位。流程：jenkins关联码云仓库,点击立即构建,执行shell进行构建,打包,把打包后的dist目录文件放到服务器上,完成自动化打包部署。一.服务器安装 Javajenkins是运行在java环境中的,所以要先安装java,配置java环境变量后才能使用。1、卸载系统自带的jdk//查找系统jdk[ro...
【项目部署】解放双手，使用Jenkins一键打包部署前端Vue应用
小王的技术库
10-18 3711
本文介绍了docker安装nginx，以及Jenkin配置node环境来打包部署前端应用。整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
jenkins自动部署vue前端项目
08-15
jenkins自动打包vue前后端分离项目，部署到远程服务器
jenkins部署vue前端
10-18
jenkins部署vue前端
Jenkins 自动化部署Deploy插件
03-11
Jenkins 自动化部署Deploy插件
jenkins打包vue项目
cxx619的博客
07-10 1106
linux中打包vue项目 安装nodejs 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带...
【项目部署】使用Jenkins一键打包部署前端Vue应用
Java升级之路的博客
10-13 1681
嗨，大家好，我是希留，一个被迫致力于全栈开发的老菜鸟。上一篇文章我们讲到了使用Jenkins一键打包部署SpringBoot应用，这一次我们来讲下如何一键打包部署前端应用，以Vue前端应用为例。本文介绍了docker安装nginx，以及Jenkin配置node环境来打包部署前端应用。
jenkins 自动化部署vue项目（最简版）
m0_61452987的博客
02-28 6771
1、安装jenkins: 参考链接： （1）centos安装jdk和jenkins_骑着骆驼去看海的博客-CSDN博客 （2）centos7.3安装配置jenkins完整版_lxw的博客-CSDN博客 2、CentOS安装 node.js 和 git 参考链接： （1）CentOS7 安装 nodejs - klvchen - 博客园 （2）CentOS 安装最新版本 Git - 江湖小小白 - 博客园 (cnblogs.com) 3、打开jenkins进行配置 * 任务名字按自己的需...
Jenkins自动构建部署项目到远程服务器
Aiki_RH的博客
02-28 546
转发学习https://blog.csdn.net/ming19951224/article/details/80958761
jenkins构建前端vue项目
qq_44691484的博客
05-11 2631
jenkins构建前端vue项目
Jenkins自动化构建vue项目然后发布到远程服务器
热门推荐
安树的博客
10-31 2万+
一、请确保当前服务器安装了docker和jenkins，没安装的请看《在centos7系统安装docker及用docker安装jenkins》 （jenkins里面的目录路径为/var/jenkins_home相当于之前安装系统里面的/home/var/jenkins/） 二、jenkins相关插件的安装 1、安装Publish Over SSH插件用于SSH连接远程的服务器。      ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值