peanut/happy-life-star

Fork 0

Files

T

peanut 0016453f20 增加后台管理模块

2025-10-27 23:57:31 +08:00

7.7 KiB

Raw Blame History

管理后台部署指南

部署前准备

1. 环境要求

Node.js 16+
npm 或 yarn
Nginx (生产环境)

2. 检查后端服务

确保后端服务已启动并可访问：

开发环境: http://localhost:8080
生产环境: 配置实际的API地址

开发环境部署

Windows系统

方式1: 使用启动脚本

cd web-admin
start.bat

方式2: 手动启动

cd web-admin
npm install
npm run dev

Linux/Mac系统

cd web-admin
npm install
npm run dev

访问: http://localhost:5174

生产环境部署

1. 构建项目

cd web-admin
npm install
npm run build

构建完成后，会在 dist 目录生成静态文件。

2. 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配置

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: 手动部署

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

#!/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:

VITE_APP_TITLE=情绪博物馆管理后台
VITE_APP_BASE_API=https://api.emotion-museum.com/api

Docker部署

1. 创建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

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. 构建和运行

# 构建镜像
docker build -t emotion-admin:latest .

# 运行容器
docker run -d -p 80:80 --name emotion-admin emotion-admin:latest

4. Docker Compose

创建 docker-compose.yml:

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

运行:

docker-compose up -d

性能优化

1. 代码分割

Vite自动进行代码分割，无需额外配置。

2. 资源压缩

生产构建时自动压缩：

// vite.config.ts
build: {
  minify: 'terser',
  terserOptions: {
    compress: {
      drop_console: true,
      drop_debugger: true
    }
  }
}

3. CDN加速

将静态资源上传到CDN：

// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'element-plus': ['element-plus'],
        'vue': ['vue', 'vue-router', 'pinia']
      }
    }
  }
}

监控和日志

1. Nginx访问日志

access_log /var/log/nginx/admin.access.log;
error_log /var/log/nginx/admin.error.log;

2. 前端错误监控

可以集成Sentry等错误监控服务：

// main.ts
import * as Sentry from "@sentry/vue"

Sentry.init({
  app,
  dsn: "YOUR_SENTRY_DSN",
  environment: import.meta.env.MODE
})

安全建议

使用HTTPS: 生产环境必须使用HTTPS
修改默认密码: 部署后立即修改默认管理员密码
限制访问: 可以配置IP白名单
定期更新: 及时更新依赖包
备份数据: 定期备份数据库和配置文件

故障排查

1. 页面空白

检查Nginx配置是否正确
检查静态文件是否上传成功
查看浏览器控制台错误

2. API请求失败

检查后端服务是否启动
检查Nginx代理配置
检查跨域配置

3. 路由404

确保Nginx配置了 try_files $uri $uri/ /index.html
检查路由模式是否为history

回滚方案

如果部署出现问题，可以快速回滚：

# 恢复备份
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:

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/"

总结

按照以上步骤，你可以成功部署管理后台到生产环境。记得：

✅ 修改默认密码
✅ 配置HTTPS
✅ 设置监控和日志
✅ 定期备份
✅ 及时更新依赖

7.7 KiB Raw Blame History Unescape Escape