网站中如何做图片轮播友情手机站
需求场景：在云平台中进行开发时，由于无法连接外网，在部署前端项目时，是通过本地打包再上传到服务器的方式进行部署的。基于这种部署场景，通过 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目录是否创建成功，如果成功则将其内容复制到目标目录。