增加后台管理模块

2025-10-27 23:57:31 +08:00
parent 3c1ba8e801
commit 0016453f20
420 changed files with 5650 additions and 1449 deletions
@@ -0,0 +1,445 @@
+# 管理后台部署指南
+
+## 部署前准备
+
+### 1. 环境要求
+
+- Node.js 16+ 
+- npm 或 yarn
+- Nginx (生产环境)
+
+### 2. 检查后端服务
+
+确保后端服务已启动并可访问：
+- 开发环境: http://localhost:8080
+- 生产环境: 配置实际的API地址
+
+## 开发环境部署
+
+### Windows系统
+
+#### 方式1: 使用启动脚本
+
+```bash
+cd web-admin
+start.bat
+```
+
+#### 方式2: 手动启动
+
+```bash
+cd web-admin
+npm install
+npm run dev
+```
+
+### Linux/Mac系统
+
+```bash
+cd web-admin
+npm install
+npm run dev
+```
+
+访问: http://localhost:5174
+
+## 生产环境部署
+
+### 1. 构建项目
+
+```bash
+cd web-admin
+npm install
+npm run build
+```
+
+构建完成后，会在 `dist` 目录生成静态文件。
+
+### 2. Nginx配置
+
+#### 基础配置
+
+```nginx
+server {
+    listen 80;
+    server_name admin.emotion-museum.com;
+    
+    root /var/www/web-admin/dist;
+    index index.html;
+    
+    # 支持 History 路由模式
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    
+    # API代理
+    location /api {
+        proxy_pass http://localhost: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;
+    }
+    
+    # 静态资源缓存
+    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/x-javascript application/xml+rss application/json;
+}
+```
+
+#### HTTPS配置
+
+```nginx
+server {
+    listen 443 ssl http2;
+    server_name admin.emotion-museum.com;
+    
+    ssl_certificate /path/to/cert.pem;
+    ssl_certificate_key /path/to/key.pem;
+    
+    root /var/www/web-admin/dist;
+    index index.html;
+    
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    
+    location /api {
+        proxy_pass http://localhost: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;
+    }
+}
+
+# HTTP重定向到HTTPS
+server {
+    listen 80;
+    server_name admin.emotion-museum.com;
+    return 301 https://$server_name$request_uri;
+}
+```
+
+### 3. 部署步骤
+
+#### 方式1: 手动部署
+
+```bash
+# 1. 构建项目
+cd web-admin
+npm run build
+
+# 2. 上传dist目录到服务器
+scp -r dist/* user@server:/var/www/web-admin/
+
+# 3. 配置Nginx
+sudo cp nginx.conf /etc/nginx/sites-available/admin.emotion-museum.com
+sudo ln -s /etc/nginx/sites-available/admin.emotion-museum.com /etc/nginx/sites-enabled/
+
+# 4. 测试Nginx配置
+sudo nginx -t
+
+# 5. 重启Nginx
+sudo systemctl restart nginx
+```
+
+#### 方式2: 使用部署脚本
+
+创建 `deploy.sh`:
+
+```bash
+#!/bin/bash
+
+echo "开始部署管理后台..."
+
+# 构建项目
+echo "1. 构建项目..."
+cd web-admin
+npm install
+npm run build
+
+# 备份旧版本
+echo "2. 备份旧版本..."
+ssh user@server "cd /var/www && mv web-admin web-admin.backup.$(date +%Y%m%d%H%M%S)"
+
+# 上传新版本
+echo "3. 上传新版本..."
+scp -r dist user@server:/var/www/web-admin
+
+# 重启Nginx
+echo "4. 重启Nginx..."
+ssh user@server "sudo systemctl restart nginx"
+
+echo "部署完成！"
+```
+
+### 4. 环境变量配置
+
+生产环境需要修改 `.env.production`:
+
+```env
+VITE_APP_TITLE=情绪博物馆管理后台
+VITE_APP_BASE_API=https://api.emotion-museum.com/api
+```
+
+## Docker部署
+
+### 1. 创建Dockerfile
+
+```dockerfile
+# 构建阶段
+FROM node:18-alpine as build-stage
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+RUN npm run build
+
+# 生产阶段
+FROM nginx:alpine as production-stage
+
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
+```
+
+### 2. 创建nginx.conf
+
+```nginx
+server {
+    listen 80;
+    server_name localhost;
+    
+    root /usr/share/nginx/html;
+    index index.html;
+    
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    
+    location /api {
+        proxy_pass http://backend:8080;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+}
+```
+
+### 3. 构建和运行
+
+```bash
+# 构建镜像
+docker build -t emotion-admin:latest .
+
+# 运行容器
+docker run -d -p 80:80 --name emotion-admin emotion-admin:latest
+```
+
+### 4. Docker Compose
+
+创建 `docker-compose.yml`:
+
+```yaml
+version: '3.8'
+
+services:
+  admin:
+    build: .
+    ports:
+      - "80:80"
+    depends_on:
+      - backend
+    networks:
+      - emotion-network
+
+  backend:
+    image: emotion-backend:latest
+    ports:
+      - "8080:8080"
+    networks:
+      - emotion-network
+
+networks:
+  emotion-network:
+    driver: bridge
+```
+
+运行:
+
+```bash
+docker-compose up -d
+```
+
+## 性能优化
+
+### 1. 代码分割
+
+Vite自动进行代码分割，无需额外配置。
+
+### 2. 资源压缩
+
+生产构建时自动压缩：
+
+```typescript
+// vite.config.ts
+build: {
+  minify: 'terser',
+  terserOptions: {
+    compress: {
+      drop_console: true,
+      drop_debugger: true
+    }
+  }
+}
+```
+
+### 3. CDN加速
+
+将静态资源上传到CDN：
+
+```typescript
+// vite.config.ts
+build: {
+  rollupOptions: {
+    output: {
+      manualChunks: {
+        'element-plus': ['element-plus'],
+        'vue': ['vue', 'vue-router', 'pinia']
+      }
+    }
+  }
+}
+```
+
+## 监控和日志
+
+### 1. Nginx访问日志
+
+```nginx
+access_log /var/log/nginx/admin.access.log;
+error_log /var/log/nginx/admin.error.log;
+```
+
+### 2. 前端错误监控
+
+可以集成Sentry等错误监控服务：
+
+```typescript
+// main.ts
+import * as Sentry from "@sentry/vue"
+
+Sentry.init({
+  app,
+  dsn: "YOUR_SENTRY_DSN",
+  environment: import.meta.env.MODE
+})
+```
+
+## 安全建议
+
+1. **使用HTTPS**: 生产环境必须使用HTTPS
+2. **修改默认密码**: 部署后立即修改默认管理员密码
+3. **限制访问**: 可以配置IP白名单
+4. **定期更新**: 及时更新依赖包
+5. **备份数据**: 定期备份数据库和配置文件
+
+## 故障排查
+
+### 1. 页面空白
+
+- 检查Nginx配置是否正确
+- 检查静态文件是否上传成功
+- 查看浏览器控制台错误
+
+### 2. API请求失败
+
+- 检查后端服务是否启动
+- 检查Nginx代理配置
+- 检查跨域配置
+
+### 3. 路由404
+
+- 确保Nginx配置了 `try_files $uri $uri/ /index.html`
+- 检查路由模式是否为history
+
+## 回滚方案
+
+如果部署出现问题，可以快速回滚：
+
+```bash
+# 恢复备份
+ssh user@server "cd /var/www && rm -rf web-admin && mv web-admin.backup.YYYYMMDDHHMMSS web-admin"
+
+# 重启Nginx
+ssh user@server "sudo systemctl restart nginx"
+```
+
+## 持续集成/持续部署 (CI/CD)
+
+### GitHub Actions示例
+
+创建 `.github/workflows/deploy.yml`:
+
+```yaml
+name: Deploy Admin
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    
+    steps:
+    - uses: actions/checkout@v2
+    
+    - name: Setup Node.js
+      uses: actions/setup-node@v2
+      with:
+        node-version: '18'
+    
+    - name: Install dependencies
+      run: |
+        cd web-admin
+        npm install
+    
+    - name: Build
+      run: |
+        cd web-admin
+        npm run build
+    
+    - name: Deploy to server
+      uses: easingthemes/ssh-deploy@v2
+      with:
+        SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
+        REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
+        REMOTE_USER: ${{ secrets.REMOTE_USER }}
+        SOURCE: "web-admin/dist/"
+        TARGET: "/var/www/web-admin/"
+```
+
+## 总结
+
+按照以上步骤，你可以成功部署管理后台到生产环境。记得：
+
+1. ✅ 修改默认密码
+2. ✅ 配置HTTPS
+3. ✅ 设置监控和日志
+4. ✅ 定期备份
+5. ✅ 及时更新依赖