3.7 KiB
3.7 KiB
启动指南
快速启动
1. 安装依赖
npm install
2. 数据库初始化
# 生成 Prisma 客户端
npx prisma generate
# 推送数据库 schema
DATABASE_URL="file:./dev.db" npx prisma db push
# 填充示例数据
DATABASE_URL="file:./dev.db" npx prisma db seed
3. 构建应用
npm run build
4. 启动应用
# 启动 Next.js 应用和 Socket.IO 服务器
node server.js
5. 访问应用
开发模式
启动开发服务器
npm run dev
单独启动 Socket.IO 服务器(如果需要)
node server.js
可用脚本
npm run dev
- 启动开发服务器npm run build
- 构建生产版本npm run start
- 启动生产服务器npm run lint
- 运行 ESLintnpm run type-check
- 运行 TypeScript 类型检查
数据库管理
查看数据库
npx prisma studio
重置数据库
DATABASE_URL="file:./dev.db" npx prisma db push --force-reset
DATABASE_URL="file:./dev.db" npx prisma db seed
环境变量
确保 .env.local
文件包含以下配置:
# 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 数据存储
- ✅ 文件隐藏/显示控制
- ✅ 文件删除功能
技术特性
- ✅ 文件拖拽上传
- ✅ 上传进度显示
- ✅ 图片预览和视频播放
- ✅ 暗色/亮色主题切换
- ✅ 实时在线用户计数
- ✅ 文件搜索和筛选
- ✅ 响应式网格布局
故障排除
常见问题
-
数据库连接错误
# 确保 DATABASE_URL 环境变量设置正确 export DATABASE_URL="file:./dev.db"
-
Socket.IO 连接失败
# 确保 Socket.IO 服务器正在运行 node server.js
-
文件上传失败
- 检查文件大小(最大 10MB)
- 检查文件类型(支持 JPG, PNG, GIF, MP4, WebM)
- 确保 uploads 目录存在且有写权限
-
构建失败
# 清理并重新安装依赖 rm -rf node_modules package-lock.json npm install npm run build
日志查看
- Next.js 日志:控制台输出
- Socket.IO 日志:控制台输出
- 数据库日志:Prisma Studio
生产部署
环境准备
- 设置生产环境变量
- 配置数据库(使用 PostgreSQL 或 MySQL)
- 设置文件存储(使用 S3 或其他对象存储)
构建和启动
npm run build
npm start
使用 PM2 管理进程
# 安装 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
- 在线用户数