使用rsync自动化部署前端打包文件

文摘   2024-11-08 09:54   湖北  

作为一名开发者,经常需要将本地文件同步到服务器,特别是前端项目打包后的部署。本文将从 rsync 的基础知识讲起,最后提供一个 Vue3 项目的自动化部署方案 💡

一、什么是 rsync?🤔

rsync 是一个快速、通用的远程和本地文件复制工具。它有以下特点:

  • • 增量传输:只传输修改的部分 ✨

  • • 支持压缩传输 📦

  • • 保留文件权限和时间戳 🕒

  • • 支持排除特定文件 📂

  • • 支持断点续传 🔄

二、基础用法 📘

2.1 基本语法

rsync -avz /源目录/ user@host:/目标目录/

2.2 常用参数

  • • -a:归档模式,保留所有属性 📜

  • • -v:显示详细信息 🔍

  • • -z:传输时压缩数据 💨

  • • -P:显示进度 🚧

  • • --delete:删除目标目录中源目录没有的文件 🗑️

  • • --exclude:排除特定文件 🚫

三、进阶技巧 🔧

3.1 排除多个文件

rsync -avz \
--exclude 'node_modules' \
--exclude '.git' \
--exclude '*.log' \
/source/ user@server:/dest/

3.2 限速传输

# 限制带宽为 1MB/s
rsync -avz --bwlimit=1000 /source/ user@server:/dest/

3.3 断点续传

rsync -avzP --partial /source/ user@server:/dest/

四、实战案例:Vue3 项目自动化部署 🎯

下面我们来实现一个完整的 Vue3 项目自动化部署方案。

4.1 项目结构 🏗️

my-vue3-project/
├── src/
├── dist/          # 打包输出目录
├── deploy.sh      # 部署脚本
└── package.json

4.2 部署脚本 🛠️

创建 deploy.sh

#!/bin/bash

# 配置信息
SERVER_USER="your-username"
SERVER_HOST="your-server-ip"
SERVER_PORT="22"
SERVER_PATH="/var/www/html/my-app"
DIST_PATH="./dist/"

# 颜色输出函数
print_green() {
    echo -e "\033[32m$1\033[0m"
}

print_red() {
    echo -e "\033[31m$1\033[0m"
}

# 1. 确认部署
read -p "确认部署到生产环境? (y/n) " -n 1 -r
echo
if [[ ! $REPLY =~ ^[Yy]$ ]]
then
    print_red "部署已取消 🚫"
    exit 1
fi

# 2. 构建项目
print_green "开始构建项目... 🔨"
npm run build

if [ $? -ne 0 ]; then
    print_red "构建失败! ❌"
    exit 1
fi

# 3. 同步到服务器
print_green "开始同步到服务器... 🌐"
rsync -avz --progress \
    --exclude '.git' \
    --exclude '.env' \
    --delete \
    -e "ssh -p ${SERVER_PORT}" \
    ${DIST_PATH} \
    ${SERVER_USER}@${SERVER_HOST}:${SERVER_PATH}

if [ $? -ne 0 ]; then
    print_red "部署失败! ❌"
    exit 1
fi

print_green "部署成功!🎉✨"

4.3 配置 package.json 📦

在 package.json 中添加部署命令:

{
  "scripts": {
    "deploy": "bash deploy.sh"
  }
}

4.4 使用方法 🏃‍♂️

  1. 1. 确保服务器已安装 rsync

# Ubuntu/Debian
sudo apt-get install rsync

# CentOS
sudo yum install rsync
  1. 1. 配置 SSH 免密登录(推荐)🔐

# 生成密钥对
ssh-keygen -t rsa

# 上传公钥到服务器
ssh-copy-id -i ~/.ssh/id_rsa.pub user@server
  1. 1. 执行部署 🚀

npm run deploy

五、进阶优化建议 💡

  1. 1. 添加环境判断

# 在 deploy.sh 中添加环境参数
ENV=$1
if [ "$ENV" != "prod" ] && [ "$ENV" != "test" ]; then
    print_red "请指定正确的环境: prod 或 test"
    exit 1
fi
  1. 1. 添加部署记录 📝

# 记录每次部署的信息
echo "$(date '+%Y-%m-%d %H:%M:%S') - Deployed by $(whoami)" >> deploy.log
  1. 1. 添加备份功能 🗄️

# 部署前备份
BACKUP_DIR="/backup/$(date +%Y%m%d)"
rsync -avz ${SERVER_USER}@${SERVER_HOST}:${SERVER_PATH} ${BACKUP_DIR}
  1. 1. 添加健康检查 🔍

# 部署后检查服务是否正常
CHECK_URL="https://your-domain.com"
if curl -s --head ${CHECK_URL} | grep "200 OK" > /dev/null; then
    print_green "服务检查正常 ✅"
else
    print_red "服务可能异常,请检查! ❗"
fi

六、常见问题和解决方案 💬

  1. 1. 权限问题 🔐

  • • 确保目标目录有正确的权限

  • • 使用 sudo rsync 或调整目录权限

  1. 1. 同步速度慢 🐢

  • • 使用 -z 压缩传输

  • • 合理设置 --bwlimit

  • • 考虑使用 --partial 支持断点续传

  1. 1. 文件丢失 ⚠️

  • • 使用 --backup 和 --backup-dir 保留备份

  • • 谨慎使用 --delete 参数


rsync 是一个强大的文件同步工具,掌握它可以大大提高我们的开发效率。通过本文的自动化部署方案,我们可以轻松实现前端项目的快速部署 🚀。建议大家在实际使用时:

  1. 1. 总是先测试再部署到生产环境 ⚙️

  2. 2. 保持良好的备份习惯 🗄️

  3. 3. 合理使用 rsync 的参数 ⚖️

  4. 4. 建立完整的部署日志机制 📜

希望这篇文章对大家有帮助!如果有任何问题,欢迎在评论区讨论 ✍️ 😊。


字节笔记本
专注于科技领域的分享,AIGC,全栈开发,产品运营
 最新文章