208 lines
3.7 KiB
Markdown
208 lines
3.7 KiB
Markdown
# 启动指南
|
||
|
||
## 快速启动
|
||
|
||
### 1. 安装依赖
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 2. 数据库初始化
|
||
```bash
|
||
# 生成 Prisma 客户端
|
||
npx prisma generate
|
||
|
||
# 推送数据库 schema
|
||
DATABASE_URL="file:./dev.db" npx prisma db push
|
||
|
||
# 填充示例数据
|
||
DATABASE_URL="file:./dev.db" npx prisma db seed
|
||
```
|
||
|
||
### 3. 构建应用
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 4. 启动应用
|
||
```bash
|
||
# 启动 Next.js 应用和 Socket.IO 服务器
|
||
node server.js
|
||
```
|
||
|
||
### 5. 访问应用
|
||
- 主页: http://localhost:3000
|
||
- 管理面板: http://localhost:3000/admin
|
||
|
||
## 开发模式
|
||
|
||
### 启动开发服务器
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### 单独启动 Socket.IO 服务器（如果需要）
|
||
```bash
|
||
node server.js
|
||
```
|
||
|
||
## 可用脚本
|
||
|
||
- `npm run dev` - 启动开发服务器
|
||
- `npm run build` - 构建生产版本
|
||
- `npm run start` - 启动生产服务器
|
||
- `npm run lint` - 运行 ESLint
|
||
- `npm run type-check` - 运行 TypeScript 类型检查
|
||
|
||
## 数据库管理
|
||
|
||
### 查看数据库
|
||
```bash
|
||
npx prisma studio
|
||
```
|
||
|
||
### 重置数据库
|
||
```bash
|
||
DATABASE_URL="file:./dev.db" npx prisma db push --force-reset
|
||
DATABASE_URL="file:./dev.db" npx prisma db seed
|
||
```
|
||
|
||
## 环境变量
|
||
|
||
确保 `.env.local` 文件包含以下配置：
|
||
|
||
```env
|
||
# Database
|
||
DATABASE_URL="file:./dev.db"
|
||
|
||
# Next.js
|
||
NEXTAUTH_SECRET="my-live-photos-secret-key-123"
|
||
NEXTAUTH_URL="http://localhost:3000"
|
||
|
||
# File Upload
|
||
MAX_FILE_SIZE=10485760
|
||
ALLOWED_FILE_TYPES="image/jpeg,image/png,image/gif,video/mp4,video/webm"
|
||
|
||
# Socket.io
|
||
SOCKET_PORT=3001
|
||
```
|
||
|
||
## 功能特性
|
||
|
||
### 核心功能
|
||
- ✅ 实时文件上传（图片/视频）
|
||
- ✅ WebSocket 实时推送更新
|
||
- ✅ 响应式现代UI设计
|
||
- ✅ 管理员面板（文件管理）
|
||
- ✅ SQLite 数据存储
|
||
- ✅ 文件隐藏/显示控制
|
||
- ✅ 文件删除功能
|
||
|
||
### 技术特性
|
||
- ✅ 文件拖拽上传
|
||
- ✅ 上传进度显示
|
||
- ✅ 图片预览和视频播放
|
||
- ✅ 暗色/亮色主题切换
|
||
- ✅ 实时在线用户计数
|
||
- ✅ 文件搜索和筛选
|
||
- ✅ 响应式网格布局
|
||
|
||
## 故障排除
|
||
|
||
### 常见问题
|
||
|
||
1. **数据库连接错误**
|
||
```bash
|
||
# 确保 DATABASE_URL 环境变量设置正确
|
||
export DATABASE_URL="file:./dev.db"
|
||
```
|
||
|
||
2. **Socket.IO 连接失败**
|
||
```bash
|
||
# 确保 Socket.IO 服务器正在运行
|
||
node server.js
|
||
```
|
||
|
||
3. **文件上传失败**
|
||
- 检查文件大小（最大 10MB）
|
||
- 检查文件类型（支持 JPG, PNG, GIF, MP4, WebM）
|
||
- 确保 uploads 目录存在且有写权限
|
||
|
||
4. **构建失败**
|
||
```bash
|
||
# 清理并重新安装依赖
|
||
rm -rf node_modules package-lock.json
|
||
npm install
|
||
npm run build
|
||
```
|
||
|
||
### 日志查看
|
||
|
||
- Next.js 日志：控制台输出
|
||
- Socket.IO 日志：控制台输出
|
||
- 数据库日志：Prisma Studio
|
||
|
||
## 生产部署
|
||
|
||
### 环境准备
|
||
1. 设置生产环境变量
|
||
2. 配置数据库（使用 PostgreSQL 或 MySQL）
|
||
3. 设置文件存储（使用 S3 或其他对象存储）
|
||
|
||
### 构建和启动
|
||
```bash
|
||
npm run build
|
||
npm start
|
||
```
|
||
|
||
### 使用 PM2 管理进程
|
||
```bash
|
||
# 安装 PM2
|
||
npm install -g pm2
|
||
|
||
# 启动应用
|
||
pm2 start server.js --name "my-live-photos"
|
||
|
||
# 查看状态
|
||
pm2 status
|
||
|
||
# 查看日志
|
||
pm2 logs my-live-photos
|
||
```
|
||
|
||
## API 文档
|
||
|
||
### 文件上传
|
||
```
|
||
POST /api/upload
|
||
Content-Type: multipart/form-data
|
||
```
|
||
|
||
### 获取文件列表
|
||
```
|
||
GET /api/files?type=image&page=1&limit=20
|
||
```
|
||
|
||
### 更新文件
|
||
```
|
||
PUT /api/files/[id]
|
||
Content-Type: application/json
|
||
```
|
||
|
||
### 删除文件
|
||
```
|
||
DELETE /api/files/[id]
|
||
```
|
||
|
||
## WebSocket 事件
|
||
|
||
### 客户端发送
|
||
- `file:upload` - 文件上传
|
||
- `file:delete` - 文件删除
|
||
- `file:toggle:visibility` - 切换文件可见性
|
||
|
||
### 服务器推送
|
||
- `file:uploaded` - 新文件上传
|
||
- `file:deleted` - 文件删除
|
||
- `file:visibility:changed` - 文件可见性变更
|
||
- `user:count` - 在线用户数 |