vue2 自动化部署 shell 脚本

需求场景:在云平台中进行开发时,由于无法连接外网,在部署前端项目时,是通过本地打包再上传到服务器的方式进行部署的。基于这种部署场景,通过 shell 脚本进行部署流程优化,具体如下:

1、服务器上安装 node、git  运行环境。

2、服务上上传 node_modules 包。

3、服务器上编写 shell 脚本。

build.sh 脚本如下:

#!/bin/bash# 设置 GitLab 仓库的 URL 和本地的存储路径
QIANKUN_PARENT_URL="https://github.com/qiankun-parent.git"
QIANKUN_CHILDREN_URL="https://github.com/qiankun-children.git"
LOCAL_PATH_PARENT="/Users/jqh/Desktop/jqh/code/shell/qiankun-parent"
LOCAL_PATH_CHILDREN="$LOCAL_PATH_PARENT/qiankun-children"
BRANCH_NAME="main"  # 指定分支名称
TARGET_DIR_PARENT="/Users/jqh/Desktop/jqh/code/shell/shch_web"
TARGET_DIR_CHILDREN="$TARGET_DIR_PARENT/front-web"# 获取当前时间作为时间戳
TIMESTAMP=$(date +%Y%m%d%H%M%S)# 确保目标目录存在
ensure_target_directory_exists() {local TARGET_DIR=$1mkdir -p "$TARGET_DIR"
}# 处理单个仓库
handle_repository() {local GITLAB_URL=$1local LOCAL_PATH=$2local BRANCH_NAME=$3local TARGET_DIR=$4local TIMESTAMP=$5# 检查本地仓库是否存在if [ -d "$LOCAL_PATH" ]; then# 如果本地仓库存在,则进入该目录并检查是否为 Git 仓库cd "$LOCAL_PATH"# 检查当前目录是否为 Git 仓库if [ -d .git ]; thenecho "Update existing repository '$LOCAL_PATH'..."git fetch origin  # 先 fetch 最新的远程分支信息# 检查远程分支是否存在if git rev-parse --verify "origin/$BRANCH_NAME" >/dev/null 2>&1; thengit checkout "$BRANCH_NAME"  # 切换到指定分支git pull origin "$BRANCH_NAME" || {echo "Error: Failed to pull from origin $BRANCH_NAME."exit 1}elseecho "Error: Remote branch $BRANCH_NAME does not exist."exit 1fielse# 如果本地路径存在但不是 Git 仓库,则删除该目录并重新克隆echo "Warning: $LOCAL_PATH is not a Git repository. Removing and cloning again..."rm -rf "$LOCAL_PATH"git clone -b "$BRANCH_NAME" "$GITLAB_URL" "$LOCAL_PATH"fielse# 如果本地仓库不存在,则克隆新的仓库,并指定分支echo "Cloning repository '$LOCAL_PATH'..."git clone -b "$BRANCH_NAME" "$GITLAB_URL" "$LOCAL_PATH"fi# 进入仓库目录cd "$LOCAL_PATH"# 检查 node_modules 是否存在if [ -d node_modules ]; thenecho "node_modules directory exists. Proceeding with backup and build..."elseecho "Warning: node_modules directory does not exist. Please upload the local node_modules package."exit 1fi# 检查 dist 目录是否存在if [ -d dist ]; then# 移动 dist 目录并重命名到目标目录echo "Moving dist directory before build..."mv dist "$LOCAL_PATH/dist_$TIMESTAMP"# 确保目标目录存在ensure_target_directory_exists "$TARGET_DIR"# 将备份的 dist 目录内容移动到目标目录echo "Moving backup build artifacts to target directory..."mv "$LOCAL_PATH/dist_$TIMESTAMP" "$TARGET_DIR"fi# 打包echo "Building '$LOCAL_PATH'..."npm run build# 检查 dist 目录是否创建成功if [ -d dist ]; then# 确保目标目录存在ensure_target_directory_exists "$TARGET_DIR"# 将新的 dist 目录内容复制到目标目录echo "Copying new build artifacts to target directory..."cp -r dist/* "$TARGET_DIR"elseecho "Error: Failed to create dist directory after build."exit 1fi
}# 确保目标目录存在
ensure_target_directory_exists "$TARGET_DIR_PARENT"
ensure_target_directory_exists "$TARGET_DIR_CHILDREN"# 处理 qiankun-parent 仓库
handle_repository "$QIANKUN_PARENT_URL" "$LOCAL_PATH_PARENT" "$BRANCH_NAME" "$TARGET_DIR_PARENT" "$TIMESTAMP"# 处理 qiankun-children 仓库
handle_repository "$QIANKUN_CHILDREN_URL" "$LOCAL_PATH_CHILDREN" "$BRANCH_NAME" "$TARGET_DIR_CHILDREN" "$TIMESTAMP"echo "All tasks completed successfully."

