一个 PHP 单文件搞定虚拟主机自动化部署工具

背景

对于很多个人开发者和小团队来说，前端项目的部署往往依赖虚拟主机。虚拟主机虽然便宜够用，但更新代码的流程却非常原始：本地 npm run build，FTP 连接，手动删除旧文件，再上传新文件……步骤繁琐、容易出错，而且没有任何回滚手段。

市面上当然有各种 CI/CD 方案，但虚拟主机通常不支持 Node.js、没有 SSH，只能跑 PHP。能不能用一个 PHP 文件就解决这些问题？

于是就有了这个工具。

核心功能

这是一个纯 PHP 单文件的前端部署管理页面，放在网站目录下即可运行，无需数据库、无需 Composer、无需任何依赖。

功能一览

• 🔐 密码认证 —— Session 机制，登录后才能操作
• 📦 拖拽上传 —— 支持拖拽或点击上传 .zip 压缩包
• 🧹 自动解压 —— 上传后自动清空目标目录并解压
• 🔄 智能扁平化 —— 自动检测并处理多余的 dist/ 嵌套层级
• 🗑 垃圾清理 —— 自动清除 __MACOSX、.DS_Store 等打包残留
• 💾 部署前备份 —— 每次部署自动将当前文件备份到 _backup_YYYYMMDD_HHmmss/
• ♻ 失败回滚 —— 解压失败时自动从备份恢复，保证网站不挂
• 📋 备份管理 —— 查看、下载、恢复、删除历史备份
• 🛡 CSRF 防护 —— 部署操作带 token 校验
• 🌓 深色 / 浅色模式 —— 支持一键切换，偏好自动保存
• ✨ 主题切换动画 —— 基于 View Transition API 的圆形扩散效果

使用方式

1. 部署文件

将 deploy.php 上传到虚拟主机的网站根目录（也就是域名解析到的目录，通常是 dist/ 或 public_html/）。

# 用 FTP 或文件管理器上传
deploy.php  →  /wwwroot/你的域名/

2. 修改密码

打开 deploy.php，修改第 11 行的访问密码：

$ACCESS_PASSWORD = '123123';  // 改成你自己的密码

3. 访问页面

浏览器打开 https://你的域名/deploy.php，输入密码即可进入部署界面。

4. 部署流程

本地 npm run build → 打包 dist 为 zip → 页面拖拽上传 → 自动部署完成

每次部署会自动备份旧文件，保留最近 10 份，可在「备份记录」中查看、下载或恢复。

技术实现

架构设计

整个工具是完全自包含的单文件 PHP 应用，结构清晰：

配置区 → 辅助函数 → 登录验证 → 部署逻辑 → 备份管理 → HTML 界面

部署流程（五步）

备份 → 清空 → 解压 → 扁平化+清理 → 校验+清理旧备份

每一步都有错误处理，解压失败会自动从备份恢复，确保网站始终可用。

亮点技术细节

1. 智能扁平化

用户打包方式不一：有的人在 dist/ 目录内打包，有的人在外层打包了整个 dist/ 文件夹。工具解压后会自动检测是否存在嵌套的 dist/ 目录，有则将其内容提升到当前目录并删除空壳。

2. View Transition API 主题动画

参考 Element Plus 官网实现，利用浏览器原生 document.startViewTransition() + clip-path: circle() 实现从切换按钮位置扩散 / 收缩的圆形动画效果：

• 关灯（浅→深）：暗色圆从右上角扩散至全屏
• 开灯（深→浅）：暗色圆从全屏收缩至右上角

不支持 VT API 的浏览器降级为即时切换。

3. 备份与回滚

每次部署前将当前文件完整备份到 _backup_时间戳/ 目录，自动排除 deploy.php 自身、已有备份和隐藏文件。如果解压失败或压缩包损坏，自动清空残留并从最新备份恢复。备份面板支持下载（重新打包为 zip）和恢复到任意历史版本。

4. 安全措施

• Session 登录认证
• CSRF Token 防跨站攻击
• 备份删除和恢复操作二次确认弹窗
• 密码存储于服务端，不暴露给前端

适用场景

场景	是否适合
虚拟主机 + 前端静态项目	✅ 完美
Vite / Vue / React 项目	✅
不支持 SSH 的主机	✅
需要频繁更新的项目	✅
多人协作需要备份回滚	✅
有完整 CI/CD 的项目	❌ 不需要
需要数据库的复杂部署	❌ 不适合

总结

这个工具本质上是用 PHP 的最后一公里能力，在虚拟主机这种受限环境下，提供了一个接近现代 CI/CD 体验的部署方案。单文件、零依赖、开箱即用——把 deploy.php 丢到服务器上，前端部署就变成了拖拽一个 zip 包的事情。

完整源码已开源，欢迎使用和反馈。

下载地址