# 面试管理系统 - 部署指南

## 📋 目录

- [前置准备](#前置准备)
- [环境配置](#环境配置)
- [构建打包](#构建打包)
- [部署方式](#部署方式)
- [验证测试](#验证测试)
- [维护更新](#维护更新)
- [常见问题](#常见问题)

---

## 前置准备

### 1. 环境检查清单

**服务器环境要求**
- ✅ Linux/Windows Server
- ✅ Node.js >= 16.0.0
- ✅ Nginx >= 1.18
- ✅ 后端服务正常运行
- ✅ 数据库配置正确

**开发环境（本地构建）**
```bash
# 检查 Node.js 版本
node -v

# 检查 npm 版本  
npm -v

# 检查项目依赖
npm list --depth=0
```

### 2. 获取代码

```bash
# 从仓库克隆代码
git clone https://your-repo-url.git
cd interview_web

# 或使用已有代码
cd /path/to/interview_web
```

### 3. 准备部署目录

```bash
# 创建部署目录
mkdir -p /var/www/interview_web
chmod 755 /var/www/interview_web
```

---

## 环境配置

### 1. 安装依赖

```bash
# 进入项目目录
cd interview_web

# 安装依赖（推荐使用 npm ci 保证版本一致）
npm ci

# 或手动安装
npm install
```

**注意**：
- 首次安装可能需要 3-5 分钟
- 如果安装失败，尝试清除缓存：`npm cache clean --force`

### 2. 配置环境变量

#### 开发环境（.env.development）
```env
# API 地址
VITE_API_URL=http://localhost:8000

# 公共路径
VITE_PUBLIC_PATH=/

# 端口号
VITE_PORT=8080

# 构建输出目录
VITE_OUTPUT_DIR=dist
```

#### 生产环境（.env.production）
```env
# API 地址（替换为实际后端地址）
VITE_API_URL=https://api.yourdomain.com

# 公共路径
VITE_PUBLIC_PATH=/

# 端口号（一般不需要，用于本地预览）
VITE_PORT=443
```

#### 本地生产环境（.env.local_prod）
```env
# 本地测试用生产环境
VITE_API_URL=http://localhost:8000
VITE_PUBLIC_PATH=/
```

**配置步骤**：
1. 复制环境变量模板
2. 根据实际情况修改配置
3. 确保后端 API 地址正确
4. 检查跨域配置

---

## 构建打包

### 1. 构建生产版本

```bash
# 标准生产构建
npm run build

# 本地生产构建（用于本地验证）
npm run build:local
```

### 2. 构建输出

构建完成后，在 `dist/` 目录下会生成以下文件：

```
dist/
├── index.html              # 入口文件
├── assets/                 # 静态资源
│   ├── *.js               # JavaScript 文件
│   ├── *.css              # 样式文件
│   └── *.png              # 图片资源
└── favicon.ico            # 网站图标
```

**构建信息**：
- 总文件大小：约 5-10 MB
- JS 文件：已压缩和代码分割
- CSS 文件：已压缩和合并
- 图片：已优化

### 3. 本地验证

```bash
# 安装 http-server 用于测试
npm install -g http-server

# 在 dist 目录启动测试服务器
cd dist
http-server -p 8080

# 访问 http://localhost:8080 进行测试
```

**验证项目**：
- ✅ 页面正常加载
- ✅ 路由跳转正常
- ✅ API 请求正常
- ✅ 样式显示正常
- ✅ 无控制台错误

---

## 部署方式

### 方式一：Nginx 静态部署（推荐）

#### 1. 复制文件到服务器

```bash
# 方法一：使用 SCP
scp -r dist/* user@server:/var/www/interview_web/

# 方法二：使用 rsync
rsync -avz dist/ user@server:/var/www/interview_web/

# 方法三：在服务器上使用 Git
git pull origin master
npm run build
cp -r dist/* /var/www/interview_web/
```

#### 2. 配置 Nginx

创建或编辑配置文件 `/etc/nginx/sites-available/interview_web`：

```nginx
server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    root /var/www/interview_web;
    index index.html;

    # 字符集设置
    charset utf-8;

    # 日志设置
    access_log /var/log/nginx/interview_web.access.log;
    error_log /var/log/nginx/interview_web.error.log;

    # Vue Router 历史模式支持
    location / {
        try_files $uri $uri/ /index.html;
    }

    # API 代理
    location /api {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # 超时设置
        proxy_connect_timeout 300;
        proxy_send_timeout 300;
        proxy_read_timeout 300;
    }

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Gzip 压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript 
               application/json application/javascript application/xml+rss 
               application/rss+xml font/truetype font/opentype 
               application/vnd.ms-fontobject image/svg+xml;

    # 禁止访问隐藏文件
    location ~ /\. {
        deny all;
        access_log off;
        log_not_found off;
    }
}
```

#### 3. 启用站点

```bash
# 创建软链接
sudo ln -s /etc/nginx/sites-available/interview_web /etc/nginx/sites-enabled/

# 测试配置
sudo nginx -t

# 重启 Nginx
sudo systemctl reload nginx

# 或
sudo service nginx restart
```

#### 4. 配置 HTTPS（可选但推荐）

```bash
# 使用 Let's Encrypt 免费证书
sudo apt-get install certbot python3-certbot-nginx

# 获取证书
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

# 证书会自动续期，也可以手动测试
sudo certbot renew --dry-run
```

### 方式二：Docker 部署

#### 1. 创建 Dockerfile

```dockerfile
# 构建阶段
FROM node:16-alpine AS builder

WORKDIR /app

# 复制依赖文件
COPY package*.json ./

# 安装依赖
RUN npm ci --only=production

# 复制源代码
COPY . .

# 构建
RUN npm run build

# 生产阶段
FROM nginx:alpine

# 复制构建产物
COPY --from=builder /app/dist /usr/share/nginx/html

# 复制 Nginx 配置
COPY deploy/nginx.conf /etc/nginx/conf.d/default.conf

# 暴露端口
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]
```

#### 2. 创建 docker-compose.yml

```yaml
version: '3.8'

services:
  frontend:
    build: .
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
    restart: unless-stopped
    depends_on:
      - backend

  backend:
    image: django-backend:latest
    ports:
      - "8000:8000"
    environment:
      - DATABASE_URL=mysql://user:password@db:3306/dbname
    restart: unless-stopped

  db:
    image: mysql:8.0
    environment:
      - MYSQL_ROOT_PASSWORD=password
      - MYSQL_DATABASE=dbname
    volumes:
      - mysql_data:/var/lib/mysql
    restart: unless-stopped

volumes:
  mysql_data:
```

#### 3. 启动容器

```bash
# 构建并启动
docker-compose up -d

# 查看日志
docker-compose logs -f frontend

# 停止服务
docker-compose down
```

### 方式三：Apache 部署

#### 1. 配置 .htaccess

在 `dist` 目录下创建 `.htaccess` 文件：

```apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
```

#### 2. 配置虚拟主机

```apache
<VirtualHost *:80>
    ServerName yourdomain.com
    DocumentRoot /var/www/interview_web
    
    <Directory /var/www/interview_web>
        AllowOverride All
        Require all granted
    </Directory>
    
    ProxyPass /api http://127.0.0.1:8000/api
    ProxyPassReverse /api http://127.0.0.1:8000/api
</VirtualHost>
```

---

## 验证测试

### 1. 功能测试清单

#### 基础功能
- [ ] 页面正常加载
- [ ] 登录功能正常
- [ ] 路由跳转正常
- [ ] 菜单显示正常

#### 权限功能
- [ ] 权限验证正常
- [ ] 无权限操作被阻止
- [ ] 按钮权限控制正确

#### API 功能
- [ ] API 请求正常
- [ ] 数据获取正常
- [ ] 数据提交正常
- [ ] 文件上传正常

#### 界面功能
- [ ] 样式显示正常
- [ ] 响应式布局正常
- [ ] 图表显示正常
- [ ] 动画效果正常

### 2. 性能测试

```bash
# 使用 Chrome DevTools
# 1. 打开开发者工具
# 2. Network 面板查看加载时间
# 3. Performance 面板查看性能指标

# 期望指标：
# - 首屏加载时间 < 3秒
# - 页面交互响应 < 100ms
# - 资源文件已压缩
```

### 3. 安全检查

- [ ] HTTPS 已启用
- [ ] 敏感信息未暴露
- [ ] CORS 配置正确
- [ ] XSS 防护已开启
- [ ] CSRF 防护已开启

---

## 维护更新

### 1. 更新流程

```bash
# 1. 备份当前版本
cp -r /var/www/interview_web /var/www/interview_web.backup

# 2. 拉取最新代码
cd /path/to/interview_web
git pull origin master

# 3. 安装新依赖（如有）
npm install

# 4. 重新构建
npm run build

# 5. 更新文件
cp -r dist/* /var/www/interview_web/

# 6. 清除缓存
sudo nginx -s reload
```

### 2. 回滚版本

```bash
# 如果需要回滚
rm -rf /var/www/interview_web/*
cp -r /var/www/interview_web.backup/* /var/www/interview_web/
sudo nginx -s reload
```

### 3. 监控与日志

```bash
# 查看 Nginx 访问日志
tail -f /var/log/nginx/interview_web.access.log

# 查看错误日志
tail -f /var/log/nginx/interview_web.error.log

# 查看服务器资源
htop
# 或
top
```

### 4. 定期维护

- **每周**：检查日志，查看错误信息
- **每月**：更新依赖，安全补丁
- **每季度**：性能优化，代码审查

---

## 常见问题

### Q1: 页面白屏怎么办？

**可能原因**：
- JS 文件路径错误
- 环境变量配置错误
- 浏览器缓存问题

**解决方案**：
```bash
# 1. 检查构建输出
ls -la dist/assets/

# 2. 检查 Nginx 配置
sudo nginx -t

# 3. 清除浏览器缓存
# Ctrl + Shift + Delete

# 4. 检查控制台错误
# F12 打开开发者工具查看错误信息
```

### Q2: API 请求 404

**可能原因**：
- 后端服务未启动
- 代理配置错误
- API 地址配置错误

**解决方案**：
```bash
# 1. 检查后端服务
curl http://127.0.0.1:8000/api/test/

# 2. 检查代理配置
sudo cat /etc/nginx/sites-available/interview_web | grep proxy_pass

# 3. 检查环境变量
cat .env.production
```

### Q3: 静态资源加载失败

**可能原因**：
- 文件权限问题
- Nginx 配置错误
- 文件路径错误

**解决方案**：
```bash
# 1. 检查文件权限
ls -la /var/www/interview_web/assets/

# 2. 修改文件权限
sudo chmod -R 755 /var/www/interview_web/

# 3. 修改文件所有者
sudo chown -R www-data:www-data /var/www/interview_web/
```

### Q4: 路由刷新 404

**可能原因**：
- Nginx 未配置 try_files
- Apache 未启用 mod_rewrite

**解决方案**：
```nginx
# 确保 Nginx 配置中有：
location / {
    try_files $uri $uri/ /index.html;
}
```

### Q5: 构建时间过长

**解决方案**：
```bash
# 1. 使用缓存加速
npm ci

# 2. 使用并行构建
export NODE_OPTIONS="--max-old-space-size=4096"

# 3. 减少不必要的依赖
npm prune
```

### Q6: 跨域问题

**解决方案**：
```nginx
# 在 Nginx 配置中添加：
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
```

---

## 📞 技术支持

如有其他问题，请联系：
- 📧 邮箱：support@example.com
- 💬 社区：[社区地址]
- 📖 文档：[文档地址]

---

**最后更新**：2024年  
**文档版本**：v1.0