解释:

1、服务器的项目部署路径:主项目 /opt/qiankun-parent,子项目 /opt/qiankun-parent/qiankun-children。

2、执行完 build.sh 脚本之后,会自动化地从两个不同的 Git 仓库拉取最新代码、构建项目,并将构建结果部署到指定的目标目录。

  • handle_repository 函数负责处理单个仓库的拉取、构建和部署。
  • 首先检查本地仓库是否存在,如果存在则进入仓库目录并检查是否为 Git 仓库。
  • 如果是 Git 仓库,先 fetch 最新的远程分支信息,然后切换到指定分支并 pull 最新代码。
  • 如果本地路径存在但不是 Git 仓库,则删除该目录并重新克隆。
  • 如果本地仓库不存在,则直接克隆新的仓库。
  • 检查 node_modules 目录是否存在,如果不存在则提示用户上传本地的 node_modules 包。
  • 如果 dist 目录存在,则将其移动并重命名,然后将备份的 dist 目录内容移动到目标目录。
  • 执行 npm run build 命令进行打包。
  • 检查新的 dist 目录是否创建成功,如果成功则将其内容复制到目标目录。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/60142.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

掌握核密度图:精准描绘不同年龄段的血糖分布

在医学研究中,数据的可视化是理解复杂信息和做出科学决策的关键。今天,我们将深入探讨一种强大的数据可视化工具——核密度图(Kernel Density Plot,简称KDE),并通过Python代码实例,展示如何基于…

实验室信息管理系统源码,医院LIS系统源码,C/S结构,C#语言开发,适合上项目。

实验室信息管理系统源码,医院LIS系统源码,三甲以下医院需求都能满足。 LIS系统即实验室信息管理系统。LIS系统能实现临床检验信息化,检验科信息管理自动化。其主要功能是将检验科的实验仪器传出的检验数据经数据分析后,自动生成打…

计算机在启动一直到系统加载完成期间进行了哪些操作

零 扇区和分区的概念与联系 概念 扇区(Sector): 扇区是硬盘中最小的物理存储单位,每个扇区通常为512字节(一些新硬盘为4KB)。硬盘在制造时会被划分成许多扇区,这些扇区在硬盘中依次排列。数据被…

Meta AI 新技术,赋予机器人 “触觉” 的革命

Meta AI 新技术,赋予机器人 “触觉” 的革命 简介 传统机器人的局限 Meta AI 的新技术突破 技术应用前景 未来展望 简介 在科技飞速发展的今天,人工智能领域不断取得令人惊叹的突破。11月4日,Meta公司宣布其基础人工智能研究团队(FAIR)在…

IPguard与Ping32加密软件对比评测,哪款更适合企业数据保护?

在信息化时代,企业的数据安全至关重要,特别是在文件管理和源代码加密方面,更需要强有力的防护工具。目前,IPguard与Ping32是市场上两款常用的企业数据加密软件。今天,我们从多方面进行对比,为大家解析哪款软…

【linux】CentOS 的软件源(Repository)学习

CentOS 7 的软件源(Repository)是用于分发和管理软件包的集中存储库。这些源包含了操作系统所需的各种软件包,包括系统工具、库、应用程序等。通过配置不同的软件源,用户可以选择从不同的服务器下载软件包,以提高下载速…

PyQt5超详细教程终篇

PyQt5超详细教程 前言 接: [【Python篇】PyQt5 超详细教程——由入门到精通(序篇)](【Python篇】PyQt5 超详细教程——由入门到精通(序篇)-CSDN博客) 建议把代码复制到pycahrm等IDE上面看实际效果,方便理…

wordpress搬家迁移后怎么修改数据库用户名

在WordPress中修改数据库用户名,你需要更新WordPress的配置文件wp-config.php。以下是步骤和示例代码: 使用FTP客户端或文件管理器登录到你的网站的主机账户。 找到wp-config.php文件,它通常位于WordPress安装的根目录中。 打开wp-config.…

