# 面试管理系统 - 部署指南 ## 📋 目录 - [前置准备](#前置准备) - [环境配置](#环境配置) - [构建打包](#构建打包) - [部署方式](#部署方式) - [验证测试](#验证测试) - [维护更新](#维护更新) - [常见问题](#常见问题) --- ## 前置准备 ### 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