一键打包和发布dist

前言

在日常的前端项目开发中，我们经常需要将构建好的静态资源部署到远程服务器。传统的部署流程通常是：

1. 手动删除旧的构建产物
2. 执行构建命令生成新的 dist 目录
3. 通过 FTP、SCP 或其他方式上传文件到服务器
4. 手动清理服务器上不再需要的旧文件

这个过程不仅繁琐，还容易出错。如果忘记删除旧文件，可能会导致服务器上残留过时的资源，影响应用的正常运行。

使用 rsync 配合 --delete 参数，可以自动化整个流程，实现：

• 自动化部署：一条命令完成清理、构建、上传的全流程
• 精确同步：确保服务器上的文件与本地构建产物完全一致
• 增量传输：只传输变更的文件，提高部署效率
• 自动清理：自动删除服务器上不再需要的旧文件

使用方法

在项目根目录下执行：

rm -rf dist && pnpm run build && rsync -av --delete dist/ user@host:/var/www/dist/

命令解析

这个命令由三个部分组成，通过 && 连接，确保前一个命令成功后才执行下一个：

1. rm -rf dist：删除本地的 dist 目录，确保构建产物是全新的
2. pnpm run build：执行项目的构建命令，生成最新的 dist 目录
3. rsync -av --delete dist/ user@host:/var/www/dist/：将本地 dist 目录同步到远程服务器
   • -a：归档模式（archive mode），保留文件属性（权限、时间戳等）
   • -v：详细模式（verbose），显示同步过程的详细信息
   • --delete：删除远程服务器上多余的文件，确保远程目录与本地完全一致
   • dist/：本地源目录（注意末尾的斜杠）
   • user@host:/var/www/dist/：远程服务器目标目录

工作原理

rsync 的 --delete 参数会对比本地和远程的文件，执行以下操作：

• 上传本地存在但远程不存在的文件
• 更新本地和远程都存在但内容不同的文件
• 删除远程存在但本地不存在的文件

效果等同于：

• 不需要在服务器上手动执行 rm -rf
• 本地 dist 目录是什么，服务器上的 dist 目录就是什么
• 多余的文件会自动删除，保持目录结构完全一致

注意事项

⚠️ 安全提示：--delete 参数功能强大，如果路径写错，可能会误删服务器上的重要文件。建议：

1. 首次使用前先测试：使用 --dry-run 参数进行模拟运行，不会真正执行删除操作

   rsync -av --delete --dry-run dist/ user@host:/var/www/dist/

2. 仔细检查路径：确保远程路径正确，特别是目标目录的路径

3. 备份重要数据：在生产环境使用前，建议先备份服务器上的现有文件

--dry-run 参数会模拟整个同步过程，显示将要执行的操作，但不会实际修改任何文件，可以用来验证路径和配置是否正确。