live-photo/STARTUP.md
2025-08-01 15:41:44 +08:00

3.7 KiB
Raw Permalink Blame History

启动指南

快速启动

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 - 运行 ESLint
  • npm 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 数据存储
  • 文件隐藏/显示控制
  • 文件删除功能

技术特性

  • 文件拖拽上传
  • 上传进度显示
  • 图片预览和视频播放
  • 暗色/亮色主题切换
  • 实时在线用户计数
  • 文件搜索和筛选
  • 响应式网格布局

故障排除

常见问题

  1. 数据库连接错误

    # 确保 DATABASE_URL 环境变量设置正确
    export DATABASE_URL="file:./dev.db"
    
  2. Socket.IO 连接失败

    # 确保 Socket.IO 服务器正在运行
    node server.js
    
  3. 文件上传失败

    • 检查文件大小(最大 10MB
    • 检查文件类型(支持 JPG, PNG, GIF, MP4, WebM
    • 确保 uploads 目录存在且有写权限
  4. 构建失败

    # 清理并重新安装依赖
    rm -rf node_modules package-lock.json
    npm install
    npm run build
    

日志查看

  • Next.js 日志:控制台输出
  • Socket.IO 日志:控制台输出
  • 数据库日志Prisma Studio

生产部署

环境准备

  1. 设置生产环境变量
  2. 配置数据库(使用 PostgreSQL 或 MySQL
  3. 设置文件存储(使用 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 - 在线用户数