JSX 语法与基础组件使用

在 React Native 中,JSX 是一种 JavaScript 的语法扩展,用于描述 UI 界面。JSX 语法类似于 HTML,但它是 JavaScript 的语法糖,可以直接在 JavaScript 代码中编写 UI 组件。本章节将介绍 JSX 语法的基础知识,以及 React…

【计网不挂科】计算机网络期末考试——【选择题&填空题&判断题&简述题】试卷(4)

前言 大家好吖,欢迎来到 YY 滴计算机网络 系列 ,热烈欢迎! 本章主要内容面向接触过C的老铁 本博客主要内容,收纳了一部门基本的计算机网络题目,供yy应对期中考试复习。大家可以参考 本章是去答案版本。带答案的版本在下…

Spring Boot整合Lombok详解

文章目录 Spring Boot整合Lombok详解一、引言二、整合Lombok1、安装Lombok插件2、添加Lombok依赖3、使用Lombok注解1.1、Data1.2、NoArgsConstructor、AllArgsConstructor和RequiredArgsConstructor1.3、Getter和Setter 三、Lombok的工作原理四、总结 Spring Boot整合Lombok详解…

会议直击|美格智能受邀出席第三届无锡智能网联汽车生态大会,共筑汽车产业新质生产力

11月10日,2024世界物联网博览会分论坛——第三届无锡智能网联汽车生态大会在无锡举行,美格智能CEO杜国彬受邀出席,并参与“中央域控:重塑汽车智能架构的未来”主题圆桌论坛讨论,与行业伙伴共同探讨智能网联汽车产业领域…

git同步fork和原始仓库

git同步fork和原始仓库 在使用Fork的情况下,保持你的Fork与原始仓库(上游仓库)同步是一项重要的维护任务,特别是当你想要持续贡献或保持你Fork中的项目更新时。以下是详细的步骤,指导你如何将Fork与上游仓库同步&…

【Vue】-组件开发-一个树组件

我们来自己搞一个树组件 1. 创建 Vue 项目 如果你还没有创建 Vue 项目,可以使用 Vue CLI 快速创建: vue create my-tree-component cd my-tree-component2. 安装依赖 确保安装了 Vue Router 和 Vuex(如果需要状态管理)&#x…

昇思大模型平台打卡体验活动:项目1基于MindSpore实现BERT对话情绪识别

基于MindSpore实现BERT对话情绪识别 1. 模型简介 BERT(Bidirectional Encoder Representations from Transformers)是由Google于2018年末开发并发布的一种新型语言模型,基于Transformer架构中的Encoder,并且具有双向编码的特性。…

vue+Springboot实现简单文件上传到本地

实现效果 点击上传文件按钮后&#xff0c;选择需要上传的文件&#xff0c;如果是图片的话&#xff0c;上传成功后可以直接在下面预览。 前端页面 <template><div class"file-upload"><el-upload:headers"getUploadConfig(token).headers"…

云原生周刊:Istio 1.24.0 正式发布

云原生周刊&#xff1a;Istio 1.24.0 正式发布 开源项目推荐 Kopf Kopf 是一个简洁高效的 Python 框架&#xff0c;只需几行代码即可编写 Kubernetes Operator。Kubernetes&#xff08;K8s&#xff09;作为强大的容器编排系统&#xff0c;虽自带命令行工具&#xff08;kubec…

使用 Spring Boot 进行加密和解密:SecretKeySpec 和 Cipher

在现代软件开发中&#xff0c;数据加密和解密是保护敏感信息的重要手段。本文将介绍如何在 Spring Boot 项目中使用 Java 的 SecretKeySpec 和 Cipher 类来实现对称加密和解密。 为什么选择对称加密&#xff1f; 对称加密算法使用相同的密钥进行加密和解密。其主要优点包括速…

解决 Vue3、Vite 和 TypeScript 开发环境下跨域的问题,实现前后端数据传递

引言 本文介绍如何在开发环境下解决 Vite 前端&#xff08;端口 3000&#xff09;和后端&#xff08;端口 80&#xff09;之间的跨域问题&#xff1a; 在开发环境中&#xff0c;前端使用的 Vite 端口与后端端口不一致&#xff0c;会产生跨域错误提示&#xff1a; Access to X…

Java项目实战II基于微信小程序的订餐系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导 一、前言 随着移动互联网技术的飞速发展&#xff0…