vue2 自动化部署 shell 脚本

embedded/2024/11/14 1:15:41/

需求场景:在云平台中进行开发时,由于无法连接外网,在部署前端项目时,是通过本地打包再上传到服务器的方式进行部署的。基于这种部署场景,通过 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.ppmy.cn/embedded/136939.html

相关文章

Solon MVC 的 @Mapping 用法说明

在 Solon Mvc 里,Mapping 注解一般是配合 Controller 和 Remoting,作请求路径映射用的。且,只支持加在 public 函数 或 类上。 1、注解属性 属性说明备注value路径与 path 互为别名path路径与 value 互为别名method请求方式限定(defall)可用…

【C++ 算法进阶】算法提升十四

目录 括号匹配问题 (动态规划)题目题目分析代码 子数组最接近某个数 (动态规划)题目题目分析代码 求出数组中缺失的最小正整数 (贪心)题目题目分析代码 恢复二叉搜索树 (二叉树的性质&#xff0…

【Python】爬虫通过验证码

1、将验证码下载至本地 # 获取验证码界面html url http://www.example.com/a.html resp requests.get(url) soup BeautifulSoup(resp.content.decode(UTF-8), html.parser)#找到验证码图片标签,获取其地址 src soup.select_one(div.captcha-row img)[src]# 验证…

Qt:QPdfDocument渲染PDF文件时的信息丢失问题

背景 Qt自带了QPdfDocument可以用来打开并渲染PDF文件,同时Qt也提供了qtpdf multipage example,可以浏览多页PDF文件,如下图: 问题 但在使用过程中发现,对于某些PDF文件,QPdfDocument在渲染时会丢失部分信…

Golang | Leetcode Golang题解之第542题01矩阵

题目: 题解: type point struct{x, y int }var dirs []point{{-1, 0}, {1, 0}, {0, -1}, {0, 1}}func updateMatrix(mat [][]int) [][]int {var m, n len(mat), len(mat[0])var res make([][]int, m)var visited make([][]bool, m)var queue []poin…

Vivado+Vscode联合打造verilog环境

一、Vivado下载安装 详细参考我另一篇文章: Vivado2022.2下载安装_fpga vivado下载-CSDN博客https://blog.csdn.net/weixin_61081689/article/details/143460790?spm1001.2014.3001.5501 二、Vscode下载安装 详细参考我另一篇文章: VscodeAnacond…

Spring Boot基础教学:Spring Boot 简介

第一部分:Spring Boot 简介 1.1 什么是Spring Boot? Spring框架的简介Spring Boot与Spring框架的关系Spring Boot的优势 1.2 Spring Boot的核心特性 自动配置起步依赖内嵌服务器Spring Boot CLIActuator 1.3 Spring Boot的应用场景 微服务REST API…

(C++11)委托构造函数--C++

文章目录 委托构造函数为什么要有委托构造函数代码解释注意事项 委托构造函数 C11 引入了委托构造的概念,这使得构造函数可以在同一个类中一个构造函数调用另一个构造函 数,从而达到简化代码的目的。 就是委托其他构造函数帮忙构造。 为什么要有委托构…