Videofly Docs

安装

如何安装和设置 VideoFly 模板

前置要求

在开始之前，请确保已安装以下工具：

工具最低版本推荐版本说明
Node.js18.x20.x LTSJavaScript 运行时
pnpm9.x最新快速的包管理器
Git2.x最新版本控制

提示: 如果您还没有安装 pnpm，可以使用以下命令安装：

npm install -g pnpm

安装步骤

1. 克隆仓库

使用 Git 克隆
git clone https://github.com/your-repo/videofly.git
cd videofly
安装依赖
pnpm install

这将安装所有项目依赖，包括：

  • Next.js 和 React
  • Drizzle ORM
  • Better Auth
  • UI 组件库
  • 所有开发依赖

安装完成后，您应该能看到类似以下的输出：

Packages: +XXX
Progress: resolved XXX, reused XXX, downloaded XXX, added XXX, done
Done in X.Xs

2. 配置环境变量

复制示例环境文件：

cp .env.example .env.local

编辑 .env.local 文件，至少配置以下必需的环境变量：

# -----------------------------------------------------------------------------
# Database (PostgreSQL)
# -----------------------------------------------------------------------------
# 推荐使用 Neon: https://neon.tech/
DATABASE_URL='postgresql://user:password@host/database?sslmode=require'

3. 初始化数据库

使用 Drizzle Kit 推送数据库 schema：

pnpm db:push

这将创建所有必需的数据库表：

  • users - 用户表
  • sessions - 会话表
  • accounts - OAuth 账户表
  • credit_packages - 积分包表
  • credit_holds - 积分冻结记录
  • credit_transactions - 积分交易历史
  • videos - 视频生成记录
  • customers - 客户表
  • creem_subscriptions - 订阅表

数据库注意事项

确保您的 PostgreSQL 数据库已创建并可访问。如果您使用 Neon，可以在控制面板创建新项目。

首次推送时，Drizzle 会自动创建所有表和索引。

4. 启动开发服务器

pnpm dev

应用将在 http://localhost:3000 上运行。

您可以访问以下页面：

页面路径说明
首页/营销首页
登录/login用户登录
注册/register用户注册
仪表板/dashboard用户仪表板
视频历史/dashboard/videos视频生成历史
文本生成视频/text-to-video文生视频工具
图片生成视频/image-to-video图生视频工具
定价/pricing定价页面

验证安装

检查数据库连接

访问 http://localhost:3000/api/health，应该返回健康状态。

测试身份验证

  1. 访问 http://localhost:3000/login
  2. 点击 "使用 Google 登录"
  3. 完成 OAuth 流程
  4. 应该被重定向到仪表板

测试视频生成

  1. 确保已配置 AI 提供商 API 密钥
  2. 访问 http://localhost:3000/text-to-video
  3. 输入提示词并提交
  4. 检查视频是否开始生成

开发工具

可用的脚本

pnpm dev

启动开发服务器（端口 3000）

pnpm build

构建生产版本

pnpm start

启动生产服务器

pnpm lint

运行 ESLint 代码检查

pnpm typecheck

运行 TypeScript 类型检查

pnpm db:push

推送数据库 schema 到数据库

pnpm db:studio

打开 Drizzle Studio（数据库 GUI）

pnpm db:generate

生成数据库迁移文件

pnpm db:migrate

应用数据库迁移

故障排除

依赖安装失败

如果遇到依赖问题，请尝试：

  1. 删除 node_modules 和 pnpm-lock.yaml
  2. 清理 pnpm 缓存: pnpm store prune
  3. 重新安装: pnpm install

数据库连接错误

检查以下内容：

  1. DATABASE_URL 是否正确
  2. 数据库是否可访问
  3. SSL 模式设置是否正确
  4. 防火墙是否允许连接

端口已被占用

如果 3000 端口已被占用，可以使用其他端口：

PORT=3001 pnpm dev

OAuth 回调错误

确保在 OAuth 提供商的回调 URL 设置中添加了本地开发地址：

http://localhost:3000/api/auth/callback/google
http://localhost:3000/api/auth/callback/github

下一步

安装完成后，您可以：

配置

了解如何配置环境变量和功能开关

架构

深入了解项目架构和设计决策

组件

探索可用的 UI 组件

Previous

快速开始

Next

登录配置

On this page