# 面试管理系统 - 部署指南
## 📋 目录
- [前置准备](#前置准备)
- [环境配置](#环境配置)
- [构建打包](#构建打包)
- [部署方式](#部署方式)
- [验证测试](#验证测试)
- [维护更新](#维护更新)
- [常见问题](#常见问题)
---
## 前置准备
### 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
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
```
#### 2. 配置虚拟主机
```apache
ServerName yourdomain.com
DocumentRoot /var/www/interview_web
AllowOverride All
Require all granted
ProxyPass /api http://127.0.0.1:8000/api
ProxyPassReverse /api http://127.0.0.1:8000/api
```
---
## 验证测试
### 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