203 lines
4.3 KiB
Markdown
203 lines
4.3 KiB
Markdown
# 前端部署脚本 - 强制构建优化
|
|
|
|
## 📋 更新说明
|
|
|
|
前端部署脚本 `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`，脚本会自动处理所有事情！
|
|
|