446 lines
7.7 KiB
Markdown
446 lines
7.7 KiB
Markdown
# 管理后台部署指南
|
||
|
||
## 部署前准备
|
||
|
||
### 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. ✅ 及时更新依赖
|