happy-life-star/web/deploy-auto-build.md

前端部署脚本 - 强制构建优化

📋 更新说明

前端部署脚本 web/deploy.sh 已优化，现在必须先执行 npm run build 进行构建，确保最新代码生效。

🎯 优化内容

之前的行为

• 如果 dist 目录不存在，脚本会报错并退出
• 需要手动执行 npm run build 后才能部署

现在的行为

• 无论 dist 目录是否存在，都必须先执行 npm run build
• 确保每次部署都使用最新代码
• 构建成功后自动继续上传
• 构建失败时报错并退出

🚀 使用方法

方式 1: 直接执行部署脚本（推荐）

cd web
bash deploy.sh

脚本会自动：

1. 检查 dist 目录
2. 如果不存在，自动执行 npm run build
3. 构建成功后上传文件到服务器

方式 2: 手动构建后部署

cd web
npm run build
bash deploy.sh

📊 脚本流程

开始部署
  ↓
检查 npm 命令是否存在
  ├─ 不存在 → 报错退出
  └─ 存在 → 继续
      ↓
    执行 npm run build（必须执行）
      ├─ 失败 → 报错退出
      └─ 成功 → 继续
          ↓
        验证 dist 目录是否存在
          ├─ 不存在 → 报错退出
          └─ 存在 → 继续
              ↓
            检查 scp 命令是否存在
              ├─ 不存在 → 报错退出
              └─ 存在 → 继续
                  ↓
                上传 index.html
                  ↓
                上传 assets 目录
                  ↓
                上传测试文件（如果存在）
                  ↓
                显示部署完成信息

✅ 脚本特性

强制构建

• 无论 dist 目录是否存在，都必须执行 npm run build
• 确保每次部署都使用最新代码
• 避免旧代码被部署

错误处理

• 检查 npm 命令是否存在
• 检查 scp 命令是否存在
• 构建失败时立即退出
• 上传失败时提供诊断信息

用户友好

• 彩色化输出信息
• 清晰的进度提示
• 详细的错误信息

🔍 常见场景

场景 1: 首次部署

bash deploy.sh
# 脚本会自动构建并部署

场景 2: 代码更新后部署

bash deploy.sh
# 脚本会自动重新构建并部署

场景 3: 任何情况下都会重新构建

# 无论 dist 目录是否存在，脚本都会重新构建
bash deploy.sh
# 确保最新代码生效

场景 4: 使用一键部署脚本

bash deploy-all.sh frontend
# 会自动调用 web/deploy.sh，自动构建并部署

📝 脚本代码

关键部分：

# 检查是否安装了npm
if ! command -v npm &> /dev/null; then
    echo "❌ 错误: 未找到npm命令，请先安装Node.js"
    exit 1
fi

# 执行构建（无论dist目录是否存在，都必须构建）
echo "📦 开始构建前端项目..."
if npm run build; then
    echo "✅ 前端项目构建成功"
else
    echo "❌ 前端项目构建失败，请检查代码"
    exit 1
fi

# 验证dist目录是否存在
if [ ! -d "dist" ]; then
    echo "❌ 错误: 构建后dist目录仍不存在，请检查构建配置"
    exit 1
fi

🔧 故障排查

问题 1: npm 命令不存在

错误信息: 未找到npm命令，请先安装Node.js

解决方案:

# 安装 Node.js
# macOS
brew install node

# Ubuntu/Debian
sudo apt-get install nodejs npm

# 验证安装
npm --version

问题 2: 构建失败

错误信息: 前端项目构建失败，请检查代码

解决方案:

# 检查代码是否有错误
cd web
npm run build

# 查看详细错误信息
# 根据错误信息修复代码

问题 3: scp 命令不存在

错误信息: 未找到scp命令，请安装OpenSSH客户端

解决方案:

# macOS
brew install openssh

# Ubuntu/Debian
sudo apt-get install openssh-client

# 验证安装
scp -V

📚 相关文档

• web/deploy.sh - 前端部署脚本
• deploy-all.sh - 一键部署脚本
• 一键部署说明.md - 完整部署指南

✨ 总结

前端部署脚本现在更加智能和便捷：

• ✅ 自动检测并构建
• ✅ 错误处理完善
• ✅ 用户体验优化
• ✅ 与一键部署脚本无缝集成

现在只需执行 bash deploy.sh 或 bash deploy-all.sh，脚本会自动处理所有事情！