# Web前端生产环境部署指南

## 📋 部署概述

本指南说明如何将Web前端工程部署到生产环境，后端API地址为：`http://47.121.125.41:8080/`

## 🔧 已完成配置

### 1. 生产环境API配置修改

已将生产环境配置文件 `web/.env.production` 中的API地址修改为：

```bash
# 原配置
VITE_APP_BASE_API = '/prod-api'

# 新配置 
VITE_APP_BASE_API = 'http://47.121.125.41:8080'
```

### 2. 配置文件备份

原始配置文件已备份为：`web/.env.production.backup`

## 🚀 部署步骤

### 步骤1：安装依赖并构建

```bash
# 进入web工程目录
cd web

# 安装依赖（如果还没有安装）
npm install

# 构建生产环境版本
npm run build:prod
```

### 步骤2：验证构建产物

```bash
# 构建完成后，检查dist目录
ls -la dist/

# 应该包含以下文件/目录：
# - index.html (主页面)
# - assets/ (静态资源：CSS、JS、图片等)
# - favicon.ico (网站图标)
```

### 步骤3：部署到Web服务器

#### 选项A：直接上传静态文件（推荐）

1. 将 `dist/` 目录下的所有文件上传到Web服务器的根目录
2. 确保Web服务器支持HTML5 History模式（SPA路由）

#### 选项B：使用Docker部署

```dockerfile
# Dockerfile示例
FROM nginx:alpine

# 复制构建产物到nginx目录
COPY dist/ /usr/share/nginx/html/

# 复制nginx配置（可选）
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]
```

### 步骤4：Web服务器配置

#### Nginx配置示例

如果使用Nginx作为Web服务器，需要配置支持Vue Router的History模式：

```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /usr/share/nginx/html;
    index index.html;

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

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

    # Gzip压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}
```

#### Apache配置示例

如果使用Apache，需要在网站根目录创建 `.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>
```

## 🔍 部署验证

### 1. 功能验证

部署完成后，访问网站进行以下验证：

```bash
# 访问主页
curl -I http://your-domain.com

# 检查API请求是否正常
# 在浏览器开发者工具中查看网络请求
# 确认API请求指向：http://47.121.125.41:8080
```

### 2. 关键检查点

- [ ] 页面正常加载
- [ ] 登录功能正常
- [ ] API请求指向正确的后端地址
- [ ] 路由跳转正常（刷新页面不出现404）
- [ ] 静态资源加载正常
- [ ] 浏览器控制台无错误

## 🌐 CORS配置注意事项

由于前端直接访问后端API，需要确保后端服务器配置了正确的CORS策略：

### 后端CORS配置检查

确保后端 `application.yml` 中包含以下配置：

```yaml
# CORS配置
cors:
  # 允许的域名，部署后需要添加前端域名
  allowed-origins:
    - http://localhost
    - http://localhost:80
    - http://your-frontend-domain.com  # 添加你的前端域名
  allowed-methods: GET,POST,PUT,DELETE,OPTIONS
  allowed-headers: "*"
  allow-credentials: true
```

## 🔒 安全配置建议

### 1. HTTPS配置

生产环境建议使用HTTPS：

```nginx
server {
    listen 443 ssl;
    server_name your-domain.com;
    
    ssl_certificate /path/to/your/certificate.crt;
    ssl_certificate_key /path/to/your/private.key;
    
    # 其他配置...
}

# HTTP重定向到HTTPS
server {
    listen 80;
    server_name your-domain.com;
    return 301 https://$server_name$request_uri;
}
```

### 2. 安全头配置

```nginx
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "no-referrer-when-downgrade" always;
add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;
```

## 🔄 替代部署方案：Nginx代理方式

如果不想修改前端配置，可以保持原始配置 `VITE_APP_BASE_API = '/prod-api'`，通过Nginx代理：

### 1. 恢复原始配置

```bash
# 恢复原始配置（如果需要）
cp web/.env.production.backup web/.env.production

# 重新构建
cd web && npm run build:prod
```

### 2. Nginx代理配置

```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /usr/share/nginx/html;
    index index.html;

    # 前端静态文件
    location / {
        try_files $uri $uri/ /index.html;
    }

    # API代理到后端服务器
    location /prod-api/ {
        proxy_pass http://47.121.125.41:8080/;
        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;
        
        # CORS处理
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,clientid';
        
        if ($request_method = 'OPTIONS') {
            return 204;
        }
    }
}
```

## 📊 性能优化建议

### 1. 构建优化

```bash
# 使用生产环境构建（已启用压缩）
npm run build:prod

# 检查构建产物大小
du -sh dist/
```

### 2. CDN配置

对于静态资源，建议使用CDN加速：

```nginx
# 静态资源使用CDN
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    
    # 如果有CDN，可以设置重定向
    # return 301 https://cdn.your-domain.com$request_uri;
}
```

## 🚨 故障排查

### 常见问题及解决方案

1. **页面刷新出现404**
   - 检查Web服务器是否配置了SPA路由支持
   - 确认 `try_files` 配置正确

2. **API请求失败**
   - 检查后端服务是否正常运行
   - 验证CORS配置
   - 检查防火墙和安全组设置

3. **静态资源加载失败**
   - 检查文件路径和权限
   - 验证Web服务器配置

4. **登录功能异常**
   - 检查加密配置是否与后端一致
   - 验证客户端ID配置

## 📝 部署检查清单

- [ ] 环境配置文件已正确修改
- [ ] 项目构建成功
- [ ] 静态文件已上传到Web服务器
- [ ] Web服务器配置正确
- [ ] 后端API地址可访问
- [ ] CORS配置正确
- [ ] 所有功能测试通过
- [ ] 性能测试通过
- [ ] 安全配置完成

## 🔄 部署脚本示例

```bash
#!/bin/bash
# deploy.sh - 自动化部署脚本

echo "开始部署Web前端..."

# 1. 构建项目
cd web
echo "正在安装依赖..."
npm install

echo "正在构建生产版本..."
npm run build:prod

# 2. 备份现有部署
if [ -d "/var/www/html.backup" ]; then
    rm -rf /var/www/html.backup
fi
cp -r /var/www/html /var/www/html.backup

# 3. 部署新版本
echo "正在部署新版本..."
rm -rf /var/www/html/*
cp -r dist/* /var/www/html/

# 4. 重启Web服务器
echo "正在重启Web服务器..."
sudo systemctl reload nginx

echo "部署完成！"
echo "请访问: http://your-domain.com"
```

---

**部署完成后，前端应用将通过配置的域名访问，所有API请求将直接指向 `http://47.121.125.41:8080/`**