当前位置：首页 > news >正文

手把手教你用Cloudflare Pages免费部署MoonTV追剧站（Next.js 14 + D1数据库）

news 2026/6/17 17:26:00

零运维搭建个人影视站：Next.js 14 + Cloudflare D1全栈实践

最近发现身边不少技术爱好者都在搭建自己的影视聚合站，既能满足个性化观影需求，又能作为全栈开发的练手项目。今天要分享的这套方案，可能是目前最省心的选择——完全免费的Cloudflare生态链，配合Next.js 14的App Router新特性，30分钟就能打造一个带云端数据同步的私人影院。最妙的是，整个过程不需要租用任何服务器，连数据库都托管在Cloudflare上。

1. 项目架构解析与技术选型

MoonTV这个开源项目之所以值得推荐，在于它采用了2023年最前沿的技术组合：

前端框架：Next.js 14（App Router模式）
样式方案：Tailwind CSS + Headless UI
数据层：同时支持浏览器本地存储和Cloudflare D1
播放引擎：HLS.js + ArtPlayer双方案备援
部署方案：Vercel/Cloudflare Pages零配置部署

特别值得一提的是它的混合存储架构设计。当检测到配置了D1数据库时，系统会自动将用户数据同步到云端；否则回退到localStorage。这种优雅的降级策略保证了项目在任何环境下都能正常运行。

# 典型的技术栈依赖 dependencies: { "next": "^14.1.0", "react": "^18", "hls.js": "^1.4.10", "drizzle-orm": "^0.28.5", "@cloudflare/workers-types": "^4.20230801.0" }

2. 从Fork到部署的极简流程

2.1 仓库准备与同步机制

首先访问MoonTV官方仓库，点击右上角的Fork按钮。这里有个关键技巧：在Fork时取消勾选"Copy the main branch only"，这样可以保留所有分支的历史记录。

保持与上游同步有两种推荐方式：

自动同步（推荐）：在仓库设置中启用Actions，项目已经预置了.github/workflows/sync.yml
手动同步：在Fork后的仓库页面点击"Sync fork"按钮

注意：每次同步后需要重新触发Cloudflare Pages的部署

2.2 Cloudflare Pages配置详解

在Cloudflare控制台创建新项目时，有几个易错点需要特别注意：

配置项	推荐值	错误示例
构建命令	`pnpm install --frozen-lockfile && pnpm run pages:build`	使用npm或yarn可能导致依赖冲突
输出目录	`.vercel/output/static`	误填为`out`或`dist`
框架预设	None (手动配置)	选择Next.js会导致部署失败
Node版本	18+	低于16会报语法错误

部署完成后，立即做两个关键操作：

在Settings → Functions → Compatibility Flags中添加nodejs_compat
在Environment Variables中添加PASSWORD变量（用于/admin后台）

# 本地测试时可以使用的等价命令 NODE_VERSION=18 pnpm install && \ NEXT_PUBLIC_STORAGE_TYPE=local pnpm run build

3. D1数据库的实战配置

3.1 数据库创建与初始化

在Cloudflare控制台进入D1页面，新建数据库时建议选择亚太地区（如新加坡）以获得更好的国内访问速度。创建完成后，需要执行初始化SQL：

-- 核心表结构 CREATE TABLE IF NOT EXISTS users ( id TEXT PRIMARY KEY, username TEXT UNIQUE, password TEXT ); CREATE TABLE IF NOT EXISTS favorites ( user_id TEXT, item_id TEXT, created_at INTEGER, PRIMARY KEY (user_id, item_id) );

项目提供了完善的TypeScript类型定义，所有数据库操作都通过Drizzle ORM完成：

// db/schema.ts 节选 export const users = pgTable('users', { id: text('id').primaryKey(), username: text('username').notNull().unique(), password: text('password').notNull() }); export type User = typeof users.$inferSelect;

3.2 环境变量黄金组合

要使数据库生效，需要配置以下环境变量（在Pages → Settings → Environment Variables）：

变量名	示例值	作用
`NEXT_PUBLIC_STORAGE_TYPE`	`d1`	切换存储引擎
`DB_URL`	`(无需填写)`	自动注入D1绑定
`USERNAME`	`admin`	后台登录账号
`PASSWORD`	`your_secure_pwd`	后台登录密码

重要提示：D1绑定是自动完成的，千万不要手动填写DB_URL！Cloudflare会在运行时自动注入这个值。

4. 高级功能与性能调优

4.1 自定义搜索源配置

通过修改config.json可以扩展视频源，项目支持多种类型的媒体接口：

{ "sites": [ { "name": "电影天堂", "url": "https://www.example.com/api", "type": "json", "parser": "customParser.js" } ], "searchDepth": 3, "doubanProxy": "https://api.douban.com" }

4.2 边缘缓存策略优化

在Cloudflare Pages的_headers文件中添加以下规则，可以显著提升视频加载速度：

/*.m3u8 Cache-Control: public, max-age=3600 Edge-Cache-Tag: video /api/* Cache-Control: no-store

4.3 移动端PWA体验增强

项目已经内置PWA支持，但可以通过修改manifest.webmanifest进一步定制：

{ "name": "我的私人影院", "short_name": "MoonTV", "start_url": "/?source=pwa", "display": "standalone", "theme_color": "#1e1e2e", "background_color": "#181825" }

5. 运维监控与错误排查

当系统出现异常时，可以按以下步骤诊断：

查看实时日志：Cloudflare Pages → 部署 → 查看Build Logs

测试数据库连接：通过Wrangler CLI执行查询

wrangler d1 execute DB_NAME --command "SELECT * FROM users LIMIT 1"

验证环境变量：在Pages Functions中创建测试端点

export async function onRequest(context) { return new Response(JSON.stringify(process.env)); }

常见问题解决方案：

现象	可能原因	解决方法
页面空白	未设置nodejs_compat	添加兼容性标志
数据库连接失败	未绑定D1实例	检查Pages绑定设置
视频无法播放	跨域问题	配置CORS规则

这套方案在我实际使用中表现非常稳定，连续运行三个月没有出现服务中断。最惊喜的是Cloudflare的全球加速网络，即便没有自定义域名，海外节点的访问速度也能满足720p视频流畅播放。对于想要进阶学习全栈开发的朋友，这个项目值得深入研究其架构设计，特别是它如何优雅地处理了：