DEPLOYMENT_GUIDE.md 11 KB

面试管理系统 - 部署指南

📋 目录


前置准备

1. 环境检查清单

服务器环境要求

  • ✅ Linux/Windows Server
  • ✅ Node.js >= 16.0.0
  • ✅ Nginx >= 1.18
  • ✅ 后端服务正常运行
  • ✅ 数据库配置正确

开发环境(本地构建)

# 检查 Node.js 版本
node -v

# 检查 npm 版本  
npm -v

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

2. 获取代码

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

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

3. 准备部署目录

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

环境配置

1. 安装依赖

# 进入项目目录
cd interview_web

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

# 或手动安装
npm install

注意

  • 首次安装可能需要 3-5 分钟
  • 如果安装失败,尝试清除缓存:npm cache clean --force

2. 配置环境变量

开发环境(.env.development)

# API 地址
VITE_API_URL=http://localhost:8000

# 公共路径
VITE_PUBLIC_PATH=/

# 端口号
VITE_PORT=8080

# 构建输出目录
VITE_OUTPUT_DIR=dist

生产环境(.env.production)

# API 地址(替换为实际后端地址)
VITE_API_URL=https://api.yourdomain.com

# 公共路径
VITE_PUBLIC_PATH=/

# 端口号(一般不需要,用于本地预览)
VITE_PORT=443

本地生产环境(.env.local_prod)

# 本地测试用生产环境
VITE_API_URL=http://localhost:8000
VITE_PUBLIC_PATH=/

配置步骤

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

构建打包

1. 构建生产版本

# 标准生产构建
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. 本地验证

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

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

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

验证项目

  • ✅ 页面正常加载
  • ✅ 路由跳转正常
  • ✅ API 请求正常
  • ✅ 样式显示正常
  • ✅ 无控制台错误

部署方式

方式一:Nginx 静态部署(推荐)

1. 复制文件到服务器

# 方法一:使用 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

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. 启用站点

# 创建软链接
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(可选但推荐)

# 使用 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

# 构建阶段
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

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. 启动容器

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

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

# 停止服务
docker-compose down

方式三:Apache 部署

1. 配置 .htaccess

dist 目录下创建 .htaccess 文件:

<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. 配置虚拟主机

<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. 性能测试

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

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

3. 安全检查

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

维护更新

1. 更新流程

# 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. 回滚版本

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

3. 监控与日志

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

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

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

4. 定期维护

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

常见问题

Q1: 页面白屏怎么办?

可能原因

  • JS 文件路径错误
  • 环境变量配置错误
  • 浏览器缓存问题

解决方案

# 1. 检查构建输出
ls -la dist/assets/

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

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

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

Q2: API 请求 404

可能原因

  • 后端服务未启动
  • 代理配置错误
  • API 地址配置错误

解决方案

# 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 配置错误
  • 文件路径错误

解决方案

# 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 配置中有:
location / {
    try_files $uri $uri/ /index.html;
}

Q5: 构建时间过长

解决方案

# 1. 使用缓存加速
npm ci

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

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

Q6: 跨域问题

解决方案

# 在 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