需求场景:在云平台中进行开发时,由于无法连接外网,在部署前端项目时,是通过本地打包再上传到服务器的方式进行部署的。基于这种部署场景,通过 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=$1
mkdir -p "$TARGET_DIR"
}
# 处理单个仓库
handle_repository() {
local GITLAB_URL=$1
local LOCAL_PATH=$2
local BRANCH_NAME=$3
local TARGET_DIR=$4
local TIMESTAMP=$5
# 检查本地仓库是否存在
if [ -d "$LOCAL_PATH" ]; then
# 如果本地仓库存在,则进入该目录并检查是否为 Git 仓库
cd "$LOCAL_PATH"
# 检查当前目录是否为 Git 仓库
if [ -d .git ]; then
echo "Update existing repository '$LOCAL_PATH'..."
git fetch origin # 先 fetch 最新的远程分支信息
# 检查远程分支是否存在
if git rev-parse --verify "origin/$BRANCH_NAME" >/dev/null 2>&1; then
git checkout "$BRANCH_NAME" # 切换到指定分支
git pull origin "$BRANCH_NAME" || {
echo "Error: Failed to pull from origin $BRANCH_NAME."
exit 1
}
else
echo "Error: Remote branch $BRANCH_NAME does not exist."
exit 1
fi
else
# 如果本地路径存在但不是 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"
fi
else
# 如果本地仓库不存在,则克隆新的仓库,并指定分支
echo "Cloning repository '$LOCAL_PATH'..."
git clone -b "$BRANCH_NAME" "$GITLAB_URL" "$LOCAL_PATH"
fi
# 进入仓库目录
cd "$LOCAL_PATH"
# 检查 node_modules 是否存在
if [ -d node_modules ]; then
echo "node_modules directory exists. Proceeding with backup and build..."
else
echo "Warning: node_modules directory does not exist. Please upload the local node_modules package."
exit 1
fi
# 检查 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"
else
echo "Error: Failed to create dist directory after build."
exit 1
fi
}
# 确保目标目录存在
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
目录是否创建成功,如果成功则将其内容复制到目标目录。