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

## 📋 更新说明

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

## 🎯 优化内容

### 之前的行为
- 如果 `dist` 目录不存在，脚本会报错并退出
- 需要手动执行 `npm run build` 后才能部署

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

## 🚀 使用方法

### 方式 1: 直接执行部署脚本（推荐）
```bash
cd web
bash deploy.sh
```

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

### 方式 2: 手动构建后部署
```bash
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
bash deploy.sh
# 脚本会自动构建并部署
```

### 场景 2: 代码更新后部署
```bash
bash deploy.sh
# 脚本会自动重新构建并部署
```

### 场景 3: 任何情况下都会重新构建
```bash
# 无论 dist 目录是否存在，脚本都会重新构建
bash deploy.sh
# 确保最新代码生效
```

### 场景 4: 使用一键部署脚本
```bash
bash deploy-all.sh frontend
# 会自动调用 web/deploy.sh，自动构建并部署
```

## 📝 脚本代码

关键部分：

```bash
# 检查是否安装了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`

**解决方案**:
```bash
# 安装 Node.js
# macOS
brew install node

# Ubuntu/Debian
sudo apt-get install nodejs npm

# 验证安装
npm --version
```

### 问题 2: 构建失败
**错误信息**: `前端项目构建失败，请检查代码`

**解决方案**:
```bash
# 检查代码是否有错误
cd web
npm run build

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

### 问题 3: scp 命令不存在
**错误信息**: `未找到scp命令，请安装OpenSSH客户端`

**解决方案**:
```bash
# 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`，脚本会自动处理所有事情